Sean Blanton

Why Use System Fonts

When choosing fonts for web typography, it's easy for a designer to impulsively reach for Open Sans or Lato or Avenir or whatever the newest, hottest thing out there at the time is. I've done it. We all have. There's a compulsion for the fonts we use on the web to match the fonts we use in marketing material, particuarily print. After all - we do want to be on brand, right? But is that the most important thing typography should address?
But if you start to consider your performance budget, using webfonts starts to make less and less sense. Users hate slow websites

We need to consider what typography is for and what problem it aims to solve.

Let's pay attention to the words we don't often even bother to look up in the dictionary. Take user interfaces for example:


ˈin(t)ərˌfās - noun
1. a point where two systems, subjects, organizations, etc., meet and interact.
2. a device or program enabling a user to communicate with a computer.
From Google

When I design something, I aim to make every single design decision solve a problem.

Sometimes that problem is for the user, like increasing legibility or reducing cognitive load. Sometimes the problem is for the business, like increasing maintainability and scalability. So maybe that means adding constraints to the design requirements and increasing the efficiency of the system.

If typography in an interface exists to facilitate interaction, putting a webfont in a button or other parts of UI copy does little to advance this cause.

But what it does do is this: make your page heavier and harder to maintain. Good web typography should be functional and performant. Everything beyond that is nice to have and should be considered an optimization on an already validated design.

Using system fonts allows designers to focus more on solving problems and less on aesthetics.

They also allow your site to feel native to the platform in which a user is experiencing it. W3C is already considering this as a standard anyway
If you must include webfonts as a part of your UI, at least consider the alternatives that might help reduce your page to help reduce weight and load them in the most efficient way you can.

Further Reading

  • Bram Stein on loading fonts
  • Marcin Wichary on Using System UI Fonts in Web Design
  • Sites with System Fonts
  • Katie Kovalcin on Designing wtih a Performance Budget