HTML5 24-Hour Trainer

Chapter 7. Styling Text with CSS

One of the key assets in the designer's toolbox is typographic design. Compared to print, the Web is limited in what can be done with typography — however; you do have a fair amount of leeway with the available CSS properties. In this lesson, you learn how to style your text with specific fonts, sizes, colors, and alignment.

PICKING YOUR FONT FAMILY

As noted earlier, web text is more restricted than print text, especially when it comes to the fonts available. In all but the most recent browsers, you have to use a font that is common across operating systems. This means that if your site needs to be moderately backward-compatible, you have fewer than 30 fonts from which to choose for your web designs versus tens of thousands in print. To make sure that your site visitors see a font as close as possible to your ideal, use the CSS font-family property.

With the font-family property, a series of fonts can be assigned as values in a comma-separated list, like this:

font-family: Arial, Helvetica, sans-serif;

When a browser renders text with the preceding CSS declaration, it first tries to use the initial font listed, Arial. If that font is not found on the user's system, it tries the second font, Helvetica. Should neither font be available, the text is displayed with a generic sans-serif font. If the font name includes a space, the typeface must be surrounded by quotes, like this:

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Note

Whenever declaring ...