*
What is the best free Web font for readability?
I don’t refer to headlines only! I mean the actual body text!
Yeah, that’s a major difference. What is it?
Most Web fonts look only great as headlines.
Yes, body text is a different story. Why?
Often Web fonts look blurry and are hard to read when used in small sizes on large chunks of text.
What’s the best free Web font? It’s a dark horse!
What’s the best free (as in beer) Web font actually then?
You probably have never heard of it! Me neither!
It took me a long time to test and find out (years actually)!
Yet finally I’ve found the best candidate a few years ago.
The best free Web font (or webfont if you prefer that) for body text readability is not popular yet.
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.”
Let’s see how that looks written in Didact Gothic itself. See image below!
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 perfect. 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!
Thus I almost exclusively use so-called sans-serif fonts for online text.
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 used Monda for post headlines on my blogs for years 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!
Yet 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.
Yet 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?
With Didact Gothic you have already three choices of hosting the Web font.
You can host it yourself or on third party servers. Let’s begin with the easiest way.
1. Google Fonts
Google Fonts is the most obvious one of them.
Yet you may know that I try not to rely on Google when I don’t have too.
Indeed I overlooked Didact Gothic on the Google Fonts site! Why?
Due to the overwhelming number of often poor quality fonts to select from. So I simply did not come as far.
The code Google requires you to add to your site looks as follows:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">It’s pretty complicated by now, despite the easy of use I promised.
2. Font Library
In the past I have chosen to use the Font Library to host Didact Gothic.
Just adding a “meta tag” to your site header is enough:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/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 as many choices there so that I quickly located the best ones.
Sadly I noticed the the Font Library still uses the flawed 2013 version while Google already offers the revised one from 2017.
Also Font Library is sometimes a bit slow and has been offline a few times already.
3. Self hosting
Ideally you host your webfonts yourself on your own server or hosting account. That can get messy though.
Here’s an explanation on how to host Didact Gothic yourself on your own Web space (hosting).
You need to upload the font in several formats for different browsers.
Then 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. How?
Your site slows down when the fonts load slowly or do not load at all in the worst case.
Hosting on Google might have privacy implications too!
When you optimize your site for privacy and use third-party tools to check it they will often mark Google Fonts as borderline risky.
Yes, Google can track visitors using Fonts to some extent!
Didact Gothic 18px
Didact Gothic works well in 14 to 16px already.
Yet 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.
You are rather advised to “enlarge your fonts” nowadays.
In general as screen sizes and resolutions grow and most laptops by now use FULL HD (1920*1080).
On smartphone small fonts are not readable either. That should be obvious.
Do you like Didact Gothic? 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.
Didact Gothic alternatives
On this blog I tested another minimalist font called Lexend by 2024.
It’s not as simple as Didact Gothic but very similar and also almost as readable.
Another font that is very similar to Didact Gothic but also a bit closer to Futura is Glacial Indifference by Hanken.
You won’t find it on Google Fonts though.
I use it for main business card static website over at onreact.com – by loading it from Font Library.
Yet by 2025 I finally chose Inter from Google Fonts for both headlines and body text.
This is font you read this article in right now and for the foreseeable future.
It works for both and is the best middle-ground.
It’s also similar to Helvetica and Arial.
* Creative Commons image by iamtheo
