Kerning: The importance of space between letter pairs

by: Tim Donahue of CoolHomepages.com

Kerning – the lowdown:

Kerning is the space between letter pairs. When you set type in any pro-grade graphics program (like Photoshop, Fireworks, etc.), you have the ability to alter the space between letter pairs, making minute adjustments until your type looks just right.

What's that you say? "It looks fine without adjustments of the space between letter pairs?" Put down those pork rinds and pay close attention Cletus...I'm going to enlighten you.

Proper kerning is, in my opinion, the single biggest thing -- and the first thing I notice, that separates the work of professional designers from that of 'apprentice' or 'wanna-be' designers.

The amount of empty space between letter pairs 'wants' to be equal, and that's the goal of hand kerning your type. Your mind reads the words your eyes see. When there is visual and spatial continuity between all the objects (letters) it's easier to read, the better things look, and the more you can concentrate on the meaning of the words, rather than the minute 'visual hitches' that are created by poor kerning.

The fonts you use have information about spacing between letter pairs embedded in them normally. If they don't have that info, the graphics program handles the spacing between letter pairs. Sometimes the graphics program and the letter pair spacing data both fail you, and it's up to you to fix that.

Let's get moving before we lose consciousness!

First, what's a 'letter pair'? A letter pair is two letters, like 'go' or 'th', or 'si', etc. No hidden meaning.
Second, are you the most anal designer ever? Is kerning some kind of joke? Are you kidding me? Gosh no. It almost sounds like a joke if you're not yet tuned-in to what good and bad kerning looks like, but once you get it, you'll be appalled at all the bad kerning that you see everyday. And it's not just designers who see this -- the average untrained person can tell the difference intuitively and subconsciously, even if they can't tell you why one set of letters looks better to them. So you're not just making these adjustments for your designer-weenie friends. You're doing what the high-paid and serious professionals do. Most of the time, the spacing between letters is fairly good. But about 15% of the time, it's not so good and there's too much or too little space between letter pairs, and this is what we need to adjust.		Some letter pairs have too much space between them, while others don't have enough.
The how's and why's of Kerning: The basic idea is to look at the dead space, or empty space between each pair. If that space had volume, then the amount of volume between every pair should be about the same -- which is to say that the amount of empty space should be about the same. Some letters naturally create more or less empty between themselves and their neighbors due to their shape. The letter pair "Ci" has more space than the letter pair "Ce" because the "e" is rounded and fills in that empty space more. Same with "oo" versus "lo" for instance. So we need to adjust the spacing using the TRACKING or KERNING setting in our graphics program.
Adjusting kerning in Photoshop and Fireworks Photoshop and Fireworks allow you to use keyboard commands to adjust the kerning which is very helpful -- I suggest you get used to doing it this way. In Photoshop the command is "Option-left/right arrow" and in Fireworks, the command is "Command-left/right arrow" (these are for Mac --- PC people, you can figure it out I'm sure). Set the cursor BETWEEN the two letter pairs you wish to adjust -- or in some programs you select or highlight the two letter pairs and then make the adjustment. Note: Capital letter forms are the biggest offenders -- pay extra close attention to kerning your caps.		Use "Option + right/left arrow" in Photoshop to adjust letter pairs. Use "Command + right/left arrow" in Fireworks.
Examples: Good and Bad Kerning Here are some examples of poorly kerned type, and nicely kerned type below. Now go out and find those kerning errors kids! Your eye will naturally see these errors without close scrutiny after a little while -- it doesn't take long once you get used to looking at kerning.
Some general rules for good typesetting: 1. Some font faces are intended for larger display type. Don't use them for body copy. 2. Don't mix too many type faces on one page. 1 or 2 is good. Maybe 3. 4 is really pushing it. 3. Don't use heavy tracking on lowercase words. It's OK for effect on uppercase letters, as in: c   o   o   l   h   o   m   e   p   a   g   e   s           doesn't look too good, C   O   O   L   H   O   M   E   P   A   G   E   S           looks reasonable. 4. Some font faces fall apart and look terrible at sizes lower than 10 or 12 points. Use fonts that scale well below about 10 points. 5. Make sure there's enough contrast between the type color and the color the type is sitting on (the background color) and that these two colors don't 'fight' with each other, the way overly saturated colors do sometimes, like bright red and bright green. 6. When setting bitmapped type, avoid 'widows'. A widow is a word that wraps to the next line and ends up alone on the line. 7. Use a type face that is appropriate to the information you're conveying or the subject matter. If you're running a Nine-Inch Nails site, Helvetica is a bad choice for your big Nine Inch Nails heading. Conversely, if you're running a mass-consumer portal, a heavy English script would be a poor choice. ...and some more tips from About.com's site: Choosing Fonts #1 When in doubt, pair a serif font for body text and a sans serif font for headlines. Choosing Fonts #2 Avoid mixing two very similar typefaces, such as two scripts or two sans serifs. There is not enough contrast and the small differences will cause a visual clash. Choosing Fonts #3 Limit the number of different typefaces used in a single document to no more than three or four. Choosing Fonts #4 Avoid monospaced typefaces for body copy. They draw too much attention to the individual letters distracting the reader from the message. Setting Type #1 Avoid setting type in lines of more than sixty-five characters. Longer lines cause the reader to "double," or read the same line twice. Setting Type #2 Avoid setting type in lines of less than thirty-five characters. Shorter lines cause sentences to be broken and hard to understand. Setting Type #3 Apply the alphabet-and-a-half rule to your text. This would place ideal line length at 39 characters regardless of type size. Setting Type #4 Apply the points-times-two rule to your text. Take the type size and multiply it by two. The result is your ideal line length in picas. That is, 12 point type would have an ideal line length of 12x2 or 24 picas (approx. 4 inches). Setting Type #5 Avoid setting type in all capital letters. Capital letters slow reading speed and take 30 percent more space than lowercase letters. Type Size #1 For a predominantly older readership of 65 and over or for audiences with known visual handicaps, set body text in sizes from 14 to 18 points. Type Size #2 Use 11 to 12 point type for readers in the 40-65 age range. Type Size #3 For most general audiences, body copy set at 10 or 11 points is good. Type Size #4 For beginning readers of any age, a larger type size around 14 points is good. Type Size #5 Keep headlines between 14 and 30 points in most cases, keeping in mind that the closer in size to the body text, the harder it is to distinguish headlines from other text. Type Size #6 When you're choosing slides for a presentation, spread them on a light table and toss out any that have type too small to read with the unaided eye. Initial Caps Avoid placing initial caps in the lower one-third of the page. Kerning Round characters can be kerned more than straight characters.

About the author:

Tim Donahue has been involved in web development and graphic design for 'oodles' of time, to be exact. Tim runs CoolHomepages.com and WebProsNow, and has been employed as VP of Creative Production, Creative Director, Art Director and Senior Designer for a variety of startups.