Skip to content

Instantly share code, notes, and snippets.

@vinaypuppal

vinaypuppal/fonts.css

Created August 2, 2017 10:48
Show Gist options
  • Save vinaypuppal/c934f7b0ff2c194ba7ab3463d7d4c8e8 to your computer and use it in GitHub Desktop.
Save vinaypuppal/c934f7b0ff2c194ba7ab3463d7d4c8e8 to your computer and use it in GitHub Desktop.
Download ZIP
UI System fonts in web
Raw
fonts.css
body {
font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;
}
@vinaypuppal
Copy link
Author

vinaypuppal commented Aug 2, 2017 •
edited
Loading

The first grouping is CSS properties that map to the system’s UI font. That covers a lot of ground, and there is no chance that these fonts will be mistaken for something else:

  • -apple-system targets San Francisco in Safari on Mac OS X and iOS, and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  • BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.

The second grouping is for known system UI fonts:

  • Segoe UI targets Windows and Windows Phone.
  • Roboto targets Android and newer Chrome OS’. It is deliberately listed after Segoe UI so that if you’re an Android developer on -
  • Windows and have Roboto installed, Segoe UI will be used instead.
  • Oxygen targets KDE, Ubuntu targets… well, you can guess, and Cantarell targets GNOME. This is beginning to feel futile because some Linux distributions have many of these fonts.
  • Fira Sans targets Firefox OS.
  • Droid Sans targets older versions of Android.
  • Note that we don’t specify San Francisco by name. On both iOS and Mac OS X, San Francisco isn’t obviously accessible, but rather exists as a “hidden” font.
  • We also don’t specify San Francisco using .SFNSText-Regular, the internal PostScript name for San Francisco on Mac OS X. It only works in Chrome and is less versatile than BlinkMacSystemFont.

The third grouping is our fallback fonts:

  • Helvetica Neue targets pre-El Capitan versions of Mac OS X. It is listed close to the end because it’s a popular font on other non-El Capitan computers.
  • sans-serif is the default sans-serif fallback font.

Source: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment