CSS System Font Stack Sans Serif V3

February 24, 2018

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.

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.