An ode to system fonts
Apple, Google, and Microsoft buy and create extraordinary typefaces that are pre-installed on our devices. Instead of making users download custom fonts, make use of what they already have.
Disclaimer: I use the terms “font” and “typeface” interchangeably although I am aware there is a difference between the two.
Custom fonts increase brand recognition
There are plenty of good reasons to use custom fonts on a website: You are in control of what the typography is going to look like. You can keep it consistent with other channels such as print, TV commercials, or packaging design.
It will give you a boost in brand recognition.
Font downloads slow down your website
It comes with a cost, though. I am not talking about the literal cost of creating and buying fonts. I am talking about the increased loading times that your website will see. Some websites ask users to download three to four different typefaces, each about 150 kilobytes.
Particularly mobile users tend to struggle with slow internet connections. A user could be on a train going through a sparsely populated region or spending their vacation on a remote island. Concrete structures such as underground parking garages can be another reason for packet loss to occur.
A lost connection is a sale you did not make.
As an alternative, I suggest using system font stacks.
What are system font stacks?
A system font stack consists of a few lines of CSS listing all the font names that the browser needs to look for on a user’s device. The fonts themselves are not provided by the website. The stack contains the names of current and previous system fonts of major operating systems. For instance, Windows is currently using Segoe UI and macOS is using San Francisco.
As a result, the website gets displayed with the same typefaces that are used elsewhere in the operating system.
Tech companies spent a lot of money on system fonts—and it shows
It is not only the lack of a network request that makes system fonts superior to a lot of alternatives. They were created for well-off corporations that poured big amounts of money into them. System fonts are exceptionally well made and come in dozens of different styles. And they are free for you to use.
Benefit from a strong ecosystem and its loyal customers
Apps on Windows, Android, or Mac mostly use the fonts that come with the platform. I am more likely to use an app that feels native to the operating system rather than something that was built once and shipped to all platforms. I am a Mac user and I am not too fond of apps that fail to implement default shortcuts. If Command + ; does not take me to the settings, I am going to pass on your product.
Drawbacks of using system fonts
It is important to think carefully about the order in which fonts are listed. Older versions of macOS use Helvetica as their default font. As being one of the more popular typefaces, you can expect a lot of Windows users to have a version of it installed. It hence needs to be listed after Microsoft’s Segoe UI. By the same token, Android defaults to popular Google Fonts like Roboto and Noto. Expect other users to have these fonts, too.
Luckily, smart people have already figured out the ideal order (although there are minor differences between implementations). Simply copy the snippet below.
/* sans-serif */font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Roboto, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';/* Based on GitHub's stack with some additions */
See systemfontstack.com for serif and monospace examples.
You are not in control
If a user decides to install Segoe UI on a Linux machine, they will get a Windows look and feel. I recommend keeping system font stacks small to minimize potential side effects. In the example above, I have added Google’s Roboto and Noto to support Android devices. These fonts, however, are highly available and could be on any device. Consider ditching them—especially if you are offering a native Android app to your users.
Mix and match
Imagine you build a website like Medium. The looks of it are determined mostly by typography. You choose a nice serif typeface for paragraphs and a sans-serif font for titles. For your UI elements, you go with a system font stack. After all, you do not want to distract your users from reading the stories.
It‘s what Medium did when they launched a new design back in 2015.
We believe the UI should come secondary to the stories written on Medium, and we are pushing that further by using familiar fonts on each operating system.
– Brad on Medium’s 2015 re-design
Conclusion
A system font stack saves bandwidth and brings a familiar look to your users. Use it for UI elements that are not supposed to attract attention. As system fonts are already licensed to your users, you save money in the process.
Did I convince you to give system fonts a chance? Let me know in the comments!
