It doesn’t return a correct font on iOS, nor in many Android browsers.Approach AĪpproach A is to use the “magical” shorthand CSS property: font: menu Ī few of these shorthand properties have existed for the longest time ( caption, icon, menu, message-box, small-caption, status-bar), yet I have never seen them being commonly used. (Nomenclature note: I am using “system UI font” here to refer to the font that the user interface of the operating system is rendered in - distinct from a “system font,” a traditional name for any local or platform font that is already present on the user’s system and that doesn’t need to be included in the website’s payload.) Two Approaches to system fontsĬurrently, there are two approaches to making your website use the system UI font for its typography. That’s because the CSS support is curiously schizophrenic. Balancing Line Length And Font Size In RWDīut it’s not as easy as it could be.Whitespace Characters in Unicode & HTML.Guide to CSS Font Stacks: Techniques and Resources.Tools And Resources For A More Meaningful Web Typography.
Whether you want your website to feel more like an app, to draw clearer lines between the content and user interface, or to use modern, beautiful fonts with zero latency, you might be interested in using system UI fonts on your website. No wonder that the idea of using those fonts is spreading through the web world as well. The latest generation of system UI fonts and their allegiances.
It was Microsoft that restarted conversations about system UI fonts with its original Windows Phone design language (née Metro), which relied heavily on typography in general, and on a font named Segoe in particular.
Last but not least, let us not forget about Microsoft. Google has been toiling away at Roboto with great success (including regular updates), Apple made a splash with San Francisco, and Mozilla asked renowned type designer Erik Spiekermann to create Fira Sans. System UI fonts being amazing kind of snuck up on us. How do we use system UI fonts on a website, and what are the caveats? They’re an interesting, fresh alternative to web typography - and one that doesn’t require a web-font delivery service or font files stored on your server. Go do the normal Google Fonts thing and find the URL for loading Lato.For perhaps the first time since the original Macintosh, we can get excited about using system UI fonts. Say we wanted to use Lato in an email, if we can. Native Android mail app (not Gmail app)Īside from using a JavaScript font loader, which definitely won’t work in email (no email client will be executing JavaScript), ultimately it comes down to in CSS.
While web fonts don’t have universal support, here are the email clients where they are supported: Jaina Mistry had the scoop on this last year over on the Litmus blog: And you use them pretty much just like you’d use custom fonts on a website.