From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

The most common way that Cascading Style Sheets are used is to change the font of a Web page or site. But in order to get the most out of the style sheets as well as the fonts, you should know a little about typography and how CSS works with fonts.

The Font Families

Cascading Style Sheets (CSS) recognizes five font families:

1. Serif
2. Sans-serif
3. Script
4. Monospace
5. Fantasy

These categories or master families are considered generic families because they do not refer to any specific typeface. If you use these cateogory names in your CSS, the browser will choose the typeface that is the default for that category on that computer.

Each category has many different typefaces that are a part of the family. I've put up a graphic to show examples of the different typefaces for each category.

Using the Categories

When you're going to build a CSS call to define the typeface of your elements, you should keep the above categories in mind. They are each suited to different uses, and it's better not to mix them in a style call.

• Sans-serif fonts should be the basis of your Web content. They are easy to read online and there are many that are common to most computer operating systems.
• Serif fonts are best used in print style sheets because serif fonts can be difficult to read on computer monitors, but they make printouts much easier to read.
• Monospace fonts should be used when the spacing of the content is important - such as with pre-formatted text. Another common use of monospace fonts is to display code or other technical details.
• Script fonts are best used as signatures or other locations where the look of cursive handwriting is desired. Keep in mind that not all computers have the same script fonts defined, so it's a good idea to define an alternate sans-serif font as a backup.
• Fantasy fonts are best used for headings and artistic text. However, they are the least common of all the categories, so unless you know that all your readers will have the font on their system, it is best to have a sans-serif alternate in your font list.

Building Your CSS

Because it's impossible to know the exact setup of every person who visits your Web page, it is very important to write CSS that is flexible, but still presents the basis of the design you want. This means, that when defining the typeface to display, always use a list of fonts, with your preference first, and the most generic last.

Define the typeface using the font-family style property. Some possible style listings:

• sans-serif body copy
  body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; }
• serif body copy for print
  body { font-family : "Times New Roman", Times, serif; }
• monospace for code segments
  code { font-family : "Courier New", Courier, monospace; }
• script for address or signatures sections
  address { Corsiva, "Lucida Handwriting", script;
• fantasy for initial paragraph lettering (defaulting to sans-serif if my fantasy font isn't available)
  p:first-letter { "Comic Sans", sans-serif }

Some Things to Note:

1. Always define your preferred font first in the list.
2. If a font has a multiple word name, put it in quotes.
3. Always define the families you'll be using before deciding on specifics like size, actual typeface, or other type options.