Moving to a System Font Stack

The trends in webdesign are fairly short-lived. It’s a steady move between using different color palettes from pastel to neon colors and back. Currently there seems to be a trend to go back to that classic blue color (almost #00F) for links like Github changed to earlier to this year.

While I am not really fond of discussing colour schemes, something else appears to be happening that I welcome: the trend back to a system font stack. Native font stack means to use a font on websites which the user has already installed, skipping custom Webfonts. In the early years of the web this meant to choose a Font which was most likely to be available on all devices (like Verdana). The 201 7 6 edition of this tackles it in a more sophisticated manner: Trying to find the best font available for each particular platform.

If you look at the (current) CSS rules of my website you will see this:

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

Quite lengthy – and there are plenty blogpost going into detail on which order is the right one: bitsofcode, CSS Tricks, Smashing Magazine. So if you’re on a Windows machine, you will read this text in Segoe UI; on a Mac in San Francisco and on an Android device in Roboto.

From a design perspective this might resemble a nightmare – not knowing how stuff will look at the user end – yet it comes with a clear technical benefit: there is no more need to deliver the font families along side the content. No more FOUT, FOIT or FOFT (seeing text in the wrong font or not at all until it has been loaded). Whenever I am somewhere with non-perfect Internet connectivity this drives me crazy.

For me it replaces a set of Google Web Fonts which where hasty picked based on what I saw on other websites. And surely there are websites where the font plays a huge part in the experience (for me that’s Medium for example). But personally I would prefer to have more websites use the system font than ill-suited Webfonts.

And just to be sure: Once everybody has seen enough of the new system fonts, the design trend will go back to Webfonts again. Hopefully the current issues around them are resolved in a standardized way by then.