3.7 DESIGNS - Web Consultancy

40 Web Fonts for Body Copy

Posted on 01/03/2012

Few words can describe the euphoria I felt upon learning of widespread @font-face support. The time and effort once required to make typographically pleasing websites would be reduced forever. The very notion of dropping tools like Cufon, sIFR and image replacement had me grinning ear for ear. And what of body copy? Designers could finally find an acceptable typeface for large paragraphs of text that wasn’t Arial, Verdana or Georgia… or so I thought.

To say I am disappointed in the selection of embed-able fonts would be extreme, but there is still a void left unfilled. As an avid tinkerer, I have made it a self-imposed duty to test out as many typefaces as possible. Having browsed Google’s selection, TypeKit and the free listings at Font Squirrel I couldn’t help but notice an abundance of typefaces perfect for headlines… but few well suited as an elegant solution for legible body copy. Many of the typefaces were limited to one style (meaning no italic or bold version), rendered poorly on Windows Machines or were illegible at smaller sizes.

Seeing few other options, I have replaced my use of Cufon and sIFR for headlines but continue to use the same boring default font stack for everything else. Not being satisfied with this compromise I decided to go out and find at least ten great typefaces for body copy that render well across all browsers. I found significantly more.

My Criteria

To meet my standards of being “acceptable” for body copy the fonts had to have at least a few different weights and ideally an italic and bold italic style. As almost any website with body copy will have common bold and italicized text this was my first priority. While browsers will simulate italic, bold and the combination of the two it’s never ideal.

Secondarily the fonts had to be pretty damn legible across multiple different browsers at 16px/24px. This really wasn’t an issue between modern browsers (Chrome, Safari, Firefox, etc…) quite a few of the fonts looked illegible in Internet explorer.

The Test Page and Collection

If you are interested in looking at the page I used for testing you can find it here. While I selected all of these typefaces from the Google Web Font directory you can find the exact collection I tested here.

The “Winning” Web Fonts for Body Copy






































Conclusion

To my surprise, the selection of body copy fonts are plentiful… they are just buried amongst an avalanche of those suited for headlines only. I hope this proves to be a valuable resource in selecting alternative fonts for your body text with out having to wade through hundreds of ill suited ones.


Google Analytics Alternative