The New System Font Stack?

A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser). These keywords can be useful, but they also have some drawbacks, the main one being that they only work with the shorthand font property. This means that we cannot use it in a list of font families with fallbacks or as a fallback itself.

Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. With this method, the fonts used by different systems are explicitly called themselves in the font-family property.

The Font Stack #

At the moment, there is not one universally-used sequence of fonts for this system font stack. However, the fonts used by different sites, although not exactly the same, overlap. These are the different fonts that have been used, and the devices (and browsers) they target -

Font	Device Targeted
-apple-system (San Francisco)	iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont (San Francisco)	macOS Chrome
Segoe UI	Windows
Roboto	Android, Chrome OS
Oxygen / Oxygen-Sans	KDE
Fira Sans	Firefox OS
Droid Sans	Older versions of Android
Ubuntu	Ubuntu
Cantarell	GNOME
Helvetica Neue	macOS versions < 10.11
Arial	Any
sans-serif	Any

The order in which the fonts are defined in the font-family property is very important. Because we are just passing font names to the property, the font that will be used is the first font available on the user's machine that matches that name. This means that we have to craft the stack in such a way that the first font available to the user is their system font, and not some font they have installed on their machine.

We do this by starting with the most specific fonts possible, and moving on to fonts that are less guaranteed to be tied to a specific device. For example, the first font defined is always -apple-system. This will certainly only be applied to users on an iOS or macOS device. Further down the line, we have Roboto. This is a font that very well could be installed on a Mac user's device, but since the font stack started with the more specific -apple-system, we don't have to worry about this conflict.

Examples #

Here is how this new system font stack is used across different websites. Starting with Wordpress 4.6 -

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

Medium -

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

Ghost -

body {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Oxygen,
               Ubuntu,
               Cantarell,
               "Fira Sans",
               "Droid Sans",
               "Helvetica Neue",
               sans-serif;
}

Finally, GitHub -

body {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Helvetica,
               Arial,
               sans-serif,
               "Apple Color Emoji",  /* Emojis*/
               "Segoe UI Emoji", /* Emojis*/
               "Segoe UI Symbol"; /* Emojis*/
}

Here is a comparison between the font stacks used by these sites -

Wordpress	Medium	Ghost	Github
-apple-system	-apple-system	-apple-system	-apple-system
BlinkMacSystemFont	BlinkMacSystemFont	BlinkMacSystemFont	BlinkMacSystemFont
“Segoe UI”	“Segoe UI”	“Segoe UI”	“Segoe UI”
Roboto	Roboto	Roboto	Roboto
Oxygen-Sans	Oxygen	Oxygen	Helvetica
Ubuntu	Ubuntu	Ubuntu	Arial
Cantarell	Cantarell	Cantarell	sans-serif
“Helvetica Neue”	“Open Sans”	“Fira Sans”
sans-serif	“Helvetica Neue”	“Droid Sans”
	sans-serif	“Helvetica Neue”
		sans-serif

Why use this Font Stack? #

There are a number of benefits to using system fonts in general, and to this particular method of using them.

Performance #

The number one reason for using system fonts at all is performance. Fonts are typically one of the largest/heaviest resources loaded on a website. If we can use a font already available on the user’s machine, we can completely eliminate the need to fetch this resource, making load times noticeably faster.

The Native Feel #

Another benefit of using system fonts is that it creates a feeling of the website being in a native application. This makes this method particularly useful for web applications, such as Wordpress or GitHub, rather than websites, as the former may be trying to emulate native applications.

Greater Control #

In comparison to using the built-in keywords with the font shorthand property, this method offers us a lot more control when specifying our fonts. We can define which font families we want to favour. Additionally, the other typography-related properties are not affected since this method only applies to the font-family property.

Websites Don't Need to Look the Same Everywhere #

Although the fact that different fonts will be shown for different users may seem like a drawback, in actual fact this doesn't matter. As mrmrs aptly put it -

Public service announcement:

Your website doesn't need to look the same everywhere. It just needs to work everywhere. — murmurs (@mrmrs_) September 13, 2016

What are the Drawbacks? #

Using this method also has some drawbacks to consider.

Naming Conflicts #

Besides -apple-system and BlinkMacSystemFont, all we are doing is calling the actual name of fonts. This means that, if a user has a font by that same name installed on their machine that isn't their system font, that may be used instead. This is what happened to Medium when they first rolled out this method last year.

Maintenance #

This list of fonts will have to be maintained and updated as the system fonts used by the various operating systems change. Hopefully, more operating systems will move towards Apple's method of having a generic name that will target the latest device font. But until then, a list will need to be periodically iterated on.

Using this Font Stack Today #

If you would like to use this font stack today, which fonts you use will be dependent on your users. Personally, I think the Wordpress method is the most suitable for the largest amount of users, and has been extensively tested by their team.

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

Whichever method you choose, make sure to test it across the different browsers (and versions) that are important to the particular site.