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://whistlr.info, 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:

• -apple-system for Safari and Firefox; plus BlinkMacSystemFont, the same for Chrome
• Segoe UI for Windows (originally included with Windows Vista, so it has great coverage)
• some "Safe Web Fonts" for very old browsers: Helvetica and Arial
• sans-serif
• and finally, support for emoji (this isn't really needed—I'll get to this later, but it could have a whole blogpost on its own).

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:

• specifying Segoe UI for everyone on Windows: this works for modern browsers as well as IE11 and legacy Edge
• using system-ui for most modern browsers on macOS, Android, iOS, Linux, Chrome OS, …
• using -apple-system for Firefox on macOS, and a tiny fraction of older Safari versions
• finally, falling back to sans-serif for all other cases, including ancient browsers

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 Crome—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 effected browsers or the platforms, or both. (Safari has no such issues on Mac.)

• In my experience with Emojityper and friends, to guarantee emoji support for all emoji, you need to specify actual fonts and can't rely on the system font.

• Sites like GitHub, which embrace the system font, have a secret: they replace all their emoji with images anyway. This is probably just to support even the newest emoji on all platforms—but it has the effect of 'fixing' this underlying issue with system-ui too.

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.

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:

• Use the short blurb of CSS included at the top of the article to use the system font.

• Personally, I find the best place for the system font is in simple pages—like this blog!—where there's no huge visual style or theme and you'd like to match the platform.

• Don't be afraid to use another font for contrast, even if you're including that font via CSS.

• And while it's out of scope of this post, read up on CSS properties like -webkit-font-smoothing and text-rendering to tweak your fonts until they're just right.