system-ui and friends

The CSS one-liner to use system fonts

We love our custom fonts, but they come with a cost that we don't often realize.

When we load a font over the internet, be it from our own website or (god forbid) Google Fonts, there is a small but perceptible "layout flash" for our visitors. This happens because the browser initially renders the content using the fallback font, then re-renders it after the custom font has been downloaded over the network.

Worse, this is something that happens only once (generally).

"Why is that worse?", you'd ask.

Well, it's worse because after the first load the font gets cached on the developer's machine, and then they become oblivious to the problem. They don't see the website the way a first-time visitor would see it. They feel confident about their code's performance, while the first-time visitor to the website walks away with an amateurish first impression as they see the website loading first, then everything shifting around and getting re-rendered again.

Now, this is not a niche problem, and there are many approaches that developers have used to improve the user experience. But these come with complexity.

The simplest solution is to let go of the custom font, and to just use the system font! (Thank you, Captain Obvious).

The issue with this is that there isn't a browser standard way to use the default, OS sans serif font. Or rather, there wasn't such a way previously.

Now there is, with font-family: system-ui, the hero of our post.

Cool. Are we done?

Well, as you'd have guessed, browser support for this is still in the works. So in the meanwhile, we need to use this longer version that provides fallbacks for most OSes.

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

Using the system font is not always a solution, but for where it is (for example, in the body of transactional HTML emails), it is often a better approach than loading a custom font.

Till next time, happy CSSing!

If you'd like to hear more about our battles with browsers, follow us on Twitter.

Or if you'd hang out with a bunch of engineers building an e2ee photo storage service, come say hello on Discord.