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, the majority of people would look at the above comparison and say no, neither of these is easier to read than the other. And if anything, the text on the right — according to a chap in the comments — is significantly easier to read. And that’s not the web font.

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.

Loading a New Republic article. Chrome DevTools network panel, throttled to “Fast 3G”, filtered for fonts only.

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.