How to Increase Your Website’s Conversion Rate with Typography
Congrats — someone has landed on your website! But will they stay for more than half a second before clicking away? Will their experience be pleasant or frustrating? Will they choose to do what you’d like them to do?
That last question reflects your website’s conversions: the rate of people who are convinced to take a particular action that benefits your business, such as subscribing to an email newsletter, submitting a contact form, or purchasing a product.
Veteran bloggers and marketers share lots of tips and tricks for increasing conversions, like tapping into psychology to craft the most convincing copy or dangling an irresistible freebie to entice subscribers. But as people read what your website might have to offer, they’re also experiencing another crucial element of your website — its typography.
“Typography is the primary vehicle we use as designers to communicate our message,” says Jason Santa Maria, director of Communication Design at InVision and author of On Web Typography. “When we get it right, it’s powerful. When we get it wrong, the design fails — no matter how well-considered the layout, code, or writing.”
How Typography Influences Conversion
1. Good Typography Makes People Trust You
We aren’t as rational as we like to think — but we do tend to make irrational decisions in predictable ways. We call those patterns in irrational decision-making cognitive biases. One bias that is influenced by typography is the fluency processing bias: if something is easier for us to digest and comprehend, we’re more likely to view it as credible.
In a study at the University of Michigan, participants were asked to read instructions for an exercise routine. One group read the instructions in Arial, the ubiquitous, pragmatic sans serif. The other group read the instructions in Mistral, a decorative brush script.
The difficult-to-read Mistral group assumed the exercise routine would take 83 percent longer than the easy-to-read Arial group. The difficult-to-read group also believed that the exercise routine would require more skill, and were less willing to try it.
2. Good Typography Encourages Action
Your website should have clear calls to action (CTAs), like “subscribe to our newsletter” or “sign up for a free trial.” With type that is easy and pleasant to read, visitors are more likely to heed those CTAs.
As part of a study at the Yale School of Management, participants were asked to read a brochure for a phone, with one group reading an easy-to-read font (Times New Roman Italic) and another group reading a difficult-to-read font (Times New Roman italic with a distracting drop shadow).
The participants were asked whether they would buy the phone right away or if they needed more time to make their decision. Only 17 percent of the participants with the easy-to-read brochure said they wanted to delay their buying decision, while 41 percent of those with the difficult-to-read brochure wanted to wait to buy.
Another key to conversions? Your website structure. Here are 5 rules to make sure you set up your site right.
3. Good Typography Influences the Senses
Our brains are wired to respond to our environment in ways that help us survive. Because type is visual, we respond to it in much the same way we respond to the physical world; we respond to the shapes of the letters quickly and unconsciously, often before digesting the actual words.
In one survey, Hyndman gave 100 people identical jelly beans. When she displayed the font on the left, people rated the jelly beans as being 17 percent sweeter. When she displayed the font on the right, people rated the (identical!) jelly beans as being 11 percent more sour.
The curves of the font on the left reflect the roundness of a jelly bean itself, as well as other round, soft things like pillows or clouds; the jagged font evokes feelings like anger and aggression, like the bared teeth of a predator.
4. Good Typography Amplifies Your Message
“There’s so much personality to the typeface you choose,” says Karolina Johansson, senior designer at DreamHost. “Typography sets the tone — is it serious, funny, whimsical?”
The idea that a typeface can have a personality may seem fanciful, but it’s no joke. Along with our senses, our individual memories and shared history and culture can add layers of connotation to typefaces.
A study by Eva Brumberger of Virginia Tech found that there are clear patterns in the characteristics people attribute to typefaces, and that those characteristics can be divided into three main categories: elegance, friendliness, and directness.
And Hyndman’s Font Census surveys explore in-depth the “personality” of popular typefaces. The full results are published in Why Fonts Matter, but here’s a sampling of the findings about the personalities and values people ascribe to typefaces:
- Baskerville: intellectual, academic, wise, traditional, conventional, trustworthy
- Clarendon: doer, leader, thinker, traditional, professional, confident
- Futura: leader, idealist, thinker, responsible, professional, well-informed
- VAG Rounded: everyman, idealist, doer, friendly, cheerful, relaxed
When the “personality” of a typeface matches the message of the text, it supports and amplifies that message.
For example, if you see the bold, all-caps Gotham font, you might think of the Obama “HOPE” posters that made the typeface a designer darling — and you might associate it more generally with feelings of optimism, inspiration, and forward-thinking.
5. Good Typography Makes Your Website Visitors Want to Stick Around
If a reader gets frustrated with a website, appealing alternatives are always a click or tap away. Your users are giving you their time and attention (and possibly money), so give them the gift of well-crafted typography to make their experience frictionless and even delightful.
How to Choose and Use Type Wisely
Ready to hone your typography skills for a winning website? Here’s how you can create conversions with a type that sells.
Choose Type that Suits the Use
Typography is about more than which font you choose (we’ll get to readability next), but font selection is generally the first and most important step.
Quick note: Typeface and font are often used interchangeably, but they are a bit different. A typeface is the design, such as Helvetica. A font is the format the typeface appears in, such as Helvetica Italic, 10 pt. The typeface is like a family; the fonts are like the individual members of the family.
There are seemingly endless font options and a variety of contexts where fonts are used. But Slate designer Jason Santa Maria says you can usually narrow down those uses into two simple categories: type for a moment and type to live with.
Need a beautiful website? Build it yourself — no coding required — with Remixer.
Type for a Moment
As the name suggests, this is a font that only takes a moment to read.
For navigation or interface text, Santa Maria suggests choosing a font that is readable at small sizes and isn’t overly ornamented, like a simple sans serif.
For a headline, Santa Maria says that “using a decorative typeface with a lot of personality immediately sets a mood, which can be a great way to draw a reader in. That said, you wouldn’t want to use it for more than a line or two, as it quickly becomes cumbersome to read. Like salt, country music, and in-laws, a little goes a long way.”
Type to Live With
This is type that readers will spend more time with, like when they’re reading an article or book. “The type you use should be smooth, removing as much friction as possible between the reader and the text,” Santa Maria advises. “Help people forget that they’re staring at a screen and instead immerse them in the words and the story you’re telling.”
Santa Maria suggests looking at a few characteristics of the typeface to assess its readability:
- Sufficient x-height: The x-height, or height of the lowercase x, reflects the proportions of a typeface. For example, Bernhard Modern has a low x-height, with the lowercase letters significantly shorter than the uppercase letters. Antique Olive has a high x-height, and Futura is right around the middle. For readability, it’s best to find a typeface with an x-height that is close to half the height of the uppercase letters.
- Low or medium contrast: “A little contrast is okay but too much can be, well, too much,” Santa Maria says. A high-contrast serif like Bodoni may work well for headlines but is too hard to read in larger blocks of text.
- Recognizable and distinct letterforms: Some typefaces, especially sans serifs, don’t have much distinction among letterforms with similar structures, like the 1, lowercase l, and uppercase I. Though running text offers contextual clues for these lookalikes, shorter snippets of text may be confusing. “Every moment the reader spends decoding text is a moment wasted,” Santa Maria explains.
Choose Type that Suits the Message
Remember that research about how type can have a personality all its own? You want to make that personality work for you and pick a font that matches and even amplifies your intended message.
Santa Maria suggests brainstorming some word associations you want to reflect your message. Should it be traditional, modern, or trendy? Luxury or accessible? Playful or professional? Rugged or elegant?
Then try this: Use the words you came up with and plug them into the “tags” field in the advanced search on MyFonts.com. Then explore the results, and you may find just what you need.
Pair Fonts that Play Well Together
A jumble of typefaces is generally a big nope for good design. Stick with the rule of thumb to use no more than two typefaces at once.
For the perfect pairing, Santa Maria advises choosing typefaces that have complementary structures but aren’t so similar that they’re indistinguishable.
One trick is to simply choose different weights and styles within one typeface or to choose a “superfamily” that offers both a serif and sans serif, such as Roboto (a sans serif) and Roboto Slab (a slab serif) by Google Fonts.
Make Type Readable
“Just because something is legible doesn’t mean it’s readable,” Santa Maria says. “Legibility means that text can be interpreted, but that’s like saying tree bark is edible. We’re aiming higher.”
Here are some simple ways to make sure the text on your website is readable.
Make Text Bigger
Bigger is better for web text. A 2016 study used eye-tracking and measured comprehension among people who read Wikipedia articles of varying text sizes and line spacings.
The results: 18-point text had the best readability and comprehension, and between 1.0 and 1.4 line spacing was ideal.
Make Lines Shorter
“You don’t want your lines of text to go across an entire page because it’s hard for the eye to follow to the next line,” says Johansson. She suggests using lots of white space and keeping the line length to no more than 65 characters long.
Avoid All Caps
As any internet citizen can tell you, all-caps text is synonymous with SHOUTING, so it can seem rude. But even if the words are polite, all-caps text can be inconsiderate, because it’s difficult to read.
When we read, we naturally use the shapes of the outlines of words to speed our reading and comprehension. But all-caps words are uniform rectangles, so we have to spend more time digesting them.
Make sure you’re not making these 6 common content mistakes.
A Website That’s Just Your Type
“Fonts are like multisensory imagination grenades,” Hyndman declared in her 2014 TEDx talk. “Fonts turn words into stories.”
Like actions, type can speak louder than words. When you know how to choose and use type wisely, you can be sure you’re sending the right message.
By Holly Munson