typefaces such as Courier) have variations in the distance between the let-
ters to improve the font’s readability. Kerning allows you to make custom
adjustments to letter spacing — specifically, to bring certain letter pairs
closer together. (Sometimes kerning is used to move letters apart, too, such
as when an italic character “leans” into a close parentheses mark.)
A simple, less effective kind of kerning can be accomplished in CSS using the
letter-spacing property, like this:
<h1 style=”letter-spacing: -0.06cm”>This Headline is Slightly
Squeezed</h1>
Here’s a complete example showing the same headline kerned as well as not
kerned, as shown in Figure 7-1.
<html>
<head>
<style>
h1 {font-size:44px; letter-spacing: -0.12em}
h1.unkerned {font-size:44px; letter-spacing: 0.00em;}
</style>
</head>
<body>
<h1>This Headline is Slightly Squeezed through Kerning</h1>
<h1 class=”unkerned”>This Headline is Slightly Squeezed
through Kerning (Not!)</h1>
</body>
</html>
As you can see in Figure 7-1, when you use a negative value for letter-spacing
(-.12emin this example; em being the width of the letter m), the headline’s let-
ters move together. Traditionally, slightly tightening the space between head-
line letters is considered aesthetically superior to the unkerned version of the
same headline. See if you don’t agree that the bottom headline in Figure 7-1
looks a little too loose at the default letter spacing (0emmeans: no change to
the letter spacing).
Why kern headlines? Because your Web pages look more professional and, in
fact, are more readable. Studies have shown that people don’t read text one
letter at a time. Instead, most readers glance at each word and almost instantly
recognize the shape of the entire word. If you tighten the interior space, you
graphically emphasize that word’s individual shape.
128 Part II: Looking Good with CSS
