CSS Mastery摘要(3)--Web Typography

<p>The <strong>Moon</strong>…[etc]</p>
We saw the high-level view of inline formatting in Chapter3. Each line of text generates aline box. This
box may be further split in to several inline boxes, by representing inline elements (like the<strong>element
in this case), or the anonymous inline boxes in-between them.
Text is drawn in the middle of the inline boxes, on what is known as the content area. The height of
the content area is the definition of the font-sizemeasurement—behind the end of the word “Moon” in
Figure 4-5, we see a1em× 1emsquare, and how it relates to the size of the glyphs themselves. The traditional
typographic term “em” that gave the em unit its name has its origins in the size of the uppercase letter “M,”
but as we can see, this is not a correct definition in web typography.
The upper edge of lowercase letters such as “x” determines what’s known as the x-height. This height
can vary significantly between typefaces, which explains why it’s hard to give a general recommendation
around exact font sizes—you need to test with the actual font to see what the perceived size is. In Georgia,
which we’re using here, the x-height is rather tall, making it appear larger than many other fonts at the same
font-size measurement.
The actual glyphs are then placed as to appear vertically balanced somewhere inside the content area,
so that each inline box by default aligns on a common line close to the bottom, called thebaseline. Glyphs
are not necessarily constrained by the content area either: for example, a lowercase “g” could stick out
underneath the content area in some fonts.
Finally, the line height defines the total height of the line box. This is more commonly known asline
spacing, or in typographic terms, leading(pronounced as “ledding”) due to the blocks of lead typesetters
used to separate lines of characters on a printing press. Unlike in mechanical type, the leading in CSS is
always applied to both the top and bottom of line boxes.
The font-size is subtracted from the total line height, and the resulting measurement is divided in two
equal parts (known as half-leading). If thefont-sizeis 21px and theline-height is30px, each strip of halfleading will be4.5pxtall.

In addition to line-height, inline boxes can be affected by thevertical-alignproperty. The default value
is baseline, which means that the baseline of the element will align with the baseline of the parent.

Changing the space between words and individual characters is often best left to the designers of the
typeface. CSS does allow you some crude tools to change this though.
The word-spacing property is seldom used, but as you can probably guess it affects the spacing
between words. The value you give it specifies how much to add or take away from thedefaultspacing ,
decided by the blank space character width in the current font.

Similarly, you can affect the space between each letter with theletter-spacingproperty. On lowercase
text, this is generally a bad idea—most typefaces are designed to let you recognize the shapes of whole words
at a time when reading, so messing with the spacing can make text hard to read. Uppercase (or small-cap)
glyphs are much better suited to interpret individually, like the case with acronyms. A little extra spacing can
actually make them easier to read.