Want your web copy to look as good as it sounds? Use one of these 3 body fonts.
Dedicating a whole blog to web body text is something I’ve been looking forward to for weeks. It isn’t just a break from talking about storytelling. Talking about my favorite body fonts is also kind of like finding a new undiscovered writer whose work should be known by everyone but isn’t, and then sharing it with people who care.
But it’s also something like a crazy one-man mission. Because, if you write for the web, even though type is such a huge part of how your stories are consumed, there is really very little open conversation around body text or awareness among writers of how much it impacts the web reading experience.
If the content of an article pisses people off, you’ll hear about it. If the font it appears in is caption-sized, the wrong weight and each line stretches across your desktop screen like a slow-moving freight train, no one says a thing.
All of that makes talking about and sharing spectacular web body fonts that much more vital.
Wait, I’m just a writer
Ok, chances are, if you write for the web, in any capacity, you aren’t involved in design decisions about your copy. Fair enough.
Website typefaces are pretty much fixed and difficult to change, and—very important—the font disasters I was describing above are really created by the ignorant application of basic CSS font properties (i.e. the code that changes how the font looks and behaves on screens), not by font choices.
Font properties we’ll tackle briefly at the end of the article. But—and here’s the point—just choosing a beautiful, well-designed body typeface is always the first step. While that choice may ultimately be out of your hands as a writer, you’d be surprised at how open to conversation some designers, clients and editors are.
So, to get the gospel of body text rolling, here are three great body fonts for web writers who care as much about their words as the way they’re read.
Designer: Wei Huang
Foundry: Google Fonts
I think if any type goes home to bed happy at the end of the day, it’s Work Sans. There’s just something about this font that is a joy to behold. But, web writers, there’s actually a lot more to Work Sans besides good vibes. This is one of the best sans serif grotesques for body text on the market.
Work Sans gives one of the clearest reading experiences you can get on the web, and its regular weight (400) was specifically designed for onscreen legibility. Work Sans also has enough personality to make it very pleasing to look at and read. I mean, just look at the “ear” (the little squiggle jumping off the upper bowl, or “counter”, of the lowercase “g”.)
Seriously, just looking at Work Sans puts me in a better mood. The affect this typeface has on me is almost freaky—and it’s free. Work Sans is open source and can be downloaded from Google Fonts at no charge in 9 weights. Heavier weights make beautiful headers.
If you’ve got your own blog or website, you don’t even need to use font face. You can just embed the code Google gives you in your website header, tweak your CSS, and you’re done!
Designer: Noël Leu
Foundry: Grilli Type
Switzerland-based Grilli Type is like the Hoefler and Frere-Jones of the 2010s, and their typefaces are everywhere. GT America is particularly popular as a web font, approaching the ubiquity of its older competitor across the Atlantic, American Gothic standby Franklin Gothic, but that doesn’t make it a bad choice for your web body text. In fact, it’s a beautiful choice.
According to Grilli, GT America was designed as a bridge between the European Grotesques (think Futura) and the Gothic fonts developed in the US (again Franklin, Titling, Trade Gothic, etc).
GT America is also hugely versatile. It comes in 7 weights and 6 widths (compressed, condensed, standard, extended, expanded and monospace.) So in addition to having legible, playful, good-looking body copy, you can create funky monospace captions and then use the condensed style for big (22-26px) intros to your content.
This typeface isn’t free. You can check out pricing by clicking on the link at the bottom of this page.
To check out another example of GT America in the wild, click here.
Designer: Fabian Leuenberger
Ok, obviously we have a soft spot in our hearts for Europa. We use it on the Storyline Creatives website for everything: headlines, body, captions, etc. But you can probably see why we’re so smitten. Europa has the sort of innocent feel of a retro children's book or a 1960s airplane safety manual. It’s upbeat and happy, yes, but it’s also very easy to read and very pleasing to look at.
This may be explained by the fact that the designer was shooting at something between a geometric and humanist sans serif. In fact, I think that nicely explains the charm of Europa, a blend of the rigorously German Futura and the more laidback English Gill Sans. This is a typeface that would stand out at a party without trying too hard.
If you want to read technical explanations of what I described above, you can find them here. To catch Europa in the wild, look no further than this website.
In the intro, I said I’d talk just for a second about how you can make your web reading experience much better for users by adjusting a few CSS properties. Here they are.
While I suggested that convincing clients or editors to overhaul their web fonts might be a lost cause, these tips are super easy to implement and will make a world of difference to readers. So, if you do notice any of the following violations, report them.
Body font size
I hope—I pray—that awareness for properly sized body fonts has started to trickle down from the typographers who have been preaching them for years to the web designers who actually implement these decisions on websites. Personally, I see more and more evidence that web designers are adopting this very basic principle, so that’s great.
No one wants to ready tiny letters. No one. It’s not only aesthetic. Putting text in 15-16px is screaming: “These words don’t matter!”
So make your text legible, especially when you’re using a nice typeface. Big it up. Don’t be afraid. Your readers will love you, and you’ll get used to it, too.
Try 18px. If you’re really adventurous, try 19-20px or more, or the equivalent in vw, em or rem.
Body font letter-spacing
Briefly, it’s really not a good idea to adjust the letter-spacing (aka tracking) of your body font. Designers spend months making letters fit perfectly together for optimum legibility.
If you’ve got captions or other uppercase text below 14px, a little extra space between letters is ok, but not for your body text.
Body font weight
Don’t opt for anything below 400, unless you’re blowing your letters up beyond 20px or are using white letters on a color background. Even then, it might not be a good idea. Letters that are too light can’t be read, and this is very frustrating for readers.
Maybe you’re thinking: “But 400 is too fat for my body font!” If that’s you, then you’re obviously very sensitive about these things, and that’s great. Consider finding a typeface that has a “thinner” regular or book weight. Any of the fonts I recommend above would work for you.
Finally, I think the saddest violation of basic web typography is a humongous line packed with 100 or more characters.
Like tiny font sizes, this type of line shouts out: “I dare you to read me!” Psychologically and physically, super long lines are prohibitive.
Fortunately, like the other three properties on this list, fixing line width is pretty easy. Just make sure your lines don’t run over 85 characters with spaces. To fix this in your CSS or HTML, you just need to make sure the containers for your body text are set accordingly.
Storyline Creatives has absolutely no relationship, business or otherwise, with Google Fonts, Grilli Type or EuropaType. We’re just writers who are crazy about typefaces and web design.
When Max Sheridan isn't sharing his favorite typefaces with readers, he designs comeback campaigns for Nicolas Cage. (What, you don't think he needs a comeback campaign?) His second novel Hubble is coming fall 2020 from Run Amok Books. Talk to Max at your own risk here.