untitled

This attention to letter spacing may seem like a bit of trouble — and it is —

but if you want your headlines to look better, effective kerning is the key. Of

course, you should specify the font size, and perhaps even the font face, to

ensure that the results the user sees are the same that you see when kerning

the headline. You need not kern every headline, but larger typesizes in partic-

ular benefit from a bit of tightening.

If some of the characters in a headline look too loose to you, you might want

to take the time for a little manual adjustment. Kerning is often particularly

effective when a capital letter overhangs a lowercase letter, the way the K

overhangs the ein Kerning. Without kerning, there’s an unseemly gap

between the letters, as shown in Figure 7-4:

Switch now to a sans serif font like Arial to see the effect on a typical headline

typeface:

<style>

h1 {font-family: “Arial Black”; font-size:48px; letter-

spacing: -.06em}

h1.normal {letter-spacing: normal}

.kern {letter-spacing: -0.20em;}

.ultrakern {letter-spacing: -0.26em;}

</style>

Ultra kerning ......................................................................................

Notice that I had to adjust the value for the .kern class to .20emwhen moving

to this different font (compare the code in the previous example, which was

Figure 7-4:
When
uppercase
letters
overhang
lowercase,
kerning is
especially
helpful to
improve the
appearance
of the text.

Chapter 7: Styling It Your Way 131