Getting Your Body Font in Shape

Last week I covered fancy fonts, primarily used for headings, images, logos, and special text. But what about body fonts in web design, those used for all the rest of your text content?

With body fonts, I’ve always felt just a little stuck in a rut–a rut called “I can only use Arial, Verdana, Helvetica, Georgia,” etc. And I would be willing to say that many designers are wary of using specialized fonts in our body text. It’s one more thing for our users to download, and possibly one more thing that won’t display correctly.

But in fact, we now CAN use special fonts for our body text designs, using the @font-face declaration in our CSS. (More about how to use that here–this article from SixRevisions explains it so much better than I ever could.) Using @font-face is a way we can include slightly different body fonts that help brand our sites. Not only that, we can better match body fonts to our special fancy fonts–always a nice way to pull a site together!

As part of my own research for new fonts, I began hunting through DaFont again, looking for lovely sans-serif and serif fonts that were readable and basic enough for body text–i.e., nothing too hard on the eyes at small pixel sizes. I came up with the following list of body fonts that are just different enough. Check through this list of sans-serif and serif fonts, all chosen for legibility and coolness–download links are below each image.

Each font below is previewed with the text “crooked glasses” (all in lowercase), and the display size was set to “Tiny” on

12 “Just Different Enough” Sans-Serif Body Fonts



Bird Cherry


Existence Light

Forgotten Futurist



Passion Sans

Print Clearly


Tin Birdhouse

12 “Just Different Enough” Serif Body Fonts

Angleterre Book


Day Roman

Dualis Lite


Happy Phantom

Just Old Fashion

Mary Jane



Springsteel Serif


One thought on “Getting Your Body Font in Shape”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.