https://www.digitalocean.com/community/tutorials/css-system-font-stack
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.
STACK – TO SAVE THE WORLD
https://codepen.io/inbn/pen/NWbwMOg?editors=1100
https://formafantasma.com/website
Choosing better system fonts
Not all system fonts are bad; in fact, some are actually pretty good. Here I’ve listed my five favourite system fonts for body text, giving an example font stack with similar-looking fallbacks for Operating Systems that don’t support a specific font-family. I’ve tested compatibility on the five different devices I had to hand using this CodePen; different versions of each Operating System may differ from the platform information I’ve provided here.
Some operating systems may have non-standard behaviour. For example, newer android devices will swap Georgia or Palatino for Noto Serif; some Linux distributions include open-source copies of popular typefaces that behave in the same way. Remember: your website doesn’t need to look exactly the same on every browser and every device.
Georgia
Platforms: Windows, Mac, iOS
font-family: Georgia, Times, Times New Roman, serif;
Georgia is a serif typeface designed in 1993 specifically to look good on the low-resolution screens of the era. If you look closely, you’ll see that it eschews some of the finer detail seen in serif typefaces designed for print. Unlike other typefaces designed for the same purpose (e.g. Verdana), it still looks fresh on the HiDPI screens of today.
Charter
Platforms: Windows, Mac, iOS, Ubuntu
font-family: Charter, Bitstream Charter, serif;
This is my personal favourite. Designed in 1987 by Matthew Carter, who would later design Georgia for Microsoft, Charter was donated by Bitstream to the XConsortium under a permissive licence that allows copies to be freely downloaded and modified. Charter was designed for low-resolution 300dpi printing, so it also works well on screen.
Palatino
Platforms: Windows, Mac, iOS
font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
Named after the 16th-century calligrapher Giambattista Palatino, Palatino is influenced by type from the Italian Rennaisance. In an attempt to improve readability and legibility when printing on low-quality paper, it was given larger proportions than those designs on which it is based. This gives it the added benefit of also having good legibility on screen.
Hoefler Text
Platforms: Mac, iOS (but missing some advanced features)
font-family: Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif;
Hoefler Text is an old-style serif, designed in 1991 and included in every version of Apple’s osx (now MacOS) since version 7.5. It is, along with other typefaces including Garamond and Sabon, inspired by the work of 16th-century engravers such as Claude Garamond. What sets Hoefler Text apart from most other system fonts is its rich feature set: it supports old-style figures, small-caps, ligatures and even decorative swashes. If you think you can’t do quality typography with system fonts, try using Hoefler Text.
The ‘system font stack’
Platforms: All
San Francisco on MacOS 10.14
Segoe UI on Windows 10
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
/* Only supported on Chromium-based browsers and Safari */
font-family: system-ui;
The goal behind the system font stack is to match the typeface on your website with the operating system UI. Here we make good use of the cascading nature of font-family
declarations; the first font name recognised will be used, with others being ignored. For example, MacOS and iPhone will use -apple-system
(an alias for San Francisco); Windows users will get Segoe UI, and Android users, Roboto.
Are web fonts really that bad?
I’d be remiss if I didn’t point out that, although they’re often one of the main culprits, in most cases, web fonts aren’t the biggest source of bloat on a website. As an example, the Formafantasma site may not load any web fonts but it does load JavaScript: 221kB worth (gzipped), including four tracking libraries with a combined size of over 160kB.
Imagine how many web fonts you could get for 166kB
Byte-for-byte, JavaScript is more expensive for the browser to process than the equivalently sized web font[1]. When prioritising what to spend your performance budget on, remember that web fonts contribute to the beauty of your site. Tracking JavaScript does not.
When building my own site, I made a choice to prioritise typography over JavaScript. I’ve also become pretty attached to the fonts I’m using. But with new projects, I’ll be using system fonts first and only reaching for web fonts if I really think they add something. This gives me more room in my performance budget for other things including images, css, and maybe even some JavaScript.
Further reading
- Web fonts: when you need them, when you don’t by David Gilbertson
- A list of system fonts on iOS and MacOS
- System fonts on Butterick’s Practical Typography, 2nd Edition by Matthew Butterick
- Progressive Font Stacks (Twitter thread) by Tatiana Mac
DEFAULT SYSTEM FONT STACK
Defaulting to the system font of a particular operating system can boost performance because the browser doesn’t have to download any font files, it’s using one it already had. That’s true of any “web safe” font, though. The beauty of “system” fonts is that it matches what the current OS uses, so it can be a comfortable look.
What are those system fonts? At the time of this writing, it breaks down as follows:
OS | Version | System Font |
---|---|---|
Mac OS X | El Capitan | 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 |
Get to the snippet, already!
The reason for the preface is that it shows how deep you may need to go back to support system fonts. Additionally, it helps show that with new system versions, come new fonts, and thus the possibility of needing to update your font stack.
Method 1: System Fonts at the Element Level
Chrome and Safari have recently shipped “system-ui” which is a generic font family that can be used in place of “-apple-system” and “BlinkMacSystemFont” in the following examples. Hat tip to J.J. for the info.
One method for applying system fonts is by directly calling them on an element using the property.
GitHub uses this method on their site, applying system fonts on the body
element:
/* System Fonts as used by GitHub */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
Both Medium and the WordPress admin use a similar approach, with a slight variation, most notably support for Oxygen Sans (created for the GNU+Linux operating system) and Cantarell (created for the GNOME operating system). This snippet also drops support for certain types of emoji and symbols:
/* System Fonts as used by Medium and WordPress */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
Note: This method should only be used on the font-family
property instead of the font
shorthand. Booking.com published a thorough write-up on the warnings it generates due to the leading font appearing to be a vendor prefix.
Method 2: System Font Stacks
The limitation of the first method is that you have to call the full stack of fonts each time it’s used on an element and that can get cumbersome and bloat your code, depending on where and how it’s used.
.
The benefit here is that you can declare the fonts once and then that becomes the thing you can on the font-family
property instead of the long list of fonts each and every time.
/* Define the "system" font family */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
/* Now, let's apply it on an element */
body {
font-family: "system";
}
Note that Jonathan’s full example illustrates the capability to define variations of the system
font family that was defined in the snippet above to account for italics, bolding, and additional weights.
Related
- OS Specific Fonts in CSS – which includes a JavaScript method for testing the font in use.
- System Fonts in SVG
- Implementing system fonts on Booking.com — A lesson learned – Booking.com shares how they learned using a system font stack on the
font
shorthand does not work as expected.
Basic system font stacks
Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol ;
Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
FAQ
What's -apple-system
?
-apple-system and BlinkMacSystemFont are aliases for the default fonts on new macOS and iOS computers. In recent version, they alias to the new San Francisco font.
References
- The New System Font Stack
- GitHub System Fonts
- CSS System Font Stack – Monospace V1
- System Shock Mono
- Implementing system fonts on Booking.com
#RRGGBBAA
SIX-DIGIT-HEX + AA | CHEATER
FF – 100% | D9 – 85% | BF – 75% | A6 – 65% | 80 – 50% | 54 – 33% | 40 – 25% | 33 – 20% | 26 – 15% | 1A – 10% | 0D – 5%
Alpha % | Hex | Num |
---|---|---|
100% | FF | 255 |
99% | FC | 252 |
98% | FA | 250 |
97% | F7 | 247 |
96% | F5 | 245 |
95% | F2 | 242 |
94% | F0 | 240 |
93% | ED | 237 |
92% | EB | 235 |
91% | E8 | 232 |
90% | E6 | 230 |
89% | E3 | 227 |
88% | E0 | 224 |
87% | DE | 222 |
86% | DB | 219 |
85% | D9 | 217 |
84% | D6 | 214 |
83% | D4 | 212 |
82% | D1 | 209 |
81% | CF | 207 |
80% | CC | 204 |
79% | C9 | 201 |
78% | C7 | 199 |
77% | C4 | 196 |
76% | C2 | 194 |
75% | BF | 191 |
74% | BD | 189 |
73% | BA | 186 |
72% | B8 | 184 |
71% | B5 | 181 |
70% | B3 | 179 |
69% | B0 | 176 |
68% | AD | 173 |
67% | AB | 171 |
66% | A8 | 168 |
65% | A6 | 166 |
64% | A3 | 163 |
63% | A1 | 161 |
62% | 9E | 158 |
61% | 9C | 156 |
60% | 99 | 153 |
59% | 96 | 150 |
58% | 94 | 148 |
57% | 91 | 145 |
56% | 8F | 143 |
55% | 8C | 140 |
54% | 8A | 138 |
53% | 87 | 135 |
52% | 85 | 133 |
51% | 82 | 130 |
50% | 80 | 128 |
49% | 7D | 125 |
48% | 7A | 122 |
47% | 78 | 120 |
46% | 75 | 117 |
45% | 73 | 115 |
44% | 70 | 112 |
43% | 6E | 110 |
42% | 6B | 107 |
41% | 69 | 105 |
40% | 66 | 102 |
39% | 63 | 99 |
38% | 61 | 97 |
37% | 5E | 94 |
36% | 5C | 92 |
35% | 59 | 89 |
34% | 57 | 87 |
33% | 54 | 84 |
32% | 52 | 82 |
31% | 4F | 79 |
30% | 4D | 77 |
29% | 4A | 74 |
28% | 47 | 71 |
27% | 45 | 69 |
26% | 42 | 66 |
25% | 40 | 64 |
24% | 3D | 61 |
23% | 3B | 59 |
22% | 38 | 56 |
21% | 36 | 54 |
20% | 33 | 51 |
19% | 30 | 48 |
18% | 2E | 46 |
17% | 2B | 43 |
16% | 29 | 41 |
15% | 26 | 38 |
14% | 24 | 36 |
13% | 21 | 33 |
12% | 1F | 31 |
11% | 1C | 28 |
10% | 1A | 26 |
9% | 17 | 23 |
8% | 14 | 20 |
7% | 12 | 18 |
6% | 0F | 15 |
5% | 0D | 13 |
4% | 0A | 10 |
3% | 08 | 8 |
2% | 05 | 5 |
1% | 03 | 3 |
0% | 00 | 0 |