The system font stack: fast, native typography with zero downloads

Why use the fonts that are already there

Every web font is a download that has to finish before your text looks the way you designed it. Until then the browser either hides the text or shows a fallback and swaps later, which is the whole subject of font-display and of layout shift from web fonts. A system font stack sidesteps all of it. The fonts are on the device before the page is requested.

• No font requests. Nothing to download, preload, subset or cache.
• No flash and no swap. The first paint is the final paint, so fonts cannot cause a layout shift.
• Native feel. Text matches the menus, dialogs and apps around the browser window.
• No third party. No request goes to a font host, which also settles the privacy question covered in self-hosting Google Fonts.

The price is control. You do not choose one typeface. You choose a different one for each operating system, and you accept whatever each platform provides.

What system-ui resolves to on each platform

system-ui is a generic font family, like serif or monospace. The CSS Fonts specification defines it as the default user interface font of the platform the browser is running on. It is a keyword, so it is written without quotes.

That last caption matters. The specification says the font used depends on platform support, platform language, locale settings, user preferences and the content language. system-ui is a request for whatever the interface font is on this machine, not a promise of a particular typeface.

All current browsers support the keyword. According to Can I use, that means Chrome from version 56, Safari from 11 and Firefox from 92.

The long classic stack and the short modern one

Before system-ui was widely supported, the only way to get the same result was to name each platform’s font in turn. You will still find this stack on many sites and in many CSS frameworks.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

It works because of how a font stack is read: the browser takes the first family it can find on the device and ignores the rest. -apple-system and BlinkMacSystemFont are older, browser-specific ways of asking for San Francisco in Safari and in Chrome on macOS. Segoe UI catches Windows, Roboto catches Android, and Oxygen-Sans, Ubuntu and Cantarell catch common Linux desktops. Helvetica Neue and Arial are there for anything older, and sans-serif is the final safety net. The mechanics are explained in CSS font stacks and fallbacks.

Today the same intent fits on one line.

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

A middle road is to put system-ui first and keep a few named fonts after it for old browsers. There is one real difference between the approaches. A named font such as Roboto matches any device where a font with that name is installed, including a desktop computer where the user installed it themselves. system-ui always follows the operating system. You can assemble either version in the font stack builder.

ui-serif, ui-sans-serif, ui-monospace and ui-rounded

The same specification defines four more keywords for the other faces of a platform’s interface: ui-serif, ui-sans-serif, ui-monospace and ui-rounded. On Apple platforms they map to the serif, monospaced and rounded companions of San Francisco.

Support is the catch. According to Can I use, only Safari supports these keywords, from version 13.1 on macOS and 13.4 on iOS. Chrome, Edge and Firefox do not. The specification also says they are not expected to map to any font on platforms that have no suitable system font. An unsupported keyword is simply skipped, so they are safe to use as long as real fallbacks follow.

code,
pre {
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

.article {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}

.badge {
  font-family: ui-rounded, system-ui, sans-serif;
}

Never end a stack on a ui- keyword. Treat them as a small improvement for Apple devices, not as a cross-platform tool.

Known caveats of system-ui

system-ui has two documented problems, and both are stated on MDN.

• It is meant for interfaces, not for long reading. MDN notes that system-ui is intended to make UI elements look like native apps, not to typeset large paragraphs of text, and recommends sans-serif or another non-UI family for long passages.
• It follows the system language, not your page. On Windows set to a Chinese, Japanese or Korean locale, the interface font is a CJK font. MDN warns that the default Windows CJK font may render Latin text poorly, and that the lang attribute may not change the font that is shown. The specification gives matching examples, such as content marked as Japanese on a system set to a Chinese locale.

MDN adds a third, quieter point: some operating systems do not let users customize system-ui, while browsers generally do let them choose their sans-serif font. A reader who picked a font because it is easier for them to read gets that choice respected by sans-serif and not by system-ui.

A practical way around the locale problem is to name the Latin fonts before the keyword. A named family is matched by name, whatever the system language is.

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

Characters that the named font does not contain still fall through to the later entries one by one, so text in other scripts keeps rendering.

Emoji fonts at the end of the stack

Many system stacks end with a run of emoji font names after the generic keyword.

body {
  font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

Font fallback works per character. When the main font has no glyph for a character, the browser walks down the list until it finds a font that does. Browsers will find an emoji font without help, so these names are not required. Listing them makes the choice explicit: the platform’s color emoji font is used, rather than a monochrome symbol from some other font that happens to cover the same character.

It also means a single line of text can be drawn by two or three fonts. That is normal, and worth remembering when you inspect a page and the rendered font seems to change in the middle of a sentence.

When a system stack is the right call

The last row is the one that catches people. San Francisco, Segoe UI and Roboto have different proportions. A headline that fits on one line on a Mac can wrap on Windows. If you use a system stack, design with flexible containers and test on more than one platform. If you like the look of a particular system font and want it everywhere, the alternatives pages list free web fonts that come close.

How a system font site looks when you inspect it

Sites that use a system stack can be puzzling to inspect, because the font you see is not named anywhere in the CSS. Here is how to confirm it by hand.

1. In Chrome or Edge, right-click the text, choose Inspect and open the Computed tab. font-family shows the declared stack, with system-ui or a list that starts with -apple-system, BlinkMacSystemFont at the front.
2. Scroll to Rendered Fonts at the bottom of the tab. It names the font actually used and marks it as a local file instead of a network resource.
3. Open the Network panel, filter to Font and reload. If the list stays empty, the page downloads no fonts at all.

One thing to keep in mind: the result describes your machine. The same page shows Segoe UI to a Windows visitor and San Francisco to someone on a Mac, and DevTools can only report the one in front of you. The browser-by-browser steps are in how to identify fonts on a website.

Font Inspector reports the same facts in one click. Pick any text and the panel shows the full declared stack, the font actually rendered, and the source of each family. For a system stack the source reads as a system font installed on the device, instead of Google Fonts, Adobe Fonts or a self-hosted web font. Fonts on this page lists every family the page uses, and you can inspect any of them from there to see its source.