One of the most overlooked areas in conversion optimization is the role of fonts and typography.
As conversion optimizers, we look for the big wins, the low-hanging fruit, and the smallest changes to produce the biggest impact. Fonts and typography are one of those areas.
Here’s an example from ClickLaboratory.com, which conducted a conversion rate optimization (CRO) project for Numara Software. What did they do first? Make their call-to-action buttons bigger? Shorten forms? Improve the checkout process?
No. Click Laboratory first revamped their client website’s font.
The test font was larger and had expanded line spacing. This simple font change and line spacing increase reduced bounce rate by 10%, dropped the exit rate by 19%, increased pages per visit by 24%, and boosted the form conversion rate by 133%.
And all they did was change the font.
In this article, I want to show you some of the font techniques that could improve your conversion rates.
1. Use A Serif Font To Improve Comprehension
An eye-tracking study conducted by researchers from Google and IBM concluded that serif fonts had marginally better comprehension levels than san-serif fonts. Specifically, the font Georgia was rated as having higher comprehensibility than Verdana.
Should you switch all your fonts to Georgia?
Not necessarily. Comprehension is important, but it’s not necessarily the most important thing on a web page. For example, there are some instances in which it might be better to shroud a user’s comprehension than to sharpen it.
When To Use Serif Fonts To Improve Comprehension
Long-Form Landing Page body Content. If your goal on a page is give a user actionable information, then a serifed font like Georgia would be a good choice. The user is intaking information that will ideally contribute to their conversion action. The better they comprehend this information, the more likely they are to convert.
Lists Of Benefits & Features. Often, the things we want users to most remember about a landing page are the benefits and features. This would be a good list to put in a serif font.
I would advise against using serif fonts in most headlines. Headlines are intended to make an impact, not necessarily to create comprehension.
To grab someone’s attention offline, all you need to do is yell “STOP!” or “WHAT?!” or “#%$@!” This principle holds true for website headlines and landing page headlines, too — the goal is not necessarily comprehension, but attention grabbing.
2. Consider What Message Your Fonts Communicate
Font style influences readers’ perception of the information.
Comic Sans is the world’s most hated font. (Papyrus is a close second.) The internet has an entire website devoted to its virulence towards Comic Sans.
Mashable has been forced to report on the phenomenon. Change.org has a petition to ban it. Tumblr is lighting up with tales of Comic Sans. And musicians are even eager to perform songs on the topic:
The brouhaha about Comic Sans is a bit over the top, but it highlights an important fact: Font style influences perception. And on the web, perception is reality.
See the difference?
As the meme above indicates, a capitalized serif font creates a perception of “strong and trustworthy.” Comic Sans, on the other hand? Not so much.
Fonts have a powerful effect on our minds and on the way that we perceive a piece of content. This infographic from CrazyEgg’s blog helps you understand how we perceive various fonts:
Errol Morris & His Mind-Bending Study On Fonts
In 2012, filmmaker and New York Times opinion writer, Errol Morris, conducted a study on the trustworthiness of certain fonts.
Morris wrote a column that discussed whether or not we should be concerned about the possibility of Earth being destroyed by an asteroid collision. This column included a passage from physicist David Deutsch’s book, The Beginning of Infinity, which postulated that asteroids do not pose a significant threat to us.
Morris urged readers to consider whether they thought Deutsch’s statement was true or false.
Under the guise of determining whether his readers were optimists or pessimists, Morris included a 2-question poll at the end of the column. The first question asked readers if they thought Deutsch’s statement was true or false; the second asked how confident they were in their conclusion.
Unbeknownst to his readers, the Deutsch passage was randomly displayed in one of six different typefaces for visitors: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans and Trebuchet.
The fonts used in Errol Morris’ study.
What did Morris discover? Are we subtly influenced by typefaces? According to his follow-up report, we are: more users found the passage believable when it was printed in Baskerville. Morris deemed the difference statistically significant.
For some reason, we find that the serif fonts are more believable (especially the more sophisticated-looking font face of Baskerville).
In this same follow-up article, Morris quoted a piece called “The Secret Lives of Fonts” in which a university student reported on grade variation and font use in his essays. The student used different font faces for his essays and discovered a pattern:
Average grade of essays written in Times New Roman: A-
Average grade of essays written in Trebuchet MS: B-
Average grade of essays written in Georgia: A
College essays written in Trebuchet, a sans-serif font, received lower grades on average than the two serif fonts, Georgia and Times.
Whether or not you think the studies above form conclusive evidence, we can probably all agree with one assertion: font face influences our perception. And, generally speaking, serif fonts bolster credibility and trustworthiness.
How To Use Serif Fonts For Trustworthiness
If we want to bolster the believability of our landing pages, calls-to-action, and other copy, a serif font is our best choice. Here are three suggestions on when to use serif fonts:
Use serif fonts when believability is critical to a conversion
Use serif fonts when your subject matter is inherently serious
Use serif font to make a claim that some people might find hard to believe
3. Use A 12-Point Font To Improve Read Time
The 12-point font seems to be the sweet spot for human readability. Any bigger, and reading time goes down. Any smaller, and reading time goes down.
One study from Wichita State University took a sampling the following of eight popular fonts as the basis for a user investigation into font type, size, and readability.
They tested three sizes of each font: 10-point, 12-point and 14-point. In most cases, the 12-point font was read faster.
I want to insert a disclaimer regarding the slippery semantics of point as a method of font measurement. A “point” is a somewhat inaccurate way of referring to the size of a digital font. A point is 1/72 of an inch. But different pointing appears in different sizes depending on the screen, display settings, etc. It is, therefore, difficult to make hard and fast assertions regarding pointing.
A more accurate measurement metric is pixel size, but most web editing systems and word processing systems work in points. One helpful tool that I’ve discovered for determining typographic tips based on font size and content width is the Golden Ratio Typography Calculator.
When To Use 12-Point Fonts
Use 12-point for your main body content. As a general rule, your body content should be 12-point font. You want to avoid the friction element of time. Users shouldn’t feel like they’re spending too much time on your website, and an easy way to reduce this time is by shortening how long it takes for the reader to get through your text.
Don’t use 12-point font for your headline. For headlines, bigger is almost always better. Don’t go to 12 points on your headline.
Use fonts smaller than 12 points for important things that you want users to spend more time reading. For some testimonials, you may want to use a smaller (or larger) font. For a statement of “We’ll never spam” or “100% money back guarantee,” you may want to use a smaller font.
If your business caters to older users or those with visual impairment, a 14-point font may be preferable to a 12-point font. A study from Wichita State University determined that older adults prefer 14-point fonts for legibility and reading time.
4. Increase Line Spacing
Line spacing is an equally important factor in conversions and overall typography optimization. When it comes to line spacing, small changes can have a big difference.
Line spacing should provide breathability and roominess. Few people enjoy a cramped reading experience, nor will they profit from the content that they read.
Bringing It All Together: Fonts & Conversion Optimization
Of course, a single article can’t do justice to the vast science of typography. But when it comes to conversions, there are a few important things that we should keep in mind.
Stick with the basic fonts. Open up Microsoft Word and stare at the font choices. Kinda like Christmas, huh? Yeah, you don’t want to use all those. Especially Wingdings. (No Wingdings.) Snazzy fonts might work for logos, but the best fonts for your web copy, especially if you want conversions, are the basic ones. We’re talking Arial, Verdana, Trebuchet, Georgia, etc.
Use a limited number of fonts on a page. Ask any designer, and they’ll warn you against using too many font types on a single page. You want consistency, not confusion. Font choice and usage is an incredibly important marker of style. You will ruin your style with font overload.
Make sure your chosen fonts complement each other. Fonts have a “fit” the same way that bathrobes go with slippers and hot chocolate goes with cold fall evenings. If you use more than one font, then make sure they work nicely together.
Test it. As with any other conversion optimization technique, you need to be testing font changes. Don’t simply change things on a whim, because a serif font has higher comprehension rates, for example. Research, hypothesize, test, and decide.
Fonts, like anything, are important. If you can make a change that will boost conversions, then do it. Look at your fonts, see what can change, and then start testing.
Commentaires