DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

The Shocking Truth About This Little Thing Called Kerning

by Neil Patel

Ever heard of kerning?

You’ve probably read about it. Maybe you can even explain what it is. But do you know how big of an impact kerning can have on your digital marketing efforts as a whole?

Lest you think that I’m making too much of too little, let me explain and give you a few takeaways that could give you significant improvements in your marketing — everywhere that text is present.

What is kerning?

Kerning is the white space between letters.

Here’s one example of one word with various kerning adjustments:

indianapolis

Image Source

That’s it. Kerning is basically how much space is between characters, and how this adjustment affects the ease of reading.

Most Web copy displays fonts that are automatically kerned.

awe

Image Source

Kerning sounds simple, largely because it is. But when kerning is applied over the broad spectrum of variables like font faces, copy blocks, line spacing, etc., it is an issue of enormous significance.

Even Google has a thing for kerning. Here’s a SERP Easter Egg reported by Search Engine Land:

kerning

The difference lies between the kerning adjustment that the SERP displays for the query “kerning” as compared with “typography kerning.”

What impact does kerning have?

Kerning sounds so simple. It’s such a pervasive part of our everyday Web experience. You are experiencing the impact of kerning at this very moment as you look at the letters and words in this article.

Kerning can make or break a message.

Kerning gone wrong makes it obvious why kerning is so important.

Take a look at these examples, and look for the kerning mistakes.

softball

barber shop

shitake mushrooms

christmas lights

finger football

breakfast cereal

bacon brothers

esurance

london transport

greeting card

open for business

Examples from InspirationFeed, and Creativebloq.

As awful as these kerning mistakes are, there are plenty of opposite examples of kerning done right. But the great examples are hard to spot. Kerning is like a pair of great shoes. You are not constantly thinking, “Wow. These shoes are amazing!” But when you wear a pair of cheap shoes, you realize how good you had it with the other shoes.

Good kerning is highlighted by the presence of bad kerning.

Kerning is everywhere.

Every time you see more than one letter or symbol together, you’re seeing kerning in action.

This seemingly little change — a simple presence or absence of space — has such enormous impact in every area of the Web.

Kerning affects readability, and readability affects everything else.

Instapage puts it like this:  “[If] the kerning is too minimal your visitors will find it harder to understand your message…they’ll just mozy on over to some other service instead of squinting their eyes to understand what you have written for them.”

Marketing is about readability. Whether it’s content marketing, landing page optimization, or email marketing — the customer must read your message.

Kerning has an impact on friction.

There are many sources of friction on landing pages and conversion-oriented pages. Friction is anything that gets in the way of a user doing what you want them to do on the page — read it, click something, etc.

The readability of your pages is a significant area where friction can creep up. The reason is simple. If the user can’t read your copy, misreads your copy, has to work hard to read your copy or otherwise stumbles over your copy, then they are experiencing friction.

Not persuaded? Just take a look again at those examples above.

Kerning affects conversions.

You may already know that seemingly tiny changes in web copy can have a major impact on conversions. A little word switch in a CTA, or even the placement of a headline and WHAM! conversions explode by 2,000%!

What about kerning? This is one of those often-overlooked, often-untested, often-forgotten elements of landing page design that may very well boost your conversion rates by a healthy percentage.

What does kerning communicate?

Kerning affects the way we read and, therefore, the way that we perceive certain phrases or words.

Tight kerning creates a strong and secure feeling.

Adidas’s logo uses a very tight kerning, which increases the feeling of strength that the brand wants to communicate:

adidas

UnderArmour also has a very tight kerning in their text logo. This plays strategically into the way that the brand positions itself as a strong and protective performance wear provider.

under armour

One of the most recognized brands, FedEx, uses the same technique. All the letters touch each other. This allows the brand to feature the negative spaced arrow between the E and X.

fedex

The Washington Post combines the power of font face and kerning to create their iconic, classic, and confidence-building logo:

the washington post

Loose kerning creates an airy, fresh, fun, and relaxed feeling.

A difference in kerning, combined with other typographical factors, can completely reverse the whole feel of a phrase, sentence, logo, or headline.

Sunsilk, a hair care brand has loose kerning, which helps contribute to the fresh, easy, airy, and breezy hair look that they want to advance.

sunsilk

HTC’s log is also loosely kerned.

htc

Clear advances their brand objectives by using an open custom kerning for their logo.

clear

Notice how Land Rover’s kerning subtly emphasizes the word “Land” in the logo. The position, shading, and placement of the word provides its emphasis, but kerning does play a role.

land rover

How to learn more about kerning.

The best way to learn more about kerning is to actually experiment with it.

You can try your hand at kerning using Kerntype, a kerning game invented by Mark MacKay.

kern me

The goal of the game is to adjust the letters for the best kerning, as compared to a typographer’s preset solutions. The game features different fonts and words, both of which have a major impact on kerning.

Once you get a few words under your belt, you’ll start to get the hang of kerning, and — more importantly — understand how it impacts your web copy, readability, and even conversions.

Be careful, though. Once you learn about kerning, you can’t unlearn it. Worse, you can’t unnotice bad kerning.

city offices
Image Source

The blog at InspirationFeed tells you how to handle your superior knowledge:

“After you learn about kerning, your life will change. Suddenly you will start seeing uneven spacing everywhere which will most likely irk you. Some people might see you as a snob for bringing it up, but don’t pay attention to them. Just because you know something they don’t, does not make you the bad guy…”

When should you mess with kerning?

Kerning seems like such a minute detail, it’s tempting to just forget about it and let fonts automatically kern themselves.

That’s okay, to a certain extent.

I would argue, however, that the impact of kerning is significant enough to at least test in some situations. Here are a few areas in which adjusting kerning may be a good idea.

Logo

When you go to create your business logo, talk to your designer about kerning. If you’re designing it yourself, then talk to yourself about kerning.

Kerning can change the entire look and feel of a logo, as you saw from the examples above. Ask yourself what mood or feel you’d like to communicate with your logo, and then determine what impact kerning has on that mood or feel.

Landing page headings

Make adjustments to the headlines on your landing pages. A landing page headline is the most important element on the page. If your headline can more effectively gain and attract readers, then your landing page will be that much more effective.

Graphics with text

Graphic design programs give you the greatest amount of control over kerning, and these are places where kerning has a highly nuanced impact. When you bring in the elements of color, graphics, background, etc., kerning increases in significance.

Conclusion

The shocking truth on kerning is this:  It seems so little, but it has a huge impact on every interaction with text on the screen.

Once you grasp the significance of kerning, you can start to make changes:

  • Adjust kerning on your logo to influence the way your brand is perceived, and the attitude or emotion that you want to express.
  • Adjust kerning on headlines to make a bigger impact or enhance readability, increase attention, and even improve conversion rates.
  • Adjust kerning on areas where simple statements or phrases need to have a bigger impact. For example, CTA buttons.

These are big changes. Branding? Landing pages? Conversions? That’s money.

You’ll also be able to spot the tragic occurrences of bad kerning, and put a stop to anything that could damage your brand or copy.

A simple understanding of kerning can produce a major improvement in the way you do business.

Have you noticed the impact of kerning in the way that you do web design or conversion optimization?

Read other Crazy Egg articles by Neil Patel.

4 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Neil Patel

Neil Patel is the co-founder of Crazy Egg and Hello Bar. He helps companies like Amazon, NBC, GM, HP and Viacom grow their revenue.

4 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Junaid Ahmed says:
    February 11, 2015 at 1:46 am

    Well I Knew Already Spacing between Character is Imporant and Fonts look Soft and Attractive But After Reading this Article Now I am All Clear How, When & Where to Use these Kernings
    Thanks Neil for as usual Amazing Post

    Regards

  2. Jacob McMillen says:
    February 7, 2015 at 6:55 pm

    I’ve been wanting to figure this out for an incredibly long time, but I had no clue what it was called. I’ve always noticed how sites like Copyblogger and Quicksprout have such perfect spacing, but I’ve never been able to figure out how to set the spacing on my own websites.

    How do you actually go about adjusting the kerning and line spacing on your website?

    • Kathryn Aragon says:
      February 7, 2015 at 7:06 pm

      Hey, Jacob. I’m not sure how to do it on your website. (It’s one of the reasons you want to use a readable font.) On your graphics, you can adjust kerning in PhotoShop.

Show Me My Heatmap

Ah, @CrazyEgg I really do love you! So useful evaluating how users are interacting with all aspects of our zanerobe.com redesign

Mike Halligan

@MrMikeHalligan