What is 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. Font implementation is still buggy on the Web.
Often 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
Yet finally I’ve found the best candidate.
The best free Web font (or webfont if you prefer that) for body text readability is not made by Google.
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.
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
- clean
- simple
- minimalist
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.
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 on Windows browsers 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
- Sofia
- Questrial
- Muli
They do not stay readable when you actually use them for body text in relatively small sizes.
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 designers I don’t think Serif fonts are suitable for body text on the Web.
Sure, they are great for print (think books, magazines or even posters sometimes).
The cleaner and thus easier to read a font, the better on the Web though!
Yet completely threadbare fonts like the above mentioned Sofia, Questrial or Muli have a disadvantage too.
Very simple minimalist fonts do not look appealing in large sizes on headlines either.
That’s why I use Monda for post headlines here! Let me explain:
It’s 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.
Thanks 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 or Freedom?
When it comes to Didact Gothic you have already three choices of hosting the Web font on third party servers.
Google Fonts is one of them but you know that I try not to rely on Google when I don’t have too.
In the past I have chosen to use the Font Library to host Didact Gothic.
It’s indeed also the place where I’ve found it initially. Sadly the Font Library has gone defunct by 2024 it seems.
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 Fonts site, Why?
Due to the overwhelming number of often poor quality fonts to select from I simply did not come as far.
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.
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.
So by now Google seems to be only options to host the font.
This might have privacy implications though!
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.
18px is perfect in my opinion and most experts agree. Not too big and not too small.
In this size I also achieve almost the best line length for readability.
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.
On this blog I use another minimalist font called Lexend by 2024.
It’s not as simple as Didact Gothic but very similar and also almost as readable.
* Creative Commons image by iamtheo
I’m really not that keen on it. Something about it is quite childish feeling and I’d tire of it very quickly. Then again I think readability is hard to quantify and font preference is subjective, so my opinion is moot :)
Thank you for the feedback Alice. Your impression is certainly not wrong as the font has been designed for kids learning to read. I have also noticed that women in general prefer rather fancy often serif-fonts, especially when you look at the font choices of blogs run by women. There is a fine line between simple and simplistic but I think Didact Gothic is still just simple.
Not very readable to me and then I saw Futura mentioned.
Futura may be one of the most illegible fonts in body copy because of its design approach. Looks to me Didactic Gothic, Muli and co. are falling in the same category.
When you say that the “a” looks different in italics for Proxima Nova, that is actually something which improves readability. That is not about coherence but legibility. It makes the font more readable.
If you take a look at Didactic Gothic, you will actually see that “a” and “o” are quite indistinguishable if you don’t pay attention. That hurts legibility.
John: Sad to hear. Thank you for the feedback in any case. I’m aware that the “a” and the “o” look similar with Didact Gothic, Futura etc. but that’s also one of the major problems with body text fonts in small sizes. The average “a” is usually so small that you can’t even display it properly. Thus the o-like a is better for small font sizes IMHO.
Proxima Nova is one of the few that have a readable “a” but I’ve found too many sites with strange issues using it. On the other hand Didact Gothic has a clearly distinguishable difference between I, l, | and 1 which even Helvetica lacks.
What body text font do you recommend?