CSS System Font Stack - Sans Serif Native - V2

Nick Galbreath

This is an update to the original native font stack article. It attempts to use the system 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:

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:

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😺

The Fonts

More font samplers available in the original article.

system-ui

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.