CTO and co-founder of Signal Sciences. Author and speaker on software engineering, devops, and security.

CSS System Font Stack Sans Serif v3

The latest system font stack is based on work from GitHub and Bootstrap v4

What is this?

This attempts to create a CSS Font Stack that matches what the client’s OS uses for text. The benefits are for both performance and design. Performance is improved since no web-font needs to be loaded or and there is no need for various hacks to prevent text flashing. Design is improved (or at least acceptable) since the font matches what is already being used across the computer, and the latest system fonts are very good compared to the sans-serif defaults.

This is an update to Version 2 and the original version. Both contain a number of additional resources on system font stacks.

What’s Changed?

Github.com has now over six months of using a system font stack. Bootstrap (the UI framework) with the v4 release has also switched to a native system font stacks. Given the scale and scope of these projects, their stacks are likely to work well across a diverse set of audiences.

Mark Otto who is behind both GitHub and Bootstrap wrote a nice summary of the rollout of GitHub System Fonts. In particular, system-ui does not work as expected:

Thankfully our users are always quick to notice problems and were quick to point out to our Support teams that the new system-ui alias caused issues in WebKit and Blink browsers with non-English languages.

So system-ui is out and BlinkMacSystemFont is back in.

GitHub 2018

Surprising they use regular Helvetica instead of Helvetica Neue, but at this point it doesn’t matter very much. The browser or OS is really ancient. Or it’s Android, which defaults to sans-serif which is actually Roboto, a fine choice.

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

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
The quick brown fox jumped over the lazy dog.
0123456789
11111.11
88888.88
0Oo il1I! Z2z 8$s5S😺‼✏⚠😭⤴⤵

Bootstrap V4.0.0

Unsurprisingly, Bootstrap’s stack is similar to what Github uses. This adds Roboto (why?) and swaps Helvetica for Helvetica Neue. Otherwise the same.

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

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
The quick brown fox jumped over the lazy dog.
0123456789
11111.11
88888.88
0Oo il1I! Z2z 8$s5S😺‼✏⚠😭⤴⤵

Conclusion

Either of these stacks will be fine and function identically for 95%+ of the population. It’s likely that the browser compatibility story involving system-ui, -apple-system and BlinkMacSystemFont will continue. Instead of manually tracking this, I’m switching over to bootstrap’s CSS (or at least using their font stacks) so I don’t have to worry about it.

webdev

© 2018 Nick Galbreath