As with letter and line spacing, you can use any CSS unit for specifying word
spacing. However, em is usually the most reliable if, for some reason, another
font is substituted by the user’s browser. The em measurement is the most
accurate average character size measurement for most fonts.
You probably want to apply kerning, line space reduction, and word space
reduction all at once. This next example does just that, as shown in Figure 7-9.
<html>
<head><style>h1.spaced{font: bold 48px/1.1“Arial Black”; letter-spacing:
-.06em; word-spacing: -.46em;}h1.normal {letter-spacing: normal; font: bold 48px “Arial
Black”;}.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>Notice the line that defines the spacing adjustments:
h1.spaced{font: bold 48px/1.1 “Arial Black”; letter-spacing:
-.06em; word-spacing: -.46em;}You want to fiddle with the line spacing (the /1.1in this example) and the
letter and word spacing values until you get just the look you want. Don’t
forget that the quickest way to edit and then view the results is achieved by
following these steps:
- Write your code in Notepad.
- Press Alt+F+S.