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
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.
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.
system-ui is out and
BlinkMacSystemFont is back in.
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";
Unsurprisingly, Bootstrap’s stack is similar to what Github uses. This adds
Roboto (why?) and swaps
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";
Either of these stacks will be fine and function identically for 95%+ of the population. It’s likely that the browser compatibility story involving
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.