DELIVER BETTER EXPERIENCES
What Is The Best Font Size And Typeface For Web?
By Victoria Taylo
If you've ever landed on a web page that was nearly impossible to read, you already understand the importance of having legible content. I'd bet you didn't stick around long on that page. You're not alone; most people won't. So if a site can't keep visitors around, how can it convert them? Simple. It can't. Because content that isn't legible isn't convert-able. In contrast, sites that provide an enjoyable reading experience see better traffic, engagement, and conversions as a result. While many factors contribute to a positive reading experience, copy is ubiquitous. So that's where you should start. This article goes over the best font size and typeface for your website or blog.
The best font size for web
In general, the larger the font size, the easier it is to read what’s online. This may seem obvious, but it helps to understand why. Google and IBM set out to do just that in an eye tracking study that analyzed how font size and type influence online reading. The researchers found that when font is larger, there is less fixed duration on the content, making the reader's speed faster. Conversely, when font is smaller, the reader's speed is slower because the eyes are fixed for longer periods of time. Obviously, you want to make your content easier for readers to consume. Content that's easier to consume is easier to absorb, meaning your marketing messages can come through much clearer. All of which translates to better conversion rates. Now let's get back to the main focus here: what is the optimal font size for web content? According to Smashing Magazine, it's 16-pixel text (for body copy read on desktop). In the article (seriously worth the read), D Bnonn Tennant explains how he came about this number. Basically,
"16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens"
To which I thought, makes sense, but what about content read on other devices (the article does not address it)? As you might have thought, too, what works for desktop will not necessarily work for mobile or other devices. According to this marketer the optimal font size for mobile is 14 pixels. There is some wiggle room here for varying typefaces and when the situation warrants it; but caution against going smaller than 12 pixels.
What about typeface?
Typeface is another critical choice when creating web content. There are entire books dedicated to the topic, we're just giving a brief overview.
Why is typeface important? For starters, fonts have the ability to create very specific associations for readers that elicit distinct emotions about a brand or company. Just think of the font used for Disney’s logo versus that of Sony’s. Two different fonts, two very different feels. The same is true for all fonts. When you think of Times New Roman, you might think "stale" or "pedagogic." In contrast, when you think of Garamond, words like "polished" and "sophisticated" may come to mind. Both are serif fonts (distinguished by the small decorative lines added to the end of a stroke in a letter or character) by the way, but they have different associations. Back to the IBM and Google eye tracking study, the researchers also measured legibility of serif vs. sans serif fonts. The study found that serif fonts (they used Georgia) were read 7.9 percent faster than sans serif fonts (the study used Helvetica), although the difference was not significant. Many other studies found the same. In another interesting font study, experimenter Errol Morris asked 45,000 New York Times' readers to take a quiz. Contrary to the title, the quiz was not meant to test whether readers were optimists or pessimists but whether typefaces affected perceived truth. Specifically, are there certain typefaces that compel a belief that the sentences they are written in are true? Morris used six fonts for the study: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans, and Trebuchet. He found that Baskerville promoted the most confidence; that is, engendered a belief that a sentence is true. (To read more on this study, click here.) Clearly, the decision on typeface is an important one; content marketer's should tread carefully. And there is much, much more that goes into (e.g., letter spacing, height and width, weight, shape, etc.) So for the scope of this article, here's a simplified list of the best and worst free fonts for your body content: Encouraged:
- Open Sans
- PT Sans / PT Serif
- Comic Sans (#1 most hated)
- Times New Roman
- Brush Script
- Gill Sans
Arial, Times, and Helvetica are also among the most hated but are more acceptable due to their universal availability.
The New Yorker
Image from The New Yorker
The New Yorker uses a black 16-pixel, Adobe Caslon Pro (serif) font that is very unique and fits well for the publication. The content is easy to read and digest, and provides a pleasant reading experience for its more than 1 million subscribers!
Image from BuzzFeed
BuzzFeed uses 17-pixel Proxima Nova font in dark grey for its body copy, and a 26-pixel text for its listicles, taking mobile into account. The site has a reputation for understanding content better than most. If you’re just starting out or looking to make some improvements, start there for guidance.
Image from NeilPatel.com
Famous marketer and master blogger Neil Patel uses a 16-pixel font called Geomanist (sans serif). He styles it in medium grey with a nice orange for link copy. The site is unique and feels warm and engaging. Aside from font, this is a great place to look for all of your marketing questions.
Never write off font as something unimportant. Choosing the right font size and typeface can make a big difference in readership and conversions you obtain. Give users an unpleasant experience, and there are countless other places for them to turn. Don't do your competition any favors - be smart about your font choices.
Actionable marketing advice, delivered weekly.
Join thousands of subscribers who get our best content first.
No charge. Unsubscribe anytime.
Back to Menu
Why Marketers Should Care About User Experience
Websites: How To Nail A Positive First Impression
DELIVER BETTER CONTENT EXPERIENCES
MADE WITH READZ
DELIVER BETTER CONTENT EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Drag-and-drop content creation, integrated marketing tools and performance analytics, all in one platform.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
TALK TO US