No web fonts

System fonts are an intriguing and fast alternative to web typography. And they are a great option if your product is widespread in places where 2g is more common than 3g.

I got interested in avoiding web fonts when I was developing the first version of the web application of theShukran. theShukran is a social network made for the Muslim community. It is widespread in places such as Pakistan and Egypt where it is common to find low network areas. Before focusing on mobile only, we had also a web app that had to be really super fast. I made a list of all the things I could optimize. And one point was 'try to avoid web fonts'. It is true you can lazy load your web fonts but if you are in a situation where every kilobyte is important, you need to think differently. The experiment gave very good results and it is time to explore how to use those system fonts. It is super simple and it will take less than 10 seconds.

The system fonts

When it comes to design, Apple leads with the best typeface: San Francisco. Before OS X El Capitan, Apple used Helvetica Neue and Lucida Grande. Helvetica is a love/hate typeface. It is not great for text or user interface but made the history of Design. Lucida Grande was designed primarily as a screen typeface and it was a decent option. Microsoft offers Segoe UI. Android features Roboto.

These typefaces are not as beautiful and magic as the Frutiger one. But take a look at the quality of the web fonts you can download at Google Fonts. System fonts are way better. And the web browser does not have to download any font files.

Use the system fonts in CSS

There are different approaches to making your website use the system fonts for its typography. Every approach has its drawbacks but I follow the way Github and Medium enable the system fonts. It's very simple and it requires only a simple list. The only drawback of this approach is that you have to keep the list updated. If OS X introduces a new font, you need to add it to the list.

Github.com CSS snippet

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  


Medium.com CSS snippet

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;  

Medium supports more typefaces commonly used in GNU/Linux. But the difference is really minimal.

Just give system fonts a try. Trust me, you won't regret it.

Have a great day and keep coding,
Nicola