CSS System Font Stack - Sans Serif Native - V1

Nick Galbreath

The Native font stack 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.

The CSS

/* 1: Safari/Mac special, BlinkMac is the current
 *    Chrome method for using the mac 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😺

The Fonts

-apple-system

This only works on MacOS or iOS, 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 only works on MacOS or iOS, 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

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

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😺

References