CSS System Font Stack Sans Serif v2

This is an update to the original native font stack article. It attempts to use the sans serif font used by operating system for user interfaces. This is best for buttons and other UI elements on the page, but it also works for body text.

What's Changed?

The W3C CSS Fonts 4 draft now includes a built-in font system-ui. It should render using the native sans-serif font. It's implemented in:

• Chrome since 2017-01, version 56
• Safari, since 2017-02 but not clear which version

As of 2017-11, neither Firefox or Microsoft Edge supports this, but I suspect in time they will.

Due this change, I'm updating the original font stack as follows:

• Adding system-ui to first position
• Removing the chrome-specific hack BlinkMacSystemFont since it's superseded by system-ui and chrome auto-updates
• Keeping the Safari-specific -apple-system font for now.

The CSS

/* 0: CSS Font V4 standard
/* 1: Safari special
 * 2: Recent windows
 * 3: Older Macs,
 * 4: system default,
 */
font-family:
  /* 0 */ system-ui,
  /* 1 */ -apple-system,
  /* 2 */ "Segoe UI",
  /* 3 */ Helvetica Neue,
  /* 4 */ sans-serif;

This is what it looks like on your browser:

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
The quick brown fox jumped over the lazy dog.
0123456789
11111.11
88888.88
0Oo il1I! Z2z 8$s5S😺‼✏⚠😭⤴⤵

References

More reference available in the original article

2017-09-19 System Font Stack by Geoff Graham is a nice write up on OS default fonts and how to use them in CSS.