HTML and CSS Reference
Figure 4-35. The resized heading
The new rule specifies the font size as a percentage of whatever size was inherited from the element's
ancestor—160% of 14 pixels in this case, which turns out to be around 22 pixels (22.4 pixels, to be exact,
but a browser will round to the nearest whole pixel).
You can declare font sizes using any of several units of measure: pixels, millimeters, centimeters, inches,
points, picas, ems (one em is the height of a capital letter from top to baseline), exes (one ex is the height
of a lowercase letter from top to baseline), rems (an em relative to the root font-size, skipping inheritance),
or a percentage. You can also declare font sizes using a predefined set of keywords: xx-small , x-small ,
small , medium , large , x-large , and xx-large , or the special relative-size keywords: smaller and
Percentages, smaller , larger , em , rem , and ex are relative units, calculated as a proportion of a size
declared elsewhere. The others are all absolute units: a pixel is a pixel, and an inch is an inch. Some of
these units are less practical than others; you'll probably never need to specify a font size in inches,
millimeters, or centimeters, whereas points and picas are units used in printing that aren't really
appropriate for screen display (though are perfect for an alternative printable style sheet). Most of the time,
you'll probably use ems, percentages, keywords, or pixels for font sizes.
Most web browsers allow a user to modify font sizes to suit their own preference, so any size you specify
in your CSS is more like a suggestion than a command. Always be aware that your visitors may see text
larger or smaller than you originally intended.
Line height is the height of a line of text measured from its baseline to the baseline of the preceding line
(the baseline is the invisible line the text rests on; letters such as g and q have descenders that drop below
the baseline). Don't confuse line height with leading , which is the typographic term for added space
between two lines, measured from the bottom of one line to the top of the following line. CSS doesn't offer
a means to specify true leading, but you can achieve the same effect by increasing or decreasing the line
height of the text.
Returning to the same example, maybe the default line height is a little too close for your tastes. Spreading
those lines further apart will help the eye move through the text a bit more easily, so you could add a