Tutorial

CSS System Font Stack Reference

Published on March 29, 2020
author

Alligator.io

CSS System Font Stack Reference

Fonts on a website can easily become a large part of the total bundle size that browsers have to download before being able to display a page in its final look and form. Plus, we need to worry about all kinds of things like the infamous Flash of Unstyled Text (FOUT). Arguably, though, part of this whole issue has been resolved, thanks to the font-display property.

Added to that is the fact that the text found on a website is almost always the most important part, so we don’t want text that doesn’t look right or that’s hard to read. What’s a savvy web designer to do to satisfy both performance as well as look and feel?

One solution is to actually resort to using a font that’s already installed on the device of the user. In the past that was not a very elegant solution because some popular systems didn’t come with beautiful font faces baked-in. Things are different now however, and every major operating systems ships with a sans serif system font that looks and reads nice.

So the trick just becomes to provide all those default system font names as the value for the font-family property for the element(s) that should use a system font. The browser will then use the first one that it can find on the current system. Keep in mind that this will also mean that the text will look different based on what system it is being read on. That’s not necessarily a bad thing however, as the text will feel native to the OS its being read on.

Sans Serif System Font Stack

Without further ado, here’s the version of the system font stack used on this very website:

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

That stack is the same one used with WordPress, and has been working pretty well so far for content on Alligator.io. On this site, the titles use the Recursive variable font for a little bit more panache, but the content itself uses the system font.

Here’s a breakdown of those fonts/keywords, if you’re curious:

  • -apple-system and BlinkMacSystemFont: Keywords used to refer to the system font on Apple devices, usually San Francisco or Helvetica Neue, depending on the version of the operating system. On some newer browsers the keyword system-ui can now be used to do the job of those two keywords.
  • Segoe UI: Used on Windows systems.
  • Roboto: System font for Android devices.
  • Oxygen-Sans: Linux systems using KDE.
  • Ubuntu: Ubuntu Linux
  • Cantarell: Linux systems using Gnome (other than Ubuntu).
  • Helvetica Neue: A common fallback font available on many systems (especially Apple systems), just in case the previous ones all failed.
  • sans-serif: If all else fails, fallback to the default browser sans-serif font. Often not the most pleasing result, hence why we don’t just use font-family: sans-serif.

As with most things in life, there are many different flavors of the system font stack and each ones varies a little bit. For example, here’s the stack that GitHub uses.

Monospace System Font Stack

While there’s no system font stack for a serif-based font, there’s one for a monospace font, which can be really useful for code snippets and such. Here’s the one used by Bootstrap v4 (with GitHub using a very similar version as well):

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;
}

System Fonts Using @font-face

In case you’re getting tired of repeating the same string of multiple font names at multiple places in your CSS, there’s a trick documented in this CSS-Tricks article to allow making use of a @font-face at-rule to define a single name that refers to the whole stack.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alligator.io

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

This article provides a comprehensive and insightful overview of using system fonts in web design, emphasizing both performance and aesthetics. The author elegantly addresses the challenges of font loading and the importance of text readability, offering a practical solution that leverages the default system fonts available on various operating systems.

By utilizing a carefully crafted font stack, web designers can achieve a consistent and visually pleasing text display across different devices and platforms. The inclusion of specific system fonts for Apple, Windows, Android, and Linux systems, along with a fallback to common sans-serif fonts, ensures a graceful degradation in case the preferred fonts are not available.

The article’s clear explanation of each font keyword and its corresponding system makes it easy for web developers to understand and implement the suggested font stack in their projects. Additionally, the mention of using @font-face for simplifying font naming adds a helpful tip for optimizing CSS.

Overall, this article is a valuable resource for web designers and developers seeking a balance between performance optimization and visual appeal in typography.

Thank you very much for posting this information, it explains the concept very clearly. What makes me think is that whenever this topic comes up, the “System Font Stack” is predominantly “Sans-Serif” based. Is there a particular reason for this decision? I mean, are designers aware that they are reverse-branding the site (looks like my “iPhone”, my “Windows 10”, etc. and not like “example.com”, “example.net”, etc.)?

Apart from this, small mistakes in the entry order can mess up the appearance of the site, e.g:

body {
	font-family: ... ,
	Arial,
	Ubuntu,
	...;
} /* Takes Liberation Serif instead of Ubuntu */ 

instead of:

body {
	font-family: ... ,
	Ubuntu,
	Arial,
	...;
} /* Takes Ubuntu on Ubuntu */

Cheers!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more