HTML and CSS Reference
In-Depth Information
any unit can be used, the
line-height
property is unique in that it can be specified without
a unit. When this is done, the value is taken as a scaling factor based on the font size of the
element (whether inherited or stated explicitly). For example:
p {
font-size: 10px;
line-height: 1.4; /* evaluates to 14px /*
}
p {
font-size: 10px;
line-height: .8; /* evaluates to 8px /*
}
A few basic leading rules go like this:
•
Blocks of text almost always require positive leading. Text rarely reads well in blocks set
solid (i.e., no leading) and almost never reads well in blocks set with negative leading.
•
Darker (or heavier) faces need more lead than light ones. If you are using boldfaced
text, or you are simply using a heavy typeface (such as Arial Black or Impact), you will
likely need more leading than when you use lighter typefaces.
•
Sans serif typefaces often require more lead than serif typefaces.
•
Longer measures require more leading. Shorter measures require less leading.
Kerning
In typography, kerning is the process of adjusting the space between certain combinations of
letters so that a “limb” of one projects over or under the body of another. This is common in
certain letter combinations, such as “To” or “VA.” Kerning at this level is not possible via CSS
(and usually unnecessary anyway, as common kerning pairs are generally built into most
modern fonts). However, CSS does provide a
letter-spacing
property that adjusts the spacing
between all characters. Positive values will cause letters to be further apart and negative values
will cause letters to be closer together. For example:
p {
letter-spacing: -.05em;
}
Although this property can occasionally be used effectively in setting headers and other
short bursts of text, it's not often useful for blocks of body text.
Text Alignment and Justification
The CSS property
text-align
handles horizontal alignment of text. Possible values include
left
,
right
,
center
, and
justify
. If
left
or
right
is specified, the text will be set flush to that
size, producing a “ragged” edge on the opposite side. To set text “ragged right,” use
text-align:
left
. If you want text to be centered, use the
center
value. For example:
