Home
Home About Archive

The System Font

tl;dr: as of August 2020, use the following snippet to get the system font on your webpages, on most platforms, with sane fallbacks.

body {
  font-family: Segoe UI,system-ui,-apple-system,sans-serif;
}

If you'd like to know more about how I got to this line, read on.

Background

There's been a recent, major development in web fonts. The "system" font family is now widely supported—it came on the scene, technically in about 2015, and was supported by most browsers in about 2017. And a few years later, in 2020, it's incredibly common to see this used.

What is the system font? If you use it, your webpage will display like the platform it's being read on. I'm not a designer, but I find it visually appealing and it helps simple webpages fit in well with their environment. If you're reading this article on https://samthor.au, you are in fact reading it in the system font! 🤯

There's some great articles out there that have comparison screenshots. This does not impact font loading—the point is these fonts are already on your user's machine, and are just a good replacement for classic "Safe Web Fonts", e.g., Arial and Times New Roman.

So: Chrome, Chromium-based browsers and Safari have shipped the system font as system-ui. You use it like this:

body {
  font-family: system-ui;  /* don't just do this: read on! */
}

But, like all things on the web, it's never as simple as that.

In Practice

Firefox is still yet to come to the party, instead only supporting the system font on Mac, and under a specific name. Additionally, it's been observed that—surprise surprise—on Windows, the system-ui font can in fact end up resolving to literally anything. I suspect the reason no-one noticed this 'issue' is that on every other platform, this system font is fixed, and designers tend not to use Windows. 🔥

In practice, this means most sites will end up with an ungodly mess of CSS like this:

body {
  /* from GitHub, August 2020 */
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}

…which serves mostly to avoid using system-ui, and instead has:

GitHub's code excludes a pretty default for Linux. Various distributions of Linux have their own fonts: Ubuntu has Ubuntu, and Red Hat has… unsurprisingly, Red Hat. I've included GitHub's code as it's pretty good, but… it could be simpler.

Just Tell Me What To Do

Sorry, I know this is why people read articles. My general advice for system font loading in August 2020 is to do this:

body {
  font-family: Segoe UI,system-ui,-apple-system,sans-serif;
}

This works basically by:

Hooray! 🎉

Some Notes

So there's always some notes. These are pretty obscure, and I don't think they should stop you using the snippet.

Sans-Serif Fallback

The fallback will apply to ancient browsers. It'll probably map to a font like Arial.

The fallback will also be used by Firefox on Linux and Android. Some guides actually suggest using a longer list of fonts—e.g., Ubuntu, Oxygen—to catch all possible Linux distributions. But, in my limited testing, the default sans-serif provided by Ubuntu and other distributions are quite appealing.

Emoji

On macOS and Linux—both Firefox and Chrome—the system font has some problems with old emoji. It doesn't matter if you use -apple-system or system-ui: the same problems occur. If this is a black and white emoji [✈️️], then congratulations, you're expericing the issue!

The airplane emoji above includes what's known as a VS16 character, indicating that it should be rendered in color. The airplane actually predates modern emoji, so without the VS16, it renders in black-and-white. However, the system font—in these cases—isn't respecting the VS16.

Confusingly, emoji like the telephone—which also require a VS16 character—work fine. Here's the phone with a VS16 (☎️), and without (☎). This implies to me that this is a bug in either the affected browsers or the platforms, or both. (Safari has no such issues on Mac.)

As an aside, if you include Segoe UI Emoji in the font list above, Windows will display text in emoji form even without the VS16 character. This is probably against Unicode's specification. Sites include these emoji fonts in attempt to prefer emoji presentation, but all platforms that render emoji will use their built-in emoji font support even without this. Again, if perfect emoji representation on desktop is really important to you, try specifying a more exact font list.

Segoe UI

Finally, a note about Segoe UI. Technically, as I list it first, it could be possible for it to win out—even on Mac or mobile where it doesn't fit—if a user has installed the font locally. However, it's against Microsoft's font policy to redistribute Segoe UI, so in practical terms it should never be available anywhere but on Windows.

Final Thoughts

Thanks for reading. Some thoughts, including on design: