Ben Rabicoff

System Fonts Are Great

It’s a bold statement, right? I’m sure as I wrote the title I felt the collective cringe of every web designer and typeface lover in the universe. Myself included. As I was designing and building my new site, the inevitable decision of which fonts to use reared its ugly head. And not just which fonts – what headline font? What body font? Which weights?

As a designer, I realize the importance of typography when it comes to design, branding, readability, and accessibility. On the other hand, as a developer, I know implementing web fonts in a fashion that doesn’t affect visual or load performance ends up being a labyrinthy maze of additional JavaScript, font APIs, cookies, caching or hacks with polyfill. Oh, and not to mention additional requests and page weight.

Now, I know what you’re thinking. “I load multiple fonts/weights and my site loads super fast!” Does it? Does it load super fast on your desktop computer with a 100+ Megabit connection? Try loading it on a spotty 3G connection. I bet the results are slightly different. Not everyone always has an amazing connection or LTE, princess.

This is where issues like “Flash of Invisible Text” (FOIT) start presenting themselves and the ridiculous hacks methods like “Flash of Faux Text” (FOFT) are introduced.

Avenir NextiOS Safari, macOS Safari
-apple-system (San Francisco)iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont (San Francisco)macOS Chrome
Segoe UIWindows
RobotoAndroid, Chrome OS
Oxygen / Oxygen-SansKDE
Fira SansFirefox OS
Droid SansOlder versions of Android
Helvetica NeuemacOS versions < 10.11

So, until something like the CSS Font Rendering spec is widely adopted, I’ve decided to go with a font stack that consists purely of systems fonts. It offers the best performance and native feel to the end user. As of this moment, the stack I’m using and the systems targeted are listed in the table above.