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.
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:
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.
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;
}
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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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:
instead of:
Cheers!