“It’s possible to blow away three-quarters of our readers simply by choosing the wrong type.” So says Colin Wheildon, author of Type & Layout: Are You Communicating or Just Making Pretty Shapes, in an article by John Wood.
That’s a lot of people to lose right out of the gate. Think about what that represents in terms of lost revenue. It’s astounding. All because a potential customer doesn’t like how your font looks.
But who among us hasn’t been immediately turned off by a website — or a brochure, white paper, etc. — simply because the font wasn’t the right size, style or color? I definitely have.
With so much at stake, how do you get your fonts right? And how does the medium — print vs. online — influence your decision?
The Serif vs. Sans-Serif Showdown
Every font is either serif or sans-serif: Serif letters have little “feet.” Sans-serif letters don’t.
- Serif scores higher on readability. Wood says this is because the little “feet” help our eyes bind the letters together to see them as whole words. Most newspapers are written in a serif font.
- Sans-serif scores higher on legibility. According to Wood, the increased space between letters in a sans-serif font helps words stand out, which is ideal for a headline.
It used to be pretty simple: Whether it was print or online, if you were writing body copy, you’d use a serif font; if you were writing headlines, you’d use a sans-serif font.
But mobile is changing everything.
Why is sans-serif taking over on the Web for both body copy and headlines? Here’s one opinion, from an article on UrbanFonts.com: Sans-serif is highly “shrinkable,” meaning letters are more easily recognized at a smaller size than with serif. And now that we’re basically living (and making purchasing decisions) on our phones, going with sans-serif fonts just makes sense.
Best Practices in Print, Web and Mobile
Now, on to what you really want to know: What font size, style and color should you use so you don’t turn away 75 percent of your audience?
It was hard to find a definitive answer. But based on UrbanFonts.com and a 2013 typography study by Smashing Magazine, here are some takeaways:
Smashing Magazine reported that what really matters here is how the copy looks on the page or screen and the relationship between the headline and the body copy. For example, headlines that were roughly twice as big as body copy feel “right” to our eyes.
- Headlines: 18- to 29-point font
- Body copy: 12- to 14-point font
Designers will never agree on this, and it’s always changing. For example, Times New Roman was considered outdated for a while. Now it’s “old school” (in a good way) and back in favor.
Most hotly debated in the design community, offers Smashing Magazine, was whether to use serif or sans-serif for Web body copy. Do what feels right for you, but just remember if the text is going to be read on mobile, sans-serif is a safer choice.
Here’s a look at the most popular fonts for each style, according to Smashing Magazine:
Print or Web
- Sans-serif for headlines (most popular style: Arial)
- Serif for body copy (Georgia)
- Sans-serif for headlines (Arial)
- Sans-serif for body copy (Arial)
It’s all shades of gray here — as long as the background gray is closer to white and the gray text is closer to black. Seriously, don’t try to get clever with color. Smashing Magazine found that readers preferred a white, cream or light grey background and dark letters. The reason is simple: It’s just easier on the eyes.
A Final Thought
Now that you’ve held onto those 75 percent of readers because you’ve followed best practices for font size, style and color, there’s only one way to keep them engaged: great content. And we’re not just saying that because we’re writers. Okay, maybe we are a little …