body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
First, it is important to know why font stacks are important in CSS.
Fonts tell the renderer (in this case the browser) how to display each character in the text. The problem comes in when fonts don't have every character (there are over 136000 characters currently in the Unicode standard). Google's Noto Sans aims to support every character, which is no small task.
If a font does not contain a glyph for the given character, the renderer needs to find a backup to render instead. The CSS standard allows multiple fonts to be specified in the font-family
property. If the first typeface does not contain the character, then the browser will fall back to the next one, and so on.
This means that the user will see the best font available, without needing to download any font externally. This website uses the system font stack for the main body text and headings. Try it out on different devices to see it in action.
system-ui
-apple-system
-apple-system
.
Why not just system
? Well, that's because Windows has its own font named system
in older versions of Windows.
There's an interesting post by the Medium design team on this as they were looking at updating their design.BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'
sans-serif
If no glyph was found, then the browser will display � instead.
There are two main advantages to using the system font stack:
If your brand uses typography as part of its identity, then the system font stack is probably not for you.
However, consider using the system font stack for main body text, and reserving your brand's typeface for headings. This still shows your brand, but still assists readability.