Examples of Quality Webfonts for Body Text Readability: Proxima Nova
Last time I’ve written about how Microsoft made the Web ugly and how so called webfonts are probably a solution alas a difficult one I promised to find some premium quality webfonts for improved body text readability.
I’ve checked most of the free sans-serif fonts available
because serif fonts do not work for small type on the Web in my opinion. The free fonts were not good enough though. Graphic designers say things like “there is no such thing as a good free font” when you ask them. Then I went on checking paid fonts and discovered some typography trends while at it. For example one of the newly popular webfonts seems to be Proxima Nova.
Who uses Proxima Nova?
Hubspot uses the font for all headlines:
Inbound.org uses it for headlines + body text:
I’ve found plenty of other examples:
- a high-profile architecture magazine from Japan
- a trendy online store from Australia
- a well-known university from the USA
Are there still readability Issues? Yes.
- No font-smoothing when Windows ClearType switched off.
- Proxima Nova in 15px and 13px looks warped
- At the end of the day only 16px+ is readable for body text
I spoke last time about the issues that arise from the Windows implementation of font smoothing. When I switch it off, some fonts will be smooth because they are by themselves, other won’t. Some fonts are made explicitly for the Web and deserve the term webfont, others are only ported. Consider this screen shot of not anti-aliased body text in Proxima Nova of 16px size:
These issues arise on Inbound and Hubspot to some extent too. Not all the sites using Proxima Nova face the same issues though. It seems it’s the implementation and the accompanying CSS that matters too. I’d advise you not to use Proxima Nova in sizes like 15px or 13px. Generally anything below 14px doesn’t work properly with this font. The perfect size seems to be 16px.
As Proxima Nova is a whole font family it also depends on which weight you actually choose for each task.
Where can you get Proxima Nova for the Web?
I will follow up with more examples of quality webfonts for body text readability in the upcoming weeks and months until I’ll find the perfect one for me. In the meantime I have found a much better readable (but still not perfect) free webfont for me. I will describe it next time.
* Proxima Nova Regular in 36px via Webink