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?
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.
|Avenir Next||iOS Safari, macOS Safari|
|-apple-system (San Francisco)||iOS Safari, macOS Safari, macOS Firefox|
|BlinkMacSystemFont (San Francisco)||macOS Chrome|
|Roboto||Android, Chrome OS|
|Oxygen / Oxygen-Sans||KDE|
|Fira Sans||Firefox OS|
|Droid Sans||Older versions of Android|
|Helvetica Neue||macOS 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.