Typography - Pro CSS Techniques - page 205

p {
font-style: normal;
}
em {
font-style: italic;
}
Those of you not schooled in typography may not be familiar with the concept of “oblique”
text. Whereas italicized text contains unique characters separate from the normal, or roman,
version of the typeface, oblique text is simply a slanted version of the normal (roman) font. Few
typefaces contain both oblique and italic variants in their fonts, so user agents are instructed
to obey a set of rules when italic or oblique font styles are requested via CSS:
1. If there is both an italic and oblique version of the face, use the requested version.
2. If there is an oblique face but not an italic face, the oblique may be substituted for the
missing italic. However, the opposite is not true. A user agent may not substitute an
italic font for a missing oblique.
3. If neither is found, the user agent may generate an oblique version simply by slanting
the normal, or roman, version of the font.
The practical uses for oblique type are rare—in fact, it's usually considered in bad typographic
form to substitute an oblique for a proper italic. For this reason, the oblique keyword is rarely
used. If it's italic you want, then it's italic you should specify.
Transforming Text
Oftentimes, a designer will elect to display a passage of type (especially headers or other short
bursts) in all-caps, all-lowercase, or initial caps (in which the first letter of each word is capi-
talized). The text-transform CSS property accommodates these cases. Using only CSS, you
can render text using any of these casing techniques regardless of the case in which the content
appears in the (X)HTML source.
• h1 { text-transform: uppercase; } /* creates all caps */
• h2 { text-transform: capitalize; } /* creates initial caps */
• h3 { text-transform: lowercase; } /* creates all lowercase */
Font Variants
Some fonts also offer variants. CSS offers support for one of these—small caps—via the
font-variant property. For example:
h3 {
font-variant: small-caps;
}