I have written a couple of posts on the topic of custom web fonts and potentially reducing font weights with variable fonts. But I have never really mentioned the modern system font stack – the one I use on this website.
The delights of using system fonts
Using a system font instead of a custom webfont on your website has many possible benefits. Your site is faster, and you reduce network requests as well as eliminating FOUT (Flash Of Unstyled Text). You also benefit from a large set of Unicode characters and a broad range of supported languages, which you might not get with a custom webfont.
Modern devices and their operating systems come with quite the array of preinstalled fonts. This extensive list of system fonts is now available on iOS and Mac OS for example. An updated list of fonts across a number of different systems can be viewed in this wiki.
This is why I chose to use the system font stack.
System font stacks
Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, 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;
Monospace
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, 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;
Monospace
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
I’m not saying that system fonts are perfect for every job, though, they are now a much more aesthetically pleasing, easy-to-read set of fonts that can help to reduce the weight of a website. They can pair nicely with one custom webfont. For example, using one weight of a webfont for titles, but using system fonts for the remaining text. This way you still allow for a level of brand fonts to be used, whilst reducing the weight and load time for the remaining page elements.
I’d love to see how you’re using system fonts in your work. If you have examples, please share them on Twitter and tag @sustainabledevs
References
https://systemfontstack.com/
https://bitsofco.de/
https://developer.apple.com/
https://wiki.mobileread.com/