Next / Previous / Contents / TCC Help System / NM Tech homepage

10. Font properties

First, let's define some common terms:

Attributes of a font include:

One of the problems of Web page design is that you can't assume that any given font exists on any given reader's system. For this reason, it is best to specify a set of fonts, listing your preferred fonts first, but also providing more generic alternatives for systems without your favorites.

The section below lists some of the CSS font properties.

10.1. The font-family property

This property enumerates the font family or families that you want. You can use specific font names or one of the generic font names serif, sans-serif, monospace, cursive, or fantasy. Example:

  body { font-family: Garamond, Times, "New Century Schoolbook",
           serif }

Note that family names containing spaces must be enclosed in quotes. This rule says to use Garamond if available; use Times if Garamond is not available; and so on, using the generic family serif of none of the named fonts are available.

10.2. The font-style property

Allowable values are normal for vertical text (the default), italic for italics, or oblique for fonts that look like regular text, only slanted.

10.3. The font-variant property

The default for this attribute is normal, but you may specify a value of small-caps to get a caps-and-small-caps font.

10.4. The font-weight property

This property specifies how heavy or bold the font is. The default value is normal, but you can instead give values of bold, bolder (meaning a bit bolder than the parent's weight), or lighter (again, relative to the parent's weight). You can also specify the weight as one of the values 100, 200, …, 900, where 100 is the lightest weight, 400 is normal, and 700 is the same as bold. Not all values are available in any given font.

10.5. The font-size property

You can specify the size of a font in four general ways:

  • As an absolute size. Permissible values range through xx-small (extra extra small), x-small, small, medium, large, x-large, and xx-large. The difference between each size is about a factor of 1.5.

    We discourage using absolute sizes because they make it impossible for large-print users to resize the fonts.

  • As a relative size, compared to the parent font. Two values are supported: larger and smaller. Example:

      body { font-size: medium; }
      h2   { font-size: larger; }
      p    { font-size: smaller; }
    

    In the example above, an h2 element inside a body element would be displayed in a larger font than medium, and a p element would use a smaller font.

  • By naming a specific font size. The units allowed are discussed elsewhere; see Section 6.1, “Dimensions”. Here is an example:

      pre.special { font-size: 14pt; }
    

    This rule would set in 14-point type all elements of class special inside pre elements.

  • As a percentage of the parent font size. Example:

      em { font-size: 120%; }
    

    This rule would set text inside an em element 20% larger than the parent font.

10.6. The font property

You can combine all the font properties together in a single property called font. Here is an example:

  p { font: italic bold normal 12pt bodoni, bembo, serif; }