h1 {font-family: “Arial Black”; font-size:48px; letter-
spacing: -.06em;}
h1.normal {letter-spacing: normal; font-size 48px;}
.kern {letter-spacing: -0.20em;}
.ultrakern {letter-spacing: -0.26em;}
</style>
</head>
<body>
<h1 class=”spaced”>This Headline is Slightly Squeezed through
<span
class=”ultrakern”>Ker</span><span
class=”kern”>ning</span></h1>
<br>
<h1 class=”normal”>This Headline is Slightly Squeezed through
Kerning (Not!)</h1>
</body>
</html>
If you prefer, you can use the line height property instead of the fontsize
/backslashtechnique illustrated in the code example just above. The line-
heightproperty can take all the usual CSS units of measurement such as px,
em, percentages, and so on. Here’s an example:
h1 {font: bold 48px “Arial Black”; letter-spacing: -.06em;
word-spacing: -.46em; line-height:48px;}
Figure 7-7:
Adjusting
line spacing
also helps
improve
the appear-
ance of
headlines.
134 Part II: Looking Good with CSS
