Dublin Library

The Publishing Project

Default font stack

  • 2 min. read

 

Using the default fonts for the operating system saves bandwidth (we don't have to download the font since it's already installed in the system) and improves performance (fewer assets to download) but it requires testing in all the platforms you're targetting.

These are not the browsers you're targetting, those may have their own issues when working with system fonts (particularly Chrome on Mac that needs a special declaration for the system font).

The browser looks for each successive font and will use the first font that it finds either on the system or defined in CSS.

The font-family declaration looks like this:

body {
  font-family: system-ui,
	-apple-system,
	BlinkMacSystemFont,
	'Segoe UI',
	Roboto,
	Oxygen-Sans,
	Ubuntu,
	Cantarell,
	'Helvetica Neue',
	Helvetica,
	Arial,
	sans-serif;
}

Each of the fonts is explained below:

  • system-ui is the new family defined in Fonts Module level 4 to represent the native OS font family
  • -apple-system is San Francisco, used on iOS and macOS (not Chrome, however)
  • BlinkMacSystemFont is San Francisco, used on Chrome for macOS
  • Segoe UI is used on Windows 10
  • Roboto is used on Android
  • Oxygen-Sans is used on GNU+Linux
  • Ubuntu is used on Linux
  • "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has spaces in the name)
  • Arial is a font widely supported by all operating systems
  • sans-serif is the fallback sans-serif font if none of the other fonts are supported

Caveats and warnings #

If you've downloaded any of the fonts (particularly Roboto and Ubuntu) in browsers that don't use them as default they may produce unexpected results.

If working with Oxygen Sans you need to pay special attention. Google Fonts offers a different font with the name Oxygen (both serif and sans) so, if you download it, you may get unexpected results.

System Fonts #

| OS | Version | System Font | | --* | --* | --* | | Mac OS X | El Capitan, Sierra and High Sierra | San Francisco | | Mac OS X | Yosemite | Helvetica Neue | | Mac OS X | Mavericks | Lucida Grande | | Windows | Vista | Segoe UI | | Windows | XP | Tahoma | | Windows | 3.1 to ME | Microsoft Sans Serif | | Android | Ice Cream Sandwich (4.0)+ | Roboto | | Android | Cupcake (1.5) to Honeycomb (3.2.6) | Droid Sans | | Ubuntu | All versions | Ubuntu |

Edit on Github