Now, I want you to promise me that you’re not going to scroll up.
Here’s that block of text again.
Is it easier to read than the first one? Harder to read? The same?
It’s easy, when given two chunks of text side by side, to flick your eyes between them and convince yourself eventually that one is easier to read than the other. But if that difference isn’t apparent without the direct comparison, then you probably have two typefaces that are both perfectly acceptable.
For the sake of satisfaction, here they are side by side, where you can quite clearly see that they’re different. One’s a web font, the other a system font.
I’m not going to tell you which font is which.
So back to the question from the flow chart: “Does the web font make your site easier to read?”. I would like to think, that in the cold light of day, any reasonable person would look at the above comparison and say no, neither of these is easier to read than the other.
(Now I think about it, this is actually a great test to see if you’re a reasonable person.)
Conclusion: if your site doesn’t have much text, a web font will make little difference to readability. But if your site is all about reading, this one’s probably not so easy. I think Medium’s font definitely makes the text more pleasant to read. And I think New Republic’s font makes no difference whatsoever. You need to find a way to objectively answer this question for your site — for your readers.
And if you decide that a web font makes no meaningful difference to readability then you’re a step closer to the ultimate goal — not having to faff about with web fonts.
Can you load the font without a FOUT?
If you’ve got this far down the flow chart, the web font in question isn’t tied to your brand, and it doesn’t improve readability. But that of course doesn’t mean you shouldn’t use it.
Unless you get a Flash Of Unstyled Text. Because that’s U-G-L-Y.
I’m sorry, New Republic, but to dive deeper I’m going to pick on you some more. It’s not because I’m mean, it’s because you’re sending 542 KB of fonts to my browser.
Here’s the article from the screenshots above loading.
The body copy of the article is visible in 1.45 seconds. That’s a really solid effort.
Seriously, 1.45 seconds over 3G beats the pants off the vast majority of the internet [placatory shoulder pat].
Then at 1.65 seconds the image loads. But from this point on it’s all downhill like a cheese rolling festival.
Nine seconds later, at 10.85, the web font is ready and the text flickers as the system font is swapped out for the web font. Yuck.
But it’s not done yet. Oh no. At 12.58 seconds it flickers again as the 700-weight font is loaded (which is used in the opening sentence of every article — so this shifts the rest of the copy), then the text flickers again at 12.7 when the 400 italics arrives.
All this on top of the fact that most humans couldn’t tell the difference between the two fonts anyway.
Oh and from what I can tell, the ‘Balto’ and ‘Lava’ fonts used here are not only 542 KB, they’re also about $2,000/year. Sheish.
That certainly clenches my purse strings.
It’s funny, I think a lot of people will look at the title of this blog post and assume it’s a rant from some developer that doesn’t see the value in fine typography. But it’s quite the opposite. The behaviour described above is an assault on the visual experience, and it could be avoided by using a system font that would look damn-near identical.