HTML and CSS Reference
In-Depth Information
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