Kerning in practice: beware odd letter spacing

Carrie Cousins.
July 30, 2012
KerningWhile kerning of type is a common practice in print design, it seems to be less common in web applications. But it does not have to be. Properly kerned type adds an extra level of professionalism and control to the typography on your site. While there are some software add-ons that can add (or remove) automatic kerning, most designers prefer to manually adjust lettering as necessary. For some text and letter combinations, kerning adjustments are a must. In other situations, it can be unnecessary. Keep in mind as well, that most professional typefaces contain automatic kerning for the most troublesome letter pairs, such as AV. But when do you need to adjust the kerning yourself?

What is kerning?

What is kerning Kerning is the adjustment made to the space between a pair of letters. Kerning only affects the space between the pair and not the overall space between all the letters being typeset. Each letter has two potential kerning partners – the character to the left or the character to the right. Almost any professional-grade graphics software (such as Adobe Photoshop or Fireworks) will allow you to make such adjustments. The kerning icon is typically represented by an “A\V” symbol with arrows above and below the characters. The space widens as the number grows and the space becomes more narrow as the number decreases. Kerning adjustments for web design are more uncommon than in print design because making changes is not particularly easy. That being said, it still should be a consideration because of the influence it has on overall design. In kerning the look you are trying to achieve may vary, but generally the hope is to more evenly distribute letter spacing so that the spaces between each set of letter pairs is consistent with surrounding pairs.

Kerning vs. tracking

Kerning and tracking are not the same thing. While kerning refers to the space between two specific letters, tracking refers to the overall letter spacing in a selection of letters. Tracking is used to create a more uniform space adjustment between letters and groups of letters (even entire paragraphs or documents) can be adjusted with a single tracking change. To further complicate matters, a designer can first adjust the tracking of a block of text and then go in and adjust kerning to improve the overall look of the text. But you want to make sure to adjust tracking first, then adjust kerning. Working the other way around will most likely negate your kerning changes.

Metric, optical and manual kerning

Types of kerning There are three different options for how to kern type – metric (or auto), optical and manual. Metric or auto kerning is software defined. The designer has the least control over letters when using metric or auto kerning and the result can sometimes cause odd shapes between letter pairs, such as creating too little space in one instance and too much somewhere else within the same word or phrase. Optical kerning uses the shapes of letters to determine what space will appear between them. Optical kerning has some level of control to it but will not space letters as precisely as doing it by hand. This can be a great option though when mix-and-matching different fonts in letter pairs. Manual kerning is the preferred option for most designers and typographers. When kerning type manually, the designer alters the space between each pair of letters by eye. The process can be time-consuming when dealing with large blocks of text and is best employed when working with large, display-style type. Using manual kerning is especially important when working with custom or even freebie fonts, which do not always have some of the more advance letter-spacing techniques applied to them when they are designed.

Manual kerning tricks

Kerning trick When you are trying to determine kerning by eye, it always helps to have a few tricks at your fingertips.
  • Flip your design upside down to better judge the spacing between each letter pair without your eyes trying to read the words.
  • Kern in three-letter blocks by highlighting or coloring three letters at a time. This way you can compare spacing one pair at a time.
  • Blow it up. Double the point size of your type so you can really see the space. Is it bothersome? Kern it.
  • Opt for a combination of upper- and lower-case letters. Caps pairs are some of the worst kerning offenders.

What letters need kerning? It is not a trick question. While many designers like to play with the kerning in almost all display type and are even more particular about kerning in items such as logos, not all letter pairs really require kerning adjustments. However take note of the “AW” in awards above. A manual kerning adjustment was required to make those letters pair so perfectly. The first step is to select a font. There is little use in making kerning adjustments until your typeface is determined. Each typeface will require different kerning adjustments and what works for one font may not work for another. The type of fonts you select will also have an impact on kerning – you will especially want to think about how ligatures may be affected by kerning changes. Trapped spaces After that, look at the letters with the most slant in individual strokes and letters that contain trapped spaces. (To see if your letter creates trapped space, draw a rectangle around it and take note of all the larger spaces inside the box that are not part of the letter. There are letter combinations that almost always need some kerning adjustment. (Note the combinations are case sensitive.) This list can grow significantly with certain typefaces. AV AW VA AF AP AT FA Fa Fe Fo LV LW Ye Va Wa

Tight kerning

Adidas FedEx It is more common (and usually easier to spot) when letters are kerned too tight. In the case of serif fonts the edges may touch in some letter pairs but not others, resulting in an obvious kerning problem. Letters can be pushed together and still be effective. Particularly when used sparingly, tight kerning can create a marriage of letters with great impact. The tails of serifs may reach out to adjacent letters or sans serifs may be packed together for a tight, massive look and feel. Think about the FedEx logo. It is one of the most famous uses of tight kerning techniques in the world. Adidas also does a great job kerning text on its website – check out the marriage of “ft” in crafted.

Loose kerning

Crayons to concept Whitmans Loose kerning can also be somewhat obvious, but is sometimes a little harder to spot. When dealing with capital letters gaping spaces seem to almost jump off the screen but the effect is harder to spot in pairs where a lowercase letter follows an uppercase letter. Loose kerning is often used in groups of capital letters to help create space and a feeling of openness. Looser kerning is also used more frequently when working with larger type sizes. The key consideration to keep in mind when working with loose kerning specifications is word spacing. You want to ensure that readers can determine which letter-groups form words and where each new word begins.

To kern or not to kern

Kerning really has fallen out of fashion somewhat in the design landscape, but you need to kern. Yes, it can be tedious but plan to spend that time right from the beginning of your process. It is time well spent if you spend it wisely: focus on big letters and words. There is really little reason to adjust kerning (especially manually) on large copy blocks. There is probably little reason to adjust kerning for subheads or small titles within blog posts either. Reserve that time to work on your big words, logos and banners. As a general rule, spend time kerning any type that will draw in people to your site. Pay attention to the big words but also pay attention to the standing elements in navigation bars and in rails. Spend less time kerning larger type blocks, such as the text used to create this post. If you feel that kerning is necessary, consider optical kerning to save some time.

A little kerning fun

KERNTYPE Designer Mark MacKay developed KERNTYPE: A Kerning Game, where you can move letters and compare your results to that of a professional typographer. The game is fun and can help you develop your eye for what makes type work and how kerning really impacts the overall look of letters. Try it out. The application works online and as a touch-friendly iPad game.


Kerning should not be viewed as a lost art form or something that only matters to print designers. Using proper kerning techniques can add to the overall quality of almost any web site. Think about the message you are trying to convey as you kern type and look at the letters to remove and avoid unintentional letter associations. Finally, play a little. Put together different letter combinations in a variety of typefaces until you find combinations that are visually pleasing.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…