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.
About the author
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
Still looking for an answer?
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Start building today
From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.
