Resources on using a system UI font stack

One task of making the UX of my company website more consistent is to rethink which font to use. A system UI font stack is an alternative to web fonts.

This post includes

an introduction to system UI font stacks,
a collection of primary resources,
some thoughts regarding my situation,
and a list of complementary resources on web typography.

What is a system UI font stack?

The concept came up around 2015. It is based on the idea that a website uses the font native to the operating system. For example, current releases of MacOS use the San Fransisco font. Thus, almost every native MacOS window uses that font. Another example: Ubuntu's system font is Ubuntu.

Hence, when using a system UI font stack, your website would render with Ubuntu on Ubuntu, with San Fransisco on current MacOS devices, and so forth.

Why bother?

In the context of broad support for web fonts and the rise of variable fonts, the question is why bother?

Among others, these are two main advantages:

Performance increases because clients don't have to download font files (in case you're using web fonts of course).
Sites feel native as if they were part of the operating system.

Any disadvantages?

Yes, of course. It's a field of experimentation. There are efforts for making it a CSS standard, but we're not there yet.

To name a disadvantage: For some known system UI font stacks (GitHub, WordPress admin area), you can only rely on two font-weight values: 400 and 600.

The below collection of resources is the result of making myself familiar with that topic. I think it's worthwhile sharing, so you don't have to do the collecting yourself.

Resources on system UI font stacks

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

This article is from 2015 and describes how Medium used system UI fonts back then. It describes the reasoning behind each font in the presented stack. This article is very detailed and was one of the first pieces showing the idea.

Shipping system fonts to GitHub.com · @mdo

This article from early 2018 describes the change to system UI fonts at GitHub. The author describes how their initial system UI font stack changed over time and how their roll-out process looked like.

I just did a little test of GitHub that confirmed a concern of mine. At the time of writing this article, the GitHub site rendered with Liberation Sans in Firefox on my Ubuntu 18.04 system. The bad thing is, Ubuntu isn't shipping a thin variant of Liberation Sans.

As a consequence, if you need a thin font weight, you shouldn't copy GitHub's font stack blindly.

System Font Stack | CSS-Tricks

This short article from 2017 describes two techniques to set up a system UI font stack. One is using the font shorthand property; the other is using font-family. It shows Medium's and WordPress' system UI font stack at the time of writing.

Schriftwahl nach System // @cz+

This article in German from early 2018 lists some drawbacks of choosing the system UI font approach. For example, one challenge is to know which font weights are supported across the board. As mentioned above, GitHub renders Liberation Sans on Ubuntu, which lacks a thin variant.

Native Fonts in 4.6 – Make WordPress Core

This article from 2016 describes the rationale behind WordPress switching to a system UI font stack. It mentions the drawback I wondered about when I came to know the idea: with the font stack presented in the article, you can only reliably use font weights 400 and 600.

I'm in the midst of refactoring the CSS of my company website. Right now it uses a thin font-weight for headlines and other stuff. If I want to use a system UI font stack, I would need to ditch those thin headlines or load an additional web font. The second option would contradict the performance advantage you'd gain from solely relying on system fonts.

The New System Font Stack?

Linked from Schriftwahl nach System // @cz+, it's an article from 2016. It shows the font stacks of the admin area of WordPress, Medium, Ghost, and GitHub at the time the article was written. However, it also mentions naming conflicts and the need for ongoing maintenance as drawbacks.

Implementing system fonts on Booking.com — A lesson learned.

This article retrospectively looks at the introduction of system fonts to booking.com. It shows quite well that introducing a custom system UI font stack requires a lot of testing.

Websichere Schriften in Zeiten von Responsive Webdesign – Zeichenschatz

This article in German talks about web-safe fonts like Arial. Primarily due to the mobile web, there's no such thing as a web-safe font anymore. It mentions system UI fonts as an alternative.

Closing thoughts: should I use a system UI font stack for my website?

As mentioned earlier, my website uses a thin font weight for some user interface elements. A quick test on GitHub showed that I could not blindly copy the stack from a popular site like GitHub as I could no longer rely on a thin font weight available on all operating systems and browsers.

I have several options:

Ditch using a thin font weight. Well, that would mean a pretty significant change in my website's design and I'd like to avoid that.
Find a system UI font stack supporting a thin font-weight. I'd need to find a compatible stack from someone else, or I'd need to test it out on my own. The latter sounds scary.
Load web font in addition. I dislike that approach because it contradicts the performance gain of using system fonts.
Use a single web font. This would mean to ditch the idea of using a system UI font stack. The advantage would be that I can be pretty sure the font is rendered equally on all clients. It would increase the site's loading time of course, and there's the chance to cause FOUT.

Next steps

So here's what I'm probably going to do: First, I'll try to find a system UI font stack that fits my needs (i.e., consistent support for a thin font-weight), thereby benefiting from the research/knowledge of someone else. If I'm not able to find such a stack, I'll probably go the route of using a single web font.

Appendix: Complementary resources

Below is a list of complementary resources on that topic upon which I stumbled in my research.

Schriftwahl im Webdesign – Zeichenschatz

This article in German describes some general guidelines on how to choose a font for web projects. The author talks about the difference between display fonts and body text fonts, sans-serif and serif fonts, and some general considerations to consider when choosing a font. The article also includes links to some further resources on that topic.

CSS Font Stack – Alternative Schriften im Webdesign klug einsetzen – Zeichenschatz

This article in German is primarily about the importance of declaring fallback fonts in a font stack when using web fonts. It also mentions the Flash of Unstyled Text (FOUT) effect. Moreover, it mentions the option to rely on a system font stack.

Implementing a variable font with fallback web fonts – Zeichenschatz

This article in German describes a technique to use variable fonts and how to ensure a decent fallback for older browsers that do not support variable fonts.

As a side note, the idea of variable fonts is to calculate the various styles from one base font file. The advantage is that browsers no longer need to download separate font files per style.