Should I use system fonts or web fonts?
Web fonts were an amazing step forward towards creating a more beautifully designed web. No longer were we restrained by the handful of choices that “Web Safe” fonts provided us, we now had the ability to bring just about any typeface to the web in the knowledge that everyone would see the same thing*.
* Websites do not need to look the same in every browser.
A bit of background
When the first web page was published back in 1996 it was a fairly straightforward affair.
Okay, so I’m ignoring the enormous technical effort that went into creating the network and the rendering engine to produce the page in its most simplest form, and ignoring all of the painstaking research to set up the fundamental structure and ruleset of the most widely used language in the world – HTML.
Those, fairly major, things aside the web page that was produced was made up from a couple of paragraphs with black text on a white background with some blue underlined links. The didn’t need to worry about line lengths because the screens were all so small there was no risk of a line running on for too long.
The didn’t need to worry about line-height, padding, margins, typographical hierarchy or anything else because they just created the frigging internet OMG haven’t they done enough!
The other reason they didn’t have to worry about all of those things was simply because CSS wasn’t a thing at that stage and there was no real control over the visual layout other than the semantic markup you could give the content (h1-h6, p, a, i, b tags).
The arrival of CSS
When CSS arrived it was kind of a big thing. It provided designers a way to make the content that was being produced on the web look a lot better, and therefore the content became more readable and easier to digest.
At this point CSS gave designers (or Web Masters as the one person who did everything for your website was called) the ability to control the font-face that was chosen for the site, but the choices were limited.
The original set of Web Safe fonts that you could choose from included:
Arial
Helvetica
Times
Times New Roman
Palatino
Garamond
Bookman
Avant Garde
Courier
Courier New
There were a few others, but these were not as strongly supported across all operating systems.
Verdana±
Georgia±
Comic Sans MS±
Trebuchet MS±
Arial Black±
Impact±
± Worked on Mac/Windows but not on Linux.
Some of the fonts were operating system specific and would only work on either Windows or Macintosh, so in cases like this you could include a list of fonts that you would like to use and the Operating System would use the first available font it recognised/had available.
This was okay for a while, but as the web began to take a real foothold we began to see former graphic artists and print designers move into the fields of web design. We also had brands that wanted their print campaigns to extend onto their Website so that the visual journey and brand recognition was there.
These new people and the brand visual experience were demanding the ability to take the hundreds or thousands of typefaces available to the print world and bring them across to the Web.
It wasn’t just a nice to have any more, it was a necessity….. and you know what they say about mothers, inventions and necessities.
Along with the arrival of @font-face (check when this came in and the timelines) and thanks to products like FontSquirrel, FontDeck, TypeKit, we began to introduce web fonts to our sites.
And the world wide web sighed a sigh of relief — for now.
With great power comes great responsibility.
With great power comes great responsibility.
Now with all the fonts at our fingertips web designers rejoiced and decided to add several font options along with multiple weights to our all new designs and stretched their new found creative freedom.
As a result we began to see the overall download size of font files increase from zero (before web fonts) to between 500kB and 1.5mB.
It was like when you first had the ability to use border-radius and all of a sudden everything had border radius.
It was like when you first had the ability to include a box-shadow and suddenly everything had a drop shadow on it.
It was like when you first had the ability to animate on hover in CSS and suddenly everything had an animation on it.
You get the picture.
As an industry we found ourselves in a situation where we had forgotten about the fonts that have been around the longest – Times, Georgia, Arial — Fonts that are used in billions of texts/documents/books due to their readability and quality. We replaced them with something different — most often for the reason that it was something different… because we could.
This lasted for a little while and the process we went through can be expected whenever a new feature becomes available after years and years of asking for it — you’ve been wanting it for so long that you just use it on everything you see. Over time, however, this overuse of a new feature begins to curtail as we realise that out of the thousands of new Web Fonts at our fingertips there were only a handful that we really liked, that were of great quality, and that paired really nicely together.
All of a sudden the ability to be different, to stand out from the crowd with this new range of web fonts ended with most sites looking very similar. This had a lot to do with the number of sites that were being created with templated tools that provided a selection of font pairings which looked amazing but ended up being quite consistent.
I’d like to point out at this point that if you’re one of the talented designers out there I know that you pick your typefaces at the beginning of the design process and it fits with the design aesthetic that you’re going for, the previous paragraphs are targeted at me and my approach to applying type.
Going back to basics
In October of 2017 I was fortunate to be asked to present the future of Responsive Design in 2018 at the Adobe Max Creativity Conference in Las Vegas. The talk was broken into four different sections and the second section was all about performance.
In that section I talked about being smart when deciding what is going to be added to the site, tackling the low hanging fruit like un-optimised images and working your way through to harder problems. Part of this process was to exam the fonts that were being used on the site and whether or not there were too many weights being loaded compared with what was being used, and to ask the question whether or not you needed to be loading fonts at all or could you fall back to system fonts for the same effect.
I then go through the code that you can apply to your site to give you the best possible font for your particular operating system… the one that was designed to be the most legible and easiest to consume content for that particular OS (and sometimes device as well).
body {
font-family: -apple-system,
BlinkMacSystemFont,
“Segoe UI”,
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
“Helvetica Neue”,
sans-serif;
}
I presented this talk to a few work colleagues before heading to the conference and one of which was a designer. She asked a great question:
If this is the right way to go, then how come your Responsive Design site uses web fonts?
Excellent question.
If you visited this RWD site two weeks ago and sent me an email about the fact that the site was only rendering I’d say “thank you” and try to debug and fix the issue. This week, however, I can say “Oh yes. Did you enjoy the faster loading experience and lower bandwidth cost?”
I put my money where my fonts were and removed the custom web fonts and replaced them with system fonts using the below CSS:
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Times, Times New Roman, serif;
font-weight: 600;
}
code, pre {
font-family: courier new, Courier, monospace;
}
Here I’m using all of the system fonts for most of the heavy lifting of the content. For the headings I’m going a more curved style with Georgia as a preference, but then falling back to Times. Finally for the code examples I’m using Courier New as the preferance and falling back to Courier and then Monospace (whatever the system can provide).
There’s a great page on Practical Typography about System Fonts if you want to learn more about the best ones to use, and that whole site is just a tremendous read.
Does removing web fonts make your site faster?
Yes.
In this case I think it was worth it. The designer who did a wonderful job on the site is certain to disagree, but for me I want the site to load and the content to be readable as quickly as possible and that can only be done with using System Fonts.
Dave Rupert recently redesigned his blog and went back from System Fonts to including some custom web fonts and his site looks gorgeous and still loads super fast.
At the end of the day it’s down to you. Will the web font make your site more inline with your brand, will it stand out from the crowd, but mostly — will the content be the easiest to consume using the font choices you’ve make.
What are your thoughts? Do you think the design is more important than the performance? Have you chosen the typography on your site based on the easiest way to consume your content?
