System Font Stack: its history and rationale

For some websites and web apps, the system font is the appropriate choice to fully integrate them with the OS’s user interface. Here’s the history of how web developers have implemented the “system font stack”. The article concludes with a proposed system font stack for 2020.

[Updated on 15 Sep, 2020] I’ve added the paragraphs on a case against the use of system-ui.

An example of System Font Stack, which is actually what I propose at the end of this article.

Medium in 2015

As far as I can tell, it was Medium who pioneered the system font stack approach back in 2015. They decided to use the system font for its UI components (while they chose Kievit and Charter for articles). The motivation was summarised in the following quote:

“We believe the UI should come secondary to the stories written on Medium, and we are pushing that further by using familiar fonts on each operating system.” — Brad Birdsall (Birdsall 2015)

The CSS code for implementing this design was like this:

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

For the rationale behind this CSS declaration, see Wichary (2015) (the section “Details Of Approach B”).

WordPress in 2016

Then, WordPress followed suit for its Admin page, by ditching Open Sans from Google Fonts, which they had been using since 2013. In this case, the motivation was to improve performance:

“Now that the admin doesn’t have to load fonts from Google, it should feel faster and will provide a better experience for developers who are working offline.” — Sarah Gooding (Gooding 2016)

For more detail, see Gooding (2016).

I cannot find exactly how WordPress specified the system font stack at that time. But, here’s how WordPress does it today:

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

GitHub in 2017

GitHub jumped on the bandwagon in 2017. In GitHub’s case, the motivation was to take full advantage of the latest system fonts optimized for today’s high-resolution screens:

“Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web pages currently use this severely dated font stack to serve much younger content to much younger browsers and devices. As display quality improves, so too must our use of those displays. System fonts like Apple’s San Francisco and Microsoft’s Segoe aim to do just that, taking advantage of retina screens, dynamic kerning, additional font-weights, and improved readability. If operating systems can take advantage of these changes, so too can our CSS.” — Mark Otto (Otto 2018)

The CSS code used by GitHub was as follows:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI”, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

The rationale behind (in particular, why Roboto and Linux system fonts are dropped) is well-explained in Otto (2018).

By the way, it’s not clear to me why Helvetica, not “Helvetica Neue”, was chosen. Otto mentions “Helvetica Neue” to match the system font for Mac OS 10.10 in his article, but somehow the word “Neue” slips away.

Booking.com in 2017

Booking.com also followed suit. Their motivation was to improve user experience (they had been using Helvetica, Arial, sans-serif for its trouble-free nature):

“The work that Apple, Google & Microsoft have undertaken with San Francisco, Roboto & Segoe UI is impressive, and we felt that the legibility of these fonts could prove beneficial to our customers, particularly given our frequent rendering of type at small sizes where these fonts can offer the biggest improvements.” — Stuart Frisby (Frisby 2017)

Their implementation wasn’t trouble-free. They initially used the font shorthand property to specify the system font stack, only to discover the rendering in Times New Roman in Edge and Internet Explorer. The catch was that the string -apple-system was recognized as a vendor prefixed CSS property. So the font-family was assumed to be undefined in which case the default web font — Times New Roman — showed up… See Frisby (2017) for more detail.

The solution was to use the font-family property instead. So they settled with:

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;

The @font-face method

Around the same time(?), Jonathan Neal proposed using the @font-face to set the system font stack in his GitHub repo system-font-css. This way, you don’t need to repeat a long series of font names for several selectors.

For detail, see Graham (2017) (scroll down to the section “Method 2: System Font Stacks”).

system-ui

Again around the same time in 2017, the system-ui value was introduced for the font-family property, to replace -apple-system and BlinkMacSystemFont. See Chrome Platform Status (2017) for detail.

As of March 2020, the system-ui value is supported by the latest versions of all the major browsers (except for Firefox and Opera Mini) according to caniuse.com. It now accounts for over 90% of the total global page views.

[Updated on 15 Sep, 2020] There is a case against the use of system-ui, however. Xie (2017) reports that the Simplified Chinese versions of Windows 7 or later render the font not with Segoe UI but with the Latin glyphs from a Chinese font. He demonstrates how Bootstrap’s website is rendered with an old bitmap font:

Bootstrap’s website rendered on the Simplified Chinese version of Windows Server 2008 R2. Image source: Xie (2017)

In response, Boostrap has removed system-ui from their system font stack (source). Bordallo (2019) reports several major websites (GitHub, Instagram, LinkedIn, WordPress, etc.) don’t use system-ui in their system font stack. Twitter uses system-ui, though, maybe because it is blocked in China.

CSS Tricks’s sum-up

A year later, Coyer (2018) wrapped up the recent development with a summary of why the system font stack is beneficial:

1. Performance: no need to wait for downloading fonts
2. Integration with the rest of the OS
3. Taking advantage of the latest fonts designed specifically for today’s high-resolution screen user interface, rather than half-a-century old fonts like Helvetica and Arial.

The first reason is exactly what WordPress intended; the second for Medium; the third for GitHub and Booking.com.

So what the system font stack should be like in 2020?

Digesting all of the above, I’ve come to conclude with the following:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;

• Use the font-family property. Never get tempted to use the font shorthand property — the lesson learnt from Booking.com.
• system-ui takes care of the latest browsers and all the future system fonts. As described above, however, this may backfire for Chinese users (and possibly for other users whose Windows system font is not Segoe UI). If your website attracts the world-wide audience including those whose native language doesn’t use Latin glyphs, it is probably the best to drop system-ui as Bootstrap did.
• -apple-system for old versions of Safari on Mac OS and iOS.
• BlinkMacSystemFont for old versions of Chrome on Mac OS and iOS.
• "Segoe UI" for all browsers on Windows 7 or later.
• Roboto for Android and Chrome OS. GitHub omits Roboto because “ it caused issues in some distros of Linux” (Mark Otto in February 2018). The “issues” may have been resolved by today, or maybe not. If Linux users are non-negligible groups of users for your website, then you may want to omit Roboto as well.
• "Helvetica Neue" for old browsers on Mac OS 10.10 (Yosemite). Here I follow Medium and WordPress. This ignores Mac OS 10.9’s system font (Lucida Grande) as Mac OS has always shipped with Helvetica Neue for long. But it’s less likely that someone uses Mac OS 10.9, rather than Mac OS 10.10 or higher.
• Arial for very old Windows, perhaps still in operation in a remote corner of the world. (I remember Windows 95 was running when I visited a less developed country in the mid-2000s.)
• sans-serif for the last resort. But it seems to deal with Linux system fonts, actually, as long as the user hasn’t installed any of Segoe UI, Roboto, Helvetica Neue, and Arial. GitHub omits any of the Linux system fonts because, after the first attempt of the system font stack that includes Linux fonts, “Linux users were the most upset at the change given Linux system fonts seem to be rather large and clunky” (Mark Otto in February 2018).
• Optional: “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol” can be added at the end if your website features those lovely emoji, just like GitHub did for the emoji-loving programmers. Segoe UI Symbol is a fallback for Windows 7 and 8, since Segoe UI Emoji was released with Windows 10.

What others say

FontsArena (as of Feb 2020) proposes the following system font stack:

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

The difference from my proposal is the inclusion of Ubuntu, Oxygen, and Cantarell. These are all the Linux system fonts. But the rationale appears to be weak. They say,

“Many Linux users re-configure defaults to other fonts like Inter UI or others. So it’s almost impossible to accurately mention defaults, except for the Ubuntu distro which has its own font as default.” — FontsArena (2020).

Then why do they include Oxygen and Cantarell, but not other Linux system fonts?

Also, is it true that Ubuntu users cannot re-configure the default font? If so, Ubuntu should be added to my proposal.

What do you think? Post your comment below!

References

Brad Birdsall. “Project TNT: The next evolution of type on Medium.” Medium.design, Oct. 8, 2015.

Philip Bordallo. “Versions of Windows set with non-English languages don’t handle the system-ui keyword correctly.” GitHub repository for postcss-font-family-system-ui, Sep. 9, 2019.

Chris Coyer. “Shipping system fonts to GitHub.com.” CSS Tricks, Feb. 16, 2018.

Chrome Platform Status. “‘system-ui’ generic font family.” chromestatus.com, Jun. 26, 2017.

FontsArena. “Operating systems default sans-serif fonts.” fontsarena.com, Feb. 14, 2020.

Stuart Frisby. “Implementing system fonts on Booking.com — A lesson learned.” Booking.design, Mar. 29, 2017.

Sarah Gooding. “WordPress 4.6 to Drop Open Sans in the Admin in Favor of System Fonts.” WordPress Tavern, May 5, 2016.

Geoff Graham. “System Font Stack.” CSS Tricks, Sep. 19, 2017.

Mark Otto. “Shipping system fonts to GitHub.com.” markdotto.com, Feb. 7, 2018.

Marcine Wichary. “Using UI System Fonts In Web Design: A Quick Practical Guide.” Smashing Magazine, Nov. 13, 2015.

Joan Xie. “Never, ever use system-ui as the value of font-family.” Not Ready Yet, Apr. 1, 2017.