Understanding baselines ..................................................................
The line-heightproperty specifies the distance between the baselinesof
the lines of text. The baseline is an imaginary line on which the characters
rest. Note that this is the line on which the majority of the characters rest. In
other words, a few characters have descenders— parts of the character that
go below the baseline — such as p, q, y, g and so on. These descenders are
ignored when establishing the baseline. Flip ahead to Figure 7-10 for a look at
descenders.
CSS3 Introduces Kerning Mode .................................................................
If you find hand-kerning more trouble than it’s worth, perhaps you’ll want to
wait until CSS3 properties are available. A new kerning-modeproperty is
part of the CSS3 draft resolutions. You can use the pairvalue with this prop-
erty to remove space between letter pairs known to have “extra” space, such
as Keor Yo. A kerning pair threshold property specifies at what font size you
want pair kerning to begin taking effect. Remember that kerning is generally
only useful for large font sizes (headlines primarily). An autovalue for this
proposed kerning pair threshold property lets the browser decide when kern-
ing should be used; an initialvalue allows you to specify the font size at
which the kerning activates. However, unless this proposed automatic kern-
ing property is finely tuned to each different typeface, and to each font size,
I doubt it will be able to approach the quality of hand-kerned headlines. And
hand kerning isn’t all that much trouble, is it?
Word spacing ...............................................................................................
The word-spacingproperty, like letter-spacing, can be used to create
justified text (aligned on both the left and the right sides). However, Web
designers can make good use of it for a kerning effect on headlines to reduce
unneeded white space between words.
Here’s an example that reduces the spaces between words by .56 em:
<html>
<head>
<style>
h1.kernSpaced {font-family: “Arial Black”; font-size:48px;
word-spacing: -.56em;}
Chapter 7: Styling It Your Way 135
