Can typography really make a difference to eCommerce conversions?

By
14 Aug 2014

When designing an eCommerce website you’re bound to spend some time choosing the fonts you want to use. Often this approached purely as a design question: using typography to create something attractive or ‘easy on the eye.’ 

But is there more to it than that? Could the choices you and your eCommerce design agency make have a positive or negative effect on conversion rates and the revenue your site generates?

The simple answer is that typography effects conversions: fundamentally! Sometimes typography works in a subtle way by establishing an appropriate and appealing mood or image. It adds additional layers of meaning to your words.

Sometimes it’s a more straightforward, user experience issue: displaying content in a way that makes life easy for your customers - helping them understand what you’re offering and what you want them to do.

There’s no magic formula for getting it right. But there are some creative and technical considerations that you definitely need to understand if you want your eCommerce solution to perform as well as it should.

Good typography creates an emotional connection with your customers – but only if you really understand who they are and what will appeal. And beware of overdoing it. In your desire to look funky and off-beat you could end up with a bewildering mess; solid and respectable could end up just plain boring and unappealing.

What you like isn’t the issue

We all have personal preferences when it comes to fonts. Designers have their pet font combinations and so do business owners and marketing managers. What really matters is understanding who you are trying to attract; which fonts will they find appropriate and attractive given the nature of your business? Context is everything.

Get this bit wrong and visitors can end up with the uneasy feeling that somehow they’re in the wrong place. Get it right and you’ve passed the all-important first impressions test; step one towards building confidence that you’re the right people to trust with their business.

In short, your choice of fonts has a meaning. One that will be interpreted (possibly subconsciously) by site visitors.

Don’t think that type style affects the meaning or the impression a word creates? Have a look at these:

Typography_1-01

The same word, but think how different they feel

Typography is a statement of your values

Good typography creates an emotional connection with your customers – but only if you really understand who they are and what will appeal. And beware of overdoing it. In your desire to look funky and off-beat you could end up with a bewildering mess; solid and respectable could end up just plain boring and unappealing.

The most dangerous effect you can create is discord between what the words mean, the meaning or mood implied by the typeface, and the values you want to convey. Can you imagine this not affecting conversion rates?

Typography_2

So, fonts are neither good nor bad in their own right – only in the context in which they’re being used.

What do fonts say?

The choice of font, particularly for body text really has to be a reflection of the image you want to portray. But you also need to bring in other considerations such as readability. A sans serif font like Helvetica or one of its derivatives can convey solidity and dependability.

The accepted theory, however, is that serif typefaces are easier to read for large blocks of text, which is why they are used in books. To some, though, they can look a bit old fashioned and it’s certainly more common to used sans serif fonts used for body text on websites. And, in any case, large blocks of text are not a great idea when you’re publishing on line.

I’ve got a big box of fonts – and I’m going to use them!

In almost every case two fonts are plenty: one for display (headings, CTAs etc) and one for body text. And usually it’s best to have a contrast such as putting sans serif body text with a serif display font. I’m saying usually because ultimately all rules are made to be broken. It just saves time when you know what the rules are and it helps to know when you’re breaking them.

Using several fonts just because you can is disorientating and won’t help with conversions. Also, some fonts such as 'Intro' were designed specifically to be used for headings and are often hard to read in body text. 

An uncoordinated mish-mash of fonts is usually a sure sign that somebody got their mate or nephew ‘who knows a bit about building websites’ to design their site.

These days, web designers have an extraordinary variety of fonts to choose from using services like as Typekit, Google Web Fonts, and FontDeck. There’s no reason for compromise when it comes to finding the fonts that will work hardest for your clients.

The default size at which your text is displayed is also important. As a general rule, a minimum of 14pt body text, is usually suitable for a laptop or tablet screen. For mobile screen widths it’s often a good idea to increase this slightly in your responsive website design.

Typesetting skills

Back in the days of metal type, typesetting was a highly skilled trade. A great deal of thought and experience went into adjusting type to make the finished print attractive and readable. As desktop publishing and on-line publishing have become more popular the understanding of how type can be fine-tuned to improve its appearance has become neglected.

The space between lines (leading), universal spacing between characters (tracking) and spacing between individual pairs of characters (kerning) all make a significant difference to the visual appeal and readability of your content. If you want to be the best designer you can possibly be then you need to master these adjustments.

Kerning is the only really tricky one as you have to adjust the tags of the individual characters. The other two you can control easily using CSS.

Typography_3

The average viewer of your eCommerce site isn’t going to say: ‘I think they’ve not set the tracking properly here,’ or ‘what are they playing at with that leading?’ But they may well be left with a sense of it being a bit amateurish or unfinished, without really understanding why. I wouldn’t underestimate how important this is. It’s all about the confidence and trust we’ve discussed many times and their importance in improving conversion rates.

Paragraph spacing also needs attention. Using a carriage return to put a space between paragraphs can leave blocks of text floating in too much space. My general rule is to use paragraph spacing of approximately half of the line height.

One further bugbear with typesetting is when sub headings seem to float around in the mid-space. Again, use the paragraph rather than the line spacing. It just looks a lot neater.

Columns

So too with columns. How you set your columns makes difference to the feel and the appeal of your web page. 

Setting columns to fully justified, ragged right or ragged left has a significantly different visual impact. This can reinforce (or undermine) the values you want to convey with your font choice and makes a huge difference to how appealing your content appears. 

However pleasant it may look from a design point of view, text laid out in broad columns is hard to read. To the point where visitors to your site might not even bother trying. Setting column widths to anything more than 80 characters is really just asking for your content to be ignored. Again, if people find it hard to read your content you have less opportunity to persuade them to buy.

Typography_4

 

Hierarchy and user experience

Typography also helps people identify the relative importance of different pieces of information and the relationship between them. This is why search engines look at H1 tags to try to understand what your site is about.

We’ve already discussed the most basic level of hierarchy: distinguishing between display and body text. But there are further levels of hierarchy you can indicate using variations of your fonts based on weight, colour and position all the way down to H6. 

Again, it’s much more than making it look attractive. A clear progression of emphasis or prominence in your headings will help people understand the relationship between the information you are presenting. They will see things in a logical sequence and you can help guide them through the conversion process.

Typography_6

Colour

The final consideration is font colour and how this helps determine the things people look at and in which order. Generally, a warm red will stand out. Cooler colours will tend to fade into the background. So the balance of type colour and weight on a web page determines how somebody’s eyes will move across the screen. You can see the impact of this clearly using eye-tracking research.

And colours don’t always work in the way you might expect. Some time ago Hubspot performed an experiment using green and red CTA buttons. Given that we commonly associate red with danger and stop lights you might be surprised to find that the red button out-performed the green one by 21%.

I’m not sure why this result happened. I suspect it might stem back to the research carried out into print advertising that showed people ignore white copy reversed out of a black or dark background. Perhaps white text on a neutral coloured button just doesn’t get noticed, whereas a block of red did? Maybe the added urgency of the red button makes people click on it?

Before you go and change all of your CTA buttons to red I’d suggest doing some A/B split testing of your own first. And ultimately, this is the best way to test whether all of your typographic decisions are having the effect you expected and whether your choices of fonts, colours and weights are doing all they can to maximise your eCommerce revenue.

Effective eCommerce web solutions involve so many inter-related factors that testing has to be the cornerstone of your approach. This is certainly true of typography.