How could one, tiny, insignificant, boring, irrelevant, and useless little feature have such a seismic impact on conversion optimization?
You might call fonts tiny, insignificant, boring, irrelevant, and useless. I call it powerful.
How fonts affect conversion optimization
I’ve written elsewhere about how fonts and conversion go together. Simply put, your fonts affect your conversion optimization.
You can read my Marketing Land article here, because, well, it’s everything you need to know about fonts and conversation optimization.
One company, Numara Software, tested two font sizes — 10 point Arial vs. 13 point Arial.
The result? BAM! Conversions skyrocketed by 133%, and jacked up revenue by $330,00 a month. KA-CHING!
But in full transparency, there is more that you need to know about actually doing this whole fonts + conversion trick.
It’s one thing to know, “Okay, the font I use impacts my conversion rate.” It’s a totally different thing to know, “Okay, so this is what I need to do.”
This article? This is what you need to do.
1. Conversion optimizers should have a role in deciding which fonts are used.
When it comes to deciding on the font for a website, I believe that the conversion optimizer should help decide. Because fonts influence conversions in a highly significant way, the conversion optimizer must help determine the best font to use in order to maximize conversions.
Too long, web designers have ruled the world.
Quite by accident, they have taken control of the entire user experience and the conversion optimization. This is a mistake.
Now, please don’t get me wrong. I love web designers. Without them, the world would be a dreadful place.
But if we ask the web designer to optimize the entire web experience, we are asking far too much of one person.
I say this out of sympathy to the designer, not out of spite. Designers have a role in shaping the experience of the web user, but there are other people who are involved as well, namely:
- The information architect.
- The usability expert
- The developer.
- The conversion optimizer.
- And, yes, even the lowly SEO.
Everyone on the team helps understand, influence and shape the entire experience so it fulfills the goal of the website.
Please understand that designers have strong opinions regarding their favorite font. That’s okay. They are entitled to professional opinions, and you should listen to them.
While respecting their viewpoints, please share with them also the conversion significance of fonts. A collaborative discussion on font choice will be productive.
2. Don’t pick a favorite font. Instead, pick the best font for the situation.
The font question is not a simple one to answer. Those who purport to have a “best font” are just wrong.
Do not expect a simple answer to the question, “What’s the best font for conversion optimization?”
Why not? Because there isn’t one! You need to clarify your context. What is the purpose and point of the font?
Let me explain by suggesting the types of questions that you should be asking when deciding on a landing page font:
- Which font is best for a website selling early educational products to home-schooling moms?
- Which font is best for the body text, based on the color scheme on my homepage?
- Which font is best for an email capture form for a free e-book on blog traffic generation?
- Which font is best for the headline on a PPC landing page for high-end athletic products, based on the ad copy “No. 1 Shoe Choice of Marathoners.”
- Which font is best if I want to inspire in my customers an aggressive attitude that inspires risk-taking?
- Which font is best to accompany a colorful image depicting a father playing with his son in a grassy field?
You see what’s happening here? Your hopes for a give-it-to-me-straight silver-bullet font choice have just been blown to smithereens.
Conversion optimization is an extremely relativistic field. In other words, everything depends on everything else.
DesignShack wrote a 1,000-word manifesto trying to determine which was better — serif or san serif? Their conclusion?
Why did they say meh? What is the real issue here? Consider what they actually wrote:
So which is better: serif or sans-serif? It all depends on the use, mood and individual project. The best answer is typically the least clear – many great design projects incorporate both styles. This applies to print and digital projects.
As I’m fond of saying, there is no such thing as conversion optimization best practices. In the field of conversion optimization, you have to be inquisitive, investigative and insistent on testing everything.
3. Consider every feature of the font.
What’s in a font besides all those usability questions that I showed you above?
More, in fact, than you might think. The differences between fonts are not limited to the merits of Comic Sans vs. Helvetica.
Below are just a few of the multitudinous features that have a bearing on the appearance of the font, and therefore into your landing page font selection. Props to Alex Poole for his helpful tutorial on the subject.
- Serif and sans-serif. Serifs are extensions that hang off the ends of characters.
- Point size or typesize. Basically, how tall the letters appear.
- X-height. A more accurate measurement technique for typesizing.
- Counter size. How big the holes are inside of characters, like in Bs, As, and Os.
- Ascenders. The strokes of characters that go above the middle line, primarily in lowercase letters. This would be like an l, and an h.
- Descenders. Strokes of a character that go below the line. The g, q and y have descenders.
Must you pay attention to every single descender and the relative negative spacing within every counter when you decide on a landing page font?
But it helps to be aware of them. Why? Because every feature of a font has a bearing on its readability, legibility and usefulness, and therefore on conversions. Consider it from every angle.
4. Ask yourself these questions when deciding on a font.
Where will the font be used? Body copy? Headline? CTA?
A font’s placement on a landing page will impact the conversion effect that it has.
As an example, let’s talk about the CTA. Your CTA font is critical, because it presents the user with the action point.
Typically, a CTA should have some level of differentiation, that is, it should be unlike the appearance of other letters and words that surround it. You can create differentiation in all kinds of ways — color, size, background, frame, imagery, capitalization, and font.
A different font can help to evoke a different emotional response to the CTA itself. Here’s an example.
The orange CTA in Tim Ferriss’s blog uses a different font from any of the other fonts on the page. It has more differentiating features than just the font face itself, but the font does play a role in the user’s response.
A font that is all caps and spaced closely helps to raise the intensity level. It almost makes you feel hurried or mildly desperate. The message is perceived as urgent, not only because of the orange color, but because of the font itself.
Canva takes the approach of simplicity in their headline. The headline reads “Amazingly simple graphic design,” and they try to communicate the idea and feeling of simplicity in the way that they design the heading.
What is around the font on your landing page? An image? A button? Another copy block?
Surrounding elements on your landing page influence how the eye moves across the text. For example, if there is an image directly beneath a headline, then the eye will move quickly across the headline in order to see the image.
On the other hand, if there is a column of text arranged vertically next to an image, then the eye might pay closer attention to the words.
Another possibility is placing the text atop an image. In this case, the eye might be alternately drawn to the words and the focal point of the images. Again, the choice of font in this case will influence both whether it gets read, and how closely it gets read.
For example, on Gary Vaynerchuk’s blog, he uses a large feature image with a sans serif headline overlay. The result? The user fixates on both the image focal point and the words of the headline, perhaps with alternating saccades.
Let me show you a little trick. This comes from an online menu for a restaurant. Right along with the text about the appetizer they place the price of the appetizer.
Look at it.
The little numbers blend right in with the beurre blanc, the lusty monk (wut?!), and the piquillo jam.
Why is this ingenious? Because you’re less likely to fixate on the price. Instead, you’ll be swept up in the musical verbiage of the French words that sound so tasty that you wish you could inhale them directly into your nose.
Plus, the menu uses a sophisticated serif font. Serif fonts have the advantage of creating an unbroken linear progression, formed by the subtle sightline of the row of serifs. Notice in the image below how the eye tends to track easily along the “rails” formed by the serifs.
Additionally, serif fonts are often viewed as more professional and high-class.
The result? You buy the seared bistro steak with ramp salsa, whatever that is. And you blink not nor flinch at the $14 price tag, because — what the heck? — you hardly even saw it!
5. Decide what emotional response you want, and choose your font accordingly.
Emotions, as you are probably aware, have a powerful role in conversion optimization. If you can use your font choice to affect the user’s emotions in the right way, then you have gained a significant advantage in your conversion efforts.
This isn’t exactly a scientific survey, but the following image is a good visual suggestion of how fonts impact our emotions and feelings.
Thick sans-serif fonts make you feel bold, strong, innovative and confident.
Notice how the font and the messaging on this image just fit.
The bold I-don’t-care-what-you-think attitude of the message is reinforced by the bold emotion evoked through the careful choice of font.
Tight serif fonts help to evoke a sense of class.
Want to look classy? Use a serif font. It communicates elegance, sophistication and class.
Look at these few words from Ermenegildo Zegna. This company sells articles of clothing that cost more than your car. A serif font just fits.
Compare that font usage with the sans-serif approach of a more economical and accessible clothier (Nike):
Even though web design “best practice” advises against the use of sans-serif fonts in header menus, Steinway & Sons defies this.
Why? Because they are selling expensive items to sophisticated buyers, that’s why.
Curly or complex fonts evoke sensations of childish curiosity and fairytale stuff.
You probably wouldn’t use the font below for your blog article, but it works just fine on this image.
Thin sans-serif fonts help you feel light and carefree.
The emotional difference between thin and thick are huge.
Take a look at the following comparison. The image contrasts a tight and heavy font and a light and loose font. Pay attention to how you feel as you view the two:
Let me show you an example of how this works in action.
When you see the thin and whimsical “hi” in the image below, you automatically feel a sense of joyous lightheartedness. And that’s the point. When you feel that way, you become more amenable to accepting the cookie invasion that follows the “I agree.”
6. Listen to the UX people.
Trust me on this one. A good UX designer is worth a million bucks.
If you don’t have one, find one. Why is a UX designer such an awesome asset?
Because this: Conversion optimization is all about usability. If you improve the usability of your website, you improve the conversions on your website. It’s that simple.
It logically follows that a user experience designer will have a perspective on font, and therefore some recommendations for you.
Listen to your UX. If the UX has a penchant for typography, then you’ve found a gem.
Okay, here’s my final word, and then I’ll let you go check out DaFonts.com, or whatever it is you want to do next.
The bottom line is this: Fonts matter for conversion optimization.
Because fonts matter, you should choose carefully, intentionally, thoughtfully, purposefully. And then? Then you test. Split test your font choices so you can go on something a little stronger than a hunch.
You’ll be glad you read this article when you find the best landing page font for you.