The Best Free Web Font for Readability
What is the best free Web font for readability? I mean not only headlines but also the actual body text! Yeah, that’s a major difference!
Most Web fonts look only great as headlines.
Body text is a different story. Most Web fonts look blurry and are hard to read when used in small sizes on large chunks of text.
The Best Free Web Font is a Dark Horse
OK, I admit it: it took me a long time to test and find out (years actually) but finally I’ve found the best candidate.
Surprisingly it’s a dark horse free font called Didact Gothic. It has been designed by Daniel Johnson in 2013. The designer himself explains why it works so well:
“Didact Gothic is a sans-serif font designed to present each letter in the form most often used in elementary classrooms. This makes it suitable for literacy efforts.”
A colleague called Alexei Vanyashin has revised Didact Gothic in 2017 and it’s even better ever since. I originally published this before he did it.
Now most of the remaining flaws I noticed are gone. The Web font is almost prefect. It’s
These words sound like synonyms but they aren’t really. A complex font can be clean as well. A simple font may be already simple but still not minimalist because it has redundant features. You can test it here.
Readability for Small Type on the Web
You may wonder why I have chosen such an obscure font. I bet you haven’t heard of it yet even in case you’re a designer.
Some people recommend Didact Gothic as a Century Gothic alternative for the Web so it’s not completely far off.
Also you may wonder why I didn’t use a classic font like Futura instead. Unfortunately the latter doesn’t get smoothed when it comes to small font sizes.
That would be no problem by itself but the aesthetics and readability is suffering too when Futura doesn’t get anti-aliased (as font smoothing is called by the experts).
I’ve tried similar and more popular free fonts first, namely Questrial and Muli
Both of them and many others do not stay readable when you actually use them for body text in relatively small sizes around 14px.
Small type simply does not display well then. It turns fuzzy and has a clumsy or even dirty look. You can use them all right for headlines but to be honest they are too simplistic for those.
I Shot the Serif
Unlike many web designers I don’t think Serif fonts are suitable for body text on the Web (they are great for print) but completely threadbare fonts like Questrial or Muli do not look appealing in large sizes on headlines either.
I use Monda for headlines here, a good compromise between a stylish modern font and a clean sans serif one.
I have been looking for a font to improve body text readability online now that formerly web-safe fonts like Arial/Helvetica do not work anymore due to the sloppy default font-smoothing by Microsoft.
Sadly the so called anti-aliasing renders most serif-fonts you would use in print unintelligible.
Paying for Proxima Nova Alt?
Finally I almost settled with an affordable paid web font alternative, namely Proxima Nova Alt but I wasn’t completely satisfied with that one.
I’ve written about the issues that I have witnessed on sites with Proxima Nova in general. Also the Alt version is inconsistent, the “a” completely different when you use italics. That’s why I decided to look further.
I’ve found some really expensive web fonts that truly rocked
but I won’t spend several hundreds of dollars just for the font of my site. I’m not a corporation letting hundreds of people toil for me.
I earn my money from my own work. I always check out free options before I pay for something.
In many cases freely available resources are even better than proprietary ones because you are not dependent on one vendor.
When it comes to typography that’s rather the exception but still not impossible.
Google, Adobe or Freedom?
When it comes to Didact Gothic you have already three choices of hosting the Web font on third party servers.
I have chosen to use the Font Library to host Didact Gothic.
It’s indeed also the place where I’ve found it initially. My reader Luana has tipped me off to it. There are not many choices there so that I quickly located the best ones.
In contrast I overlooked Didact Gothic on the Google and Adobe sites due to the overwhelming number of often poor quality fonts to select from.
Sadly I noticed the the Font Library still uses the flawed 2013 while Google already offers the revised version of 2017.
Ideally you host your webfonts yourself on your own server or hosting account. That can get messy though.
For large scale business site I’d advise you to do it yourself despite that. Relying on third parties for crucial site elements can backfire quickly when the fonts load slowly or do not load at all in the worst case.
Didact Gothic 18px
Although it works well in 14 to 16px already I decided to enhance the readability even more by adding another two pixels in size.
In general as screen sizes and resolutions grow and most laptops by now use FULL HD (1920*1080) you are rather advised to “enlarge your fonts”.
Do you like it? In case you’ve read that far I seems to have worked properly. I like it very much. I already used Didact Gothic for my ebook as well.
* Creative Commons image by iamtheo