Chapter 4
line-height declaration to your CSS rule for the body element, as you see in Listing 4-49. Every other
element on the page will also inherit this value.
Listing 4-49. Adding a line-height declaration to the body rule
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
You can specify line-height with a unit of measure, the same as you would for font-size, or omit the
unit entirely and the value will be a proportion of the element’s font-size. A value of 1.5 means the line
height will be one and a half times an element’s font size, whatever that size happens to be. You could
achieve the same effect with the value 150% or 1.5em, but even proportional units can sometimes lead to
tricky inheritance issues down the line.
You can see the result in Figure 4-36—each line of text has a bit more breathing room.
Figure 4-36. Each line of text gets a little more white space by increasing the line height
A unitless line-height will always be proportional to the current element’s font size, not
the font size of the parent element. For a more in-depth and nerdy look at unitless line-
heights, see Eric Meyer’s appropriately titled article, Unitless line-heights
(meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights)
Shorthand for Fonts
In addition to font-family, font-size, and line-height, there are a number of other CSS properties
that apply to typography. The font-weight property specifies whether the text is bold, light, or normal, or
for some typefaces (and browsers that support it), even a level of boldness. The font-style property
specifies normal, italic, or oblique text. The font-variant property specifies normal text or small-caps.
You can declare all of these properties separately, of course, but that can make for lengthy declaration
blocks. Instead, you can condense them to a single declaration with the shorthand font property. This
