CSS System Font Stack Sans Serif v1

This is best for buttons and other UI elements on the page, but it also works for body text.

The CSS

/* 1: Safari/Mac special, BlinkMac is the current
 *    Chrome method for using the macOS system font
 * 2: Recent windows
 * 3: Older Macs,
 * 4: system default,
 */
font-family:
  /* 1 */ -apple-system, BlinkMacSystemFont,
  /* 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

• 2017-01-01 System Fonts Are Great General praise and slight variation of the github sans-serif font stack.
• 2016-09-20 The New System Font Stack? is the article that got me started.
• 2016-07-21 GitLab Issue 20102 has a discussion if gitlab should switch to system fonts. They decided against, but has useful notes on monospace system fonts.
• 2016-07-16 Native Fonts in 4.6 Wordpress switched to native fonts for their admin UI. This documents their font stack.
• 2015-11-12 Using System Fonts in Web Design: A Quick and Practical Guide
• 2015-10-21 System Shock Discussion by medium.com on their use of system fonts for their web UI (they use a custom web font for their article text).

The Fonts

If a font does not exist on your system, it will be rendered in a monospace font.

-apple-system

This is the macOS or iOS system font, when using Safari.

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😺‼✏⚠😭⤴⤵

BlinkMacSystemFont

This is the macOS or iOS system font, when using Chrome.

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😺‼✏⚠😭⤴⤵

Segoe UI

Segoe has been the system font for Windows since Vista, circa 2006.

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😺‼✏⚠😭⤴⤵

Helvetica Neue

Helvetica Neue is an optimization of Helvetica (Fonts.com has a nice write up on the differences). It’s likely to be 100% present on macOS and iOS, but also missing completely on Windows (which uses the clone Arial). There is no reason not to use Helvetica Neue instead of plain Helvetica.

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😺‼✏⚠😭⤴⤵

sans-serif (default)

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😺‼✏⚠😭⤴⤵