Undeniably, landing page fonts are one of the most underrated focuses when it comes to your conversion rate optimization strategy.
Just like we wrote about landing pages being your company’s book cover, fonts are a vital first impression when it comes to improving your conversion rates.
And even though your landing page fonts are just a foundation behind your headline, you’ll be crazy to ignore it.
Don’t believe me? Here’s some proof:
Click Laboratory was ecstatic when a new software company hired them to improve their conversion rates.
Instead of focusing on the regular checkout process, the button colors, or the value propositions, Click Lab decided to work on the fonts first.
Exit rate decreased by 19%, bounce rate decreased by 10%, and conversion rates increased by 133%.
Remember when Steve Jobs dropped out of school and learned about typography?
“Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this.
I learned about serif and sans serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great.
It was beautiful, historical, artistically subtle in a way that science can’t capture,
and I found it fascinating.
None of this had even a hope of any practical application in my life.
But ten years later, when we were designing the first Macintosh computer,
it all came back to me.
And we designed it all into the Mac.
It was the first computer with beautiful typography.”
The fonts you use are the conversion rate details that matter.
They go unnoticed by most, but overall, the focus on design will help improve your conversion rates.
Keep reading to see how serif vs. sans serif fonts and seven other font variations impact conversion rates.
Fonts vs. Typography vs. Typeface
More often than not, us laymen folk use the words fonts, typography, and typeface interchangeably.
What I’ve learned?
MAJOR no, no!
A lingering graphic designer reading this right now could appear out of nowhere and smite us for our ignorance if we didn’t clear the air first.
You think of a font as what you select when you’re about to use Microsoft word.
The definition of fonts actually stems back from the 15th century where computers weren’t real yet.
In fact, people had to use metal letters and numbers as you see in the picture below.
This massive collection of different characters is what makes up “one font”.
Typography and typefaces describe appearance and style of the printed letter, character, and/or number.
Font = collection of characters.
Typeface/typography = style and appearance of them.
As each font is different in style and appearance, it’s important for you to understand not only how it impacts the readability and speed of reading of your landing page design, but also how it affects that vital first impression it makes on your visitors.
[Tweet “The landing page fonts you select should portray your company’s tone, mood, and purpose.”]
Why Are Landing Page Fonts So Important?
Your landing page design has a unique target audience that you’re trying to convert.
What’s the average age of those visitors? Are they young or are they older?
The answer to that question could help determine which type of font you should test first.
Should you use a sans serif or serif font? What’s the difference?
Believe it or not, serif fonts have been shown to be easier to read on printed material, while sans serif fonts have been shown to be easier to read on the web.
Sans serif fonts are usually used by more modern companies and brands that attract a younger audience, while serif fonts are geared towards the newspaper generation of older web surfers.
But what’s even more confusing is that a study showed that people who read serif fonts on a site perceived themselves to understand, comprehend, and get through the reading quicker compared to sans serif fonts.
The crazy thing? The evidence of the study proved that sans serif people actually scored higher in comprehension and reading speed.
So what’s more important? Perception of your landing page visitors or actual conversion rates?
I’ll take actual conversion rates all day long.
But landing pages aren’t the only place where font selection make a huge impact.
Restaurants are a perfect example of how font manipulation can make you hungrier, improve perceived value, and most importantly, get you to spend more when dining.
A restaurant menu study showed that simply using a fancier font increased the chance of people ordering certain items that made the restaurants the most profit.
Obviously I don’t recommend using any type of cursive font for your landing page, even if you’re a luxurious high-end private jet company.
People who sit down at a restaurant aren’t about to leave. They’ll take their time to read and understand a menu.
Your landing page visitor on the other hand? They’re just one click away from checking out your competition.
Tommy Walker, former editor over at Conversion XL, put together an amazing in-depth article about typography and conversion rates.
In it, he shares a conversion rate test that was created on the New York Times website.
The 45,000 participants of the test thought they were being quizzed on the topic of catastrophic events and security, and if they agreed with a certain statement in the story, but in reality, it was a font test.
Here were the fonts being tested:
Baskerville had a 1.5% increase in people agreeing to the deciding statement compared to the other fonts.
1.5% might not seem like much, but if you’re getting traffic volumes like the New York Times, then that’s worthy of serious celebration.
Moral of the story? Choose fonts that are easy and quick to read – and be ready to test new fonts, weights, and spacing.
There are various tools you can use for landing page design creation and testing, to see what fonts work for you…
How Do Landing Page Fonts Affect Conversions?
To make things a bit simpler, understand that your landing page font’s goal isn’t to evoke deep rooted emotions or trigger some neurological rainbow of happiness in your visitors’ brains (although that would be sweet).
The goal of your landing page font is simply to be read.
“But isn’t that the same job as a landing page headline?”
Yes. But there’s a little more to it.
If a headline and subsequent landing page copy gets read, then it’s partly because it’s easy to read.
What you want to prevent is something that happened back in a 1986 study on printed paper fonts – Where people had to “continually backtrack and re-read sections to regain comprehension.”
So which fonts have been shown to have the highest legibility?
You can take Claire Fallon’s advice on her completely subjective love for certain fonts.
Or, you can be scientific and go with the 2002 study by Software Usability and Research Laboratory which concluded that Arial, Courier, and Verdana were the most legible fonts.
So just like simple font changes on a restaurant menu or newspaper can increase the perception of value and legibility, so can font changes on your landing page.
7 More In-Depth Tips on Landing Page Fonts
Okay, so now that you understand the importance of your landing page fonts, let’s dissect the different font elements you can test in your headlines and landing page copy to improve conversion rates.
Just like button colors have an importance in regards to conversion rates, so do the colors you choose for your fonts.
You’ve probably heard of the 40 shades of blue the Gmail team tested to measure higher click through rates on their buttons, but did you know Bing ran a similar blue font color test on their search results page?
The result was an astounding $80 million in additional annual revenue.
For the test, it turned out that contrast and color of font had more importance in performance than the typeface being used.
They once used the font Verdana, but ultimately switched back to Arial because it performed better too.
The readability and legibility of your fonts depends largely on the font sizes you use.
Wichita State ran a study looking to find which font sizes of 10, 12, or 14 were easiest and quickest to read.
The result? Font size 12 won.
Now keep in mind that different screen sizes have different resolutions and your headline for example, should have a bigger font size compared to your supporting landing page copy.
Bigger isn’t always better.
The visual shapes of the fonts you choose have a dramatic importance on how fast people are able to read and skim your landing page.
Another study came from two individuals of Microsoft and MIT who wanted to know whether typography could affect mood and cognitive performance (the ability to process and understand information).
They decided to split up the participants between bad and good typography (see screenshot above).
The results? The good typography group finished 52% of the task while the bad typography group was only able to finish 48% of the task.
You should be a freaking stud when it comes to landing page fonts, typefaces, and typography by now.
So here’s another one I’ll throw at you – font weight.
The width and relative “thickness” of your fonts (specifically in your landing page headline and subhead) should be tested as well.
Remember that time in college when your paper had to be 24 pages, but you couldn’t squeeze out more than 20?
To put it simply, no one’s gonna convert on your landing page if they have a hard time reading what you wrote.
A simple fix that can help increase your conversion rates is to play around with line spacing to free up white space.
By making your writing more easy to digest in a visual way, you’ll get a lot more people starting to read your paragraphs compared to now even wanting to start the reading at all.
Your actual copywriting skills will then decide whether the visitor will continue to read.
Just like our blog has a certain amount of words per line, so should your landing page copy.
If you go too wide, then people will have a hard time focusing on the text.
If you go too narrow, then you may break the readers rhythm.
Optimal line width for your landing page copy suggests 50-60 characters per line.
Test out any long copy you have by messing around with the widths, and use a tool like CrazyEgg to measure how far down visitors scroll before and after your changes.
Line breaks are similar to line widths.
They also make it easier and quicker for your visitors to read and understand your copy when used correctly.
By making sure you give your sentences more breathing room, you can make sure you give your conversions the best chances of happening too.
Wow! Quite the rundown on fonts and their impacts huh?
I guess it’s safe to say that “Don’t sweat the small stuff” shouldn’t be a saying that’s about landing page fonts.
They can have big performance impacts if used the right way.
But choosing the best landing pages fonts and the other font elements we covered can be as trivial as choosing which colors to use for your landing page.
While there’s never a clear font winner for all purposes, it’s obvious to say that each landing page can be improved with font testing.
As you go through this and start testing fonts, remember that the best landing page font choices are ones where visitors don’t notice the font, but notice the message.
What landing page fonts have you used to improve performance?