The System Font
Tags: html, font
Published: 2020-08-07 00:33:40

---
title: The System Font
published: true
date: 2020-08-06 00:00:00 UTC
tags: html, font
canonical_url: https://whistlr.info/2020/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._

```css
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](https://whistlr.info), you are in fact reading it in the system font! 🤯

There's some [great](https://nathanfriend.io/2018/04/27/fantastic-fast-fonts-with-system-ui.html) [articles](https://medium.design/system-shock-6b1dc6d6596f) 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:

```css
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](https://caniuse.com/#feat=font-family-system-ui), 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](https://infinnie.github.io/blog/2017/systemui.html). 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:

```css
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](https://fonts.google.com/specimen/Ubuntu), and Red Hat has… unsurprisingly, [Red Hat](https://fonts.google.com/specimen/Red+Hat+Display). 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:

```css
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](https://en.wikipedia.org/wiki/Variation_Selectors_(Unicode_block)), 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](https://emojityper.com) 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](https://docs.microsoft.com/en-us/typography/fonts/font-faq#web) 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](https://davidwalsh.name/font-smoothing) on CSS properties like `-webkit-font-smoothing` and `text-rendering` to tweak your fonts until they're just right.