CHAPTER 10 ■ STYLING TEXTFont
Problem You want to style text using a font and various font attributes.^
Solution What we call a “font” is actually a set of fonts designed to work together to create normal,
bold, italic, and small-cap effects. CSS calls this a font family. When you set font properties,
the browser and the operating system choose a font from the font family that most closely
matches your request. If your requested font is unavailable, such as a small-cap serif font,
the operating system chooses the closest font and simulates the requested font.
A font has two other important attributes: color and case. A font can be rendered in any
color, but some fonts can’t render certain cases. For example, some fonts have only
uppercase characters, and most fonts don’t have small-cap characters, which are small
uppercase characters.
CSS has seven properties that style the font in which text is rendered.
Use font-family to direct the browser to select a font from a comma-delimited list of
fonts. If a browser can’t find your first choice, it attempts to find your second choice, and so
forth. The last font in the list should be one of the standard font-name constants: sans-
serif, serif, or monospace. You should place the font name in quotes if it contains spaces.
Use font-size to size a font. You can use ems or a percentage when you want a size
relative to the font size of an element’s parent. You can use one of the built-in constants
such as xx-small, x-small, small, medium, large, x-large, or xx-large. You can use pixels
when you want a specific size, but you can’t count on this size in your layouts because a
browser increases or decreases font sizes when zooming in or out for a user. Also be aware
that Internet Explorer 6 can’t enlarge fixed-size fonts when zooming in, which causes
accessibility problems.
Use color to set the color of the font, which should contrast with the background-color;
otherwise, text will be hard to read or invisible. You can use font-style:italic to make the
text italic. You can use font-weight:bold to make the text bold. You can use text-
transform to change the text’s case to lowercase, uppercase, or capitalize. You can use
font-variant:smallcaps to render the text in small caps. You can simulate small caps by
shrinking the font size to 0.8em and using text-transform:uppercase.
Pattern SELECTOR { font-family:FONT,FONT,etc; color:COLOR; font-size:+VALUE; font-
style:NORMAL_ITALIC; font-weight:NORMAL_BOLD; font-variant:NORMAL_SMALLCAPS;
font-transform:LOWERCASE_UPPERCASE_CAPITALIZE; }
Location This pattern applies to any type of element.
Tip Because font-size is inherited, you can assign font-size:small to
and usepercents or ems to scale the font-size as needed.
Related to Inline Decoration (Chapter 11); Vertical-aligned Content, Subscript and Superscript, Nested
Alignment (Chapter 12); Dropcap design patterns (Chapter 18)