HTML and CSS Reference
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
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 ini-
tial 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;