System fonts: a different approach to fonts on the web

One of the most debated subjects when it comes to website design is what type of font to use. Most people will go with the standard fonts like Arial, Helvetica or Times New Roman etc. This can be for many reasons; normally it is because they are so accessible and do not require much effort to implement. Plus they are a much better alternative to the dreaded childlike Comic Sans! However, in the past if you wished to have a more extravagant looking font type, you would have to load a separate font file, which has an impact on overall speed and performance.

This has always been a problem for web developers until the release of System Fonts in 2015. A System Font is the idea of creating a font which is compatible with the respective OS. Apple created the fonts ‘San Francisco’ for desktop and ‘San Francisco Compact’ as the mobile version, announcing these at WWDC 2015. Google also created their own System Font called ‘Roboto’, which was released in 2015. Microsoft already had a default System Font called ‘Segoe UI’, which was released in 2004 - they have continued to work on it since it was launched.

So what’s the point of System Fonts? Essentially these allow you to use the aforementioned fonts within your website without having to reference an external web font file, since they are already on the device. The point of this being that you can use a better looking, high-resolution text that doesn’t impact your website’s performance. Consequently, this will improve the legibility of text, making it easier for the user to read and provide a better overall experience of your website. Another good reason for using system fonts is the consistency between devices. Although it won’t look exactly the same across different operating systems, this will ensure every user gets a similar experience when using your website. A more subjective advantage of using these system fonts is that it gives the user an experience more like a native application rather than a website. It really depends on what the website’s purpose is, since emulating an application may be more suitable for websites like WordPress or Youtube, but may be an undesired effect for a standard company’s website.

In order to use these System Fonts you can put them within a font-stack, like so:

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto

This line, when put into a style tag e.g. body{…}, sets the font depending on what OS is currently being used on that device. This works because it will select a font from the front of the stack and check to see if the user’s machine has it installed. If you computer does not have the font then it’ll move onto the next font and repeat the process, this is done until a suitable font is found. For example, if the device is running Windows it will choose Segoe UI for the font and if it is running MacOS it will use San Francisco.

Overall, the new System Fonts are a blessing to many developers who wish to have a modern and professional looking website; without sacrificing performance.

We would love to hear from you

Please complete the form below or alternatively get in touch with us direct on 01376 563402 or email us at [email protected].

Please check you've filled in the form correctly

Thank you, we'll be in touch soon!