The Best Free Webfont for Readability



OK, I admit it,  it took me a long time to test and find out (years actually) but finally

I’ve found the best free webfont (or web font if you prefer that) for body text readability.

Surprisingly it’s a free font called Didact Gothic. It has been designed by Daniel Johnson. 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.”


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 it 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

but 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 font on third party servers. Google Webfonts is one of them but you know that I try not to rely on Google when I don’t have too. Adobe Edgefonts is another corporate site providing Didact Gothic for free.

I have chosen to use the Open Font Library to host Didact Gothic.

It’s indeed also the place where I’ve found it initially. My active reader Luana has tipped me off to it. There are not many choices there so that I quickly located the best ones while I overlooked Didact Gothic on Google and Adobe sites due to the overwhelming number of often poor quality fonts to select from.

Ideally you host your webfonts yourself on your own server or hosting account. That can get messy though. You need to upload the font in several formats for different browsers and make sure both the Stylesheet and JavaScript takes all of them into account.

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 Gothic18px

Did you notice? I already use the Didact Gothic webfont here for this post.

Although it works well in 14 to 16px already I decided to enhance the readability even more by adding another two pixels in size. 18px is perfect in my opinion. Not too big and not too small. In this size I also achieve almost the best line length for readability.

Do you like it? In case you’ve read that far I seems to have worked properly. I like it very much. I already use Didact Gothic for my upcoming ebook as well.

* Creative Commons image by iamtheo