Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Using System UI Fonts In Web Design: A Quick Practical Guide

For perhaps the first time since the original Macintosh, we can get excited about using system UI fonts. 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. How do we use system UI fonts on a website, and what are the caveats?

System UI fonts being amazing kind of snuck up on us. Google has been toiling away at Roboto1 with great success (including regular updates2), Apple made a splash with San Francisco3, and Mozilla asked renowned type designer Erik Spiekermann to create Fira Sans4. Last but not least, let us not forget about Microsoft. 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 Segoe5 in particular.

The latest generation of system UI fonts and their allegiances6
The latest generation of system UI fonts and their allegiances. (View large version7)

No wonder that the idea of using those fonts is spreading through the web world as well. 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.

But it’s not as easy as it could be. That’s because the CSS support is curiously schizophrenic.

(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 Link

Currently, there are two approaches to making your website use the system UI font for its typography.

Approach A Link

Approach A is to use the “magical” shorthand CSS property:

font: menu;

A few of these shorthand properties8 have existed for the longest time (caption, icon, menu, message-box, small-caption, status-bar), yet I have never seen them being commonly used.

Approach A has its drawbacks:

  • It doesn’t return a correct font on iOS, nor in many Android browsers.
  • It’s a shorthand, which means it overrides the font size (although that can be reset), and it cannot be combined with and does not fall back to anything else.
  • Until December 2015 in Firefox on Mac OS X, it doesn’t use the “smart” properties of San Francisco (which switches from San Francisco Text to San Francisco Display automatically for text over 20 pixels and adjusts letter spacing).
Mac OS X system UI fonts over the ages: from Chicago in 1984, through Charcoal and Lucida Grande, to San Francisco on a high-resolution display in 20159
Mac OS X system UI fonts over the ages: from Chicago in 1984, through Charcoal and Lucida Grande, to San Francisco on a high-resolution display in 2015. (View large version10)

Approach B Link

Approach B is to list fonts by name:

font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;

This, too, has its drawbacks:

  • You’ll have to maintain the list (and its order). Perhaps system UI fonts won’t change as often as they did in the last few years — but in any case, this is not future-proof.
  • The list targets the most popular browsers and operating systems, but it doesn’t target all of them.
  • It doesn’t yet work in Firefox on Mac OS X El Capitan, resulting in Neue Helvetica being shown, rather than San Francisco. (This is slated to be fixed in December 2015.)
  • This solution is prone to naming conflicts, which led to a very interesting bug with the system font on Medium11. Also, for example, Oxygen (KDE’s UI font12) is the name of another font13 that people can install, which can lead to surprises14. Also, if you are a developer and happen to have installed Roboto or Fira Sans on your machine, then this font declaration might use one of those instead of the system’s actual UI font.
  • Mac OS 10.0 to 10.9 uses Lucida Grande as the system UI font. Mac OS 10.10 uses Neue Helvetica. However, all versions of Mac OS X have both of these fonts installed. Because the font-family declaration works by sequentially going through the list of fonts to find the first one installed, choosing Lucida Grande on some platforms and Neue Helvetica on others is impossible. The first available one listed in the declaration will always be chosen.

Other Approaches Link

You might be inclined to combine approach A with approach B to get the best of both worlds. Unfortunately, this is not easy because the font and font-family properties are mutually exclusive — one will just override the other. Perhaps media queries can come to the rescue, but that’s hacky.

You might also imagine sending different CSS values from the server, depending on the user agent (for example, sending only font-family: "Fira Sans", sans-serif; if we know the browser is running on Firefox OS), or doing it via JavaScript. But this seems cumbersome and hard to maintain, and it still doesn’t solve all of our problems.

You can use the system UI font just for the user interface (on the left, medium.com) or for the entire website (on the right, colepeters.com). Note, however, that many system UI fonts are not optimized for longer content.15
You can use the system UI font just for the user interface (on the left, Medium16) or for the entire website (on the right, Cole Peters17). Note, however, that many system UI fonts are not optimized for longer content. (View large version18)

What To Do Today? Link

I work at Medium, and currently we use approach B:

font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    sans-serif;

We chose this approach because it seems to have fewer major problems. (Approach A fails in mobile browsers in ways that are unacceptable. Approach B fails, too, but less often and with fewer consequences. Your mileage may vary.)

You and I can make this even better together. The box below uses the declaration above and should render in your system’s UI font. If it doesn’t or if you have any thoughts, please leave a comment!

This should be rendered in your system’s UI font.
The quick brown fox jumps over the lazy dog.

Details Of Approach B Link

If you are interested in the details, let’s work through how this list got to look the way it does:

font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;

The first grouping is CSS properties that map to the system’s UI font. That covers a lot of ground, and there is no chance that these fonts will be mistaken for something else:

  • -apple-system targets San Francisco in Safari on Mac OS X and iOS, and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  • BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.

The second grouping is for known system UI fonts:

  • Segoe UI targets Windows and Windows Phone.
  • Roboto targets Android and newer Chrome OS’. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.
  • Oxygen targets KDE, Ubuntu targets… well, you can guess, and Cantarell targets GNOME. This is beginning to feel futile because some Linux distributions have many of these fonts.
  • Fira Sans targets Firefox OS.
  • Droid Sans targets older versions of Android.
  • Note that we don’t specify San Francisco by name. On both iOS and Mac OS X, San Francisco isn’t obviously accessible, but rather exists as a “hidden” font.
  • We also don’t specify San Francisco using .SFNSText-Regular, the internal PostScript name for San Francisco on Mac OS X. It only works in Chrome and is less versatile than BlinkMacSystemFont.

The third grouping is our fallback fonts:

  • Helvetica Neue targets pre-El Capitan versions of Mac OS X. It is listed close to the end because it’s a popular font on other non-El Capitan computers.
  • sans-serif is the default sans-serif fallback font.
The evolution of Windows’ system UI font is even more drastic than Mac OS X’s — from monospaced bitmapped fonts in Windows 1.0 in 1985 to the high-resolution Segoe UI in Windows 10.19
The evolution of Windows’ system UI font is even more drastic than Mac OS X’s — from monospaced bitmapped fonts in Windows 1.0 in 1985 to the high-resolution Segoe UI in Windows 10. (View large version20)

Here are the currently known problems with this approach:

  • In Firefox on Mac OS X, San Francisco has tighter letter spacing than on Safari and Chrome.
  • It doesn’t render Lucida Grande on pre-Yosemite versions of Mac OS X, falling back to Neue Helvetica. And it might not match the correct font on less popular operating systems or more complicated configurations.

The Future Link

There’s still work to do. Everything we’ve covered works only for Western typography. Also, if you want to adjust the padding or line height according to the UI font that your website is using, then you’ll have to use the hybrid approach above or else detect the font after rendering21.

Still, the early results are already good enough. Hopefully, in the future, all of this will become less complicated. If any of this is important to you, please tell browser vendors!22

The last three versions of Mac OS X use three different system UI fonts: Lucida Grande on Mac OS 10.9 (Mavericks); a special version of Neue Helvetica on Mac OS 10.10 (Yosemite); and a special version of San Francisco on Mac OS 10.11 (El Capitan). It’s safe to assume that future versions will continue using San Francisco.23
The last three versions of Mac OS X use three different system UI fonts: Lucida Grande on Mac OS 10.9 (Mavericks); a special version of Neue Helvetica on Mac OS 10.10 (Yosemite); and a special version of San Francisco on Mac OS 10.11 (El Capitan). It’s safe to assume that future versions will continue using San Francisco. (View large version24)

Further Reading Link

Thanks to John Daggett, Michael Duggan, Kenneth Ormandy and Emil Eklund for their help with this article.

(vf, al)

Footnotes Link

  1. 1 http://www.google.com/design/spec/style/typography.html
  2. 2 http://www.fastcodesign.com/3033126/roboto-rebooted-why-google-plans-to-update-its-font-like-the-rest-of-its-products
  3. 3 https://developer.apple.com/fonts/
  4. 4 http://mozilla.github.io/Fira/
  5. 5 https://en.wikipedia.org/wiki/Segoe
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/11/01-modern-system-fonts.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/11/01-modern-system-fonts.png
  8. 8 https://developer.mozilla.org/en-US/docs/Web/CSS/font
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/11/02-history-mac.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/11/02-history-mac.png
  11. 11 'https://medium.com/@mwichary/system-shock-6b1dc6d6596f'
  12. 12 'https://www.google.com/fonts/specimen/Oxygen'
  13. 13 'http://www.identifont.com/show?HYN'
  14. 14 'https://twitter.com/zipboing/status/659744396431261696'
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/11/03-two-sites.png
  16. 16 https://medium.com/
  17. 17 https://colepeters.com/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/11/03-two-sites.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/11/04-history-win.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/11/04-history-win.png
  21. 21 'https://www.bramstein.com/writing/detecting-system-fonts-without-flash.html'
  22. 22 'https://www.smashingmagazine.com/2011/09/help-the-community-report-browser-bugs/'
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/11/05-recent-mac-os.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/11/05-recent-mac-os.png
  25. 25 'http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/'
  26. 26 'https://medium.com/@mwichary/system-shock-6b1dc6d6596f'
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Marcin is a design lead and a typographer at Medium. Previously, he was a fellow at Code for America and a user experience designer at Google, working with the Chrome, search, and homepage doodle teams. After hours, Marcin likes to photograph cities, research old technology, and force his friends to watch “Sneakers” over and over again.

  1. 1

    Who would use this?
    I could see the pushback being “…but our Brand!”

    1
    • 2

      I can see many of the same situations you’d use a system UI font in a native iOS or Android app… and some of the situations you’d just use a default/neutral sans serif font. Not everything has to be branded! :·)

      2
    • 3

      We’re doing a web app currently and for V2 we aim at a responsive webapp. This will go a long way into making the app „fit in” any operating system our clients might use.

      0
  2. 4

    Shows Segoe UI for me on my Mac with Chrome as the browser.

    0
  3. 6

    At P2HTML (www.p2html.com) we work with many fonts but specially Brandon Grotesque and TypeKit ones, we will give a try to Erik Spierkermann one which is simlar to Meta.

    -9
  4. 7

    Seems a lot like a “I discovered a Mac bug” post. Almost half of the article about it. And the practical value? Well. Why use a system font in a system that’s browser-centered and cope with all short-comings of that? Why not use a font fitting the purpose – a browser oriented… well… thing?

    -5
  5. 8

    Have you mess layout using those system font? different fonts usually have their own line-height and kerning aren’t?

    Also as web developer, we usually want our website to look consistent to all devices (and OS) that’s why we opted to use webfont, I believe it would be different scenario if we were designed for application that target specific OS (which likely we use default system font the OS provided).

    1
  6. 10

    Brian Krogsgard

    November 13, 2015 8:41 pm

    Hey Marcin, great post. I loved the Medium “system” post as well. I’m really intrigued by the approach generally, but do have one question about alternative weights.

    Have you done or know of research surrounding how much flexibility there is for declaring weights? I assume it works fine for normal/bold, but what about numeric weights that aren’t 400/700? Like, if I prefer a “book” font, or 300, is there pretty good support there? I presume that falls back to 400 on most systems, and I bet I could do lots of testing :) but I’m curious if you all looked into such things for your Medium implementation. Cheers!

    1
  7. 13

    @Marcin Wichary, why not `-apple-system, BlinkMacSystemFont, system, sans-serif;`?

    0
    • 14

      It wouldn’t work very well on some browsers (e.g. Firefox today) and/or older operating systems (e.g. Macs with Lucida Grande). It will also cause big issues in some versions of Windows with system mapping to the bitmap System font.

      0
      • 15

        Congratulations on discovering why we all moved to webfonts in the first place. Having Verdana on Windows render out with distinctly different spacing and vertical size from Helvetica on a Mac is why everyone adopted webfonts as they became available. Not to mention the hackups that ensured from the same font having different names across operating systems, or the way the same font would render differently across different operation systems.

        Sounds like a solution in search of a problem, and chock full of problematic edge cases.

        3
        • 16

          One obvious “problem this solution is searching for” is the simple case of making a web app more native in nature by using system UI fonts for the user interface elements – menus, non-HTML controls and inputs, etc.

          2
  8. 17

    Gunnar Bittersmann

    November 14, 2015 1:01 pm

    I think there’s one problem in setting different fonts for different devices: Fonts differ in their x-heights and stroke widths, thus require different amounts of lead, i.e. different line heights for best readability. (cf. The Science of Typography https://speakerdeck.com/bramstein/the-science-of-typography by Bram Stein)

    Unfortunately, CSS does not allow to specify `font: 1em/1.4 fontA, 1em/1.5 fontB, 1.1em/1.3 fontC, …`. I’m afraid `font-size-adjust` is not much helpful here either.

    So this approach might work for similar fonts, but generally it does not do that well.

    0
    • 18

      I agree. I mentioned this somewhere in the article as a challenge. Fortunately, there are ways to specify different values for different fonts if you assign those fonts via JavaScript or on the server when looking at the user agent. I would love a more modern font-size-adjust that would do some of the things you requested – it would be useful in more situations than just this one.

      0
  9. 19

    I have been doing this for a long time with my Universal Font Stack Stylesheet.
    http://www.vsubhash.com/article.asp?id=61&info=Moral_Volcano%E2%80%99s_Universal_CSS_Font_Stack

    1
  10. 20

    What about the simple “font-family: sans-serif;” ?

    0
  11. 22

    The tittle (circle on top of the “i”) in San Francisco just looks odd in that image comparing the three finder menus. Anybody else?

    0
  12. 23

    I am glad you wrote this article. It is a good alternative to the practice of loading web fonts from external services and it should give a boost to the performance of the website. I think it is great to explore these options despite the still existing shortcomings.

    I have one question: for those of us that don’t jump immediately on the “Upgrade to Windows 10” system notice, what are the font alternatives to “Segoe”? I’m talking mainly about Windows 7, 8 and 8.1 users.

    1
  13. 25

    I really like this idea for numerous reasons, definitely considering it for future projects. I always love to squeeze out every last drop of performance enhancement on a site, but fonts are obviously always the big thing to drag that down. Will be cool to see what this does in terms of the various site score website.

    Thanks Marcin.

    2
  14. 26

    excellent article. One of the first things needed to begin designing for the web.

    2
  15. 27

    Jitendra Vyas

    January 31, 2016 6:57 am

    On medium.com now you are using "medium-content-sans-serif-font","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif

    Have you recently dropped the idea of using system fonts only?

    5

↑ Back to top