Spaced Out (Part 2): Kerning In Typography

Last week, we took a look at tracking, which is the amount of space between letters, and how it is an important part of designing with type. Today, we’re looking at a close mate of tracking called Kerning. While tracking is the overall letter spacing, kerning is selective letter spacing between pairs of letters.

Certain letters, when placed beside each other create an awkward space. We use kerning to increase or reduce that space to make text more readable and more visually appealing. Here’s a few examples of letters which don’t always sit well together.

UnkernedLetters
There are large gaps left between these letters. By kerning the letters in pairs, we can reduce just the space between those letters.

KernedLetters

Kerning in Photoshop and Illustrator

Both Photoshop and Illustrator allow you to kern using Metrics (also known as Auto Kerning) or Optical Kerning. To apply Kerning;

1. Open the Character palette in Photoshop or Illustrator.
2. Select the Type tool and click in between the letters you want to Kern.
3. Choose either Metrics, Optical or a numerical value in the Kerning field on the drop down menu. You can type in your own values in this field if you want to.

OpticalKerning

AutoKerningIllustrator
Auto Kerning in the Illustrator Character palette

Optical Kerning adjusts the spacing between adjacent characters based on their shapes.

Metrics Kerning uses kern pairs. Kerning information for many commonly kerned character pairs, such as LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya, and Yo, is built in to quality fonts. Some high quality fonts may define up to 1000 different kerning pairs, and automatic kerning occurs without having to intervene.

Kerning is most frequently required when text is set in all caps. Take a look at the example below. The text on the top is default text with no kerning. Optical Kerning has been applied on the text underneath, between the letters W and A, and between A and T. The text on the bottom clearly looks better.

Water

Most of the time, you’re trying to even out the appearance of the space between letters, however there are times when extreme kerning or deliberately over-kerning creates special effects with tightly spaced or overlapping characters. Typographic logos depend heavily on good tracking and kerning. Here’s some example of logos using extreme kerning:

FedEx

usa

3m

Have you seen any others?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • serdman

    Nice post Jennifer,

    I was wondering how advisable it is to use <span>’s for kerning in CSS, as in:
    .kerningadjust {
       letter-spacing: -1em;
    }
    <h1>
    <span class="kerningadjust">WA</span>TER
    </h1>