This article is also available as a TechRepublic download, which includes the example code listings in a more manageable text file format.

In times past, altering the typeface of a Web page usually
meant enclosing the relevant text in a <font> tag and
applying attributes to control its color, size and style. Today, this method is
frowned upon, because it mixes visual styling aspects with actual content
markup. The recommended method these days is to extract typeface styling
information into a separate file, called a Cascading Style Sheet (CSS).

Putting font information into a CSS file has a number of
important advantages: it’s easy to do, doesn’t require any special software,
and works uniformly on most major browsers. More importantly, because
information is centralized in a single location, altering the visual appearance
of your pages is a snap: simply alter the font or color in your primary style
sheet and the change will “cascade” across your site instantly.

Sounds interesting? Then keep reading, because this article explores
the CSS font property, which provides an alternative to the older <font> element and
is a great tool for when you need to centralize control over the typeface,
color, size and spacing of your HTML pages.

Controlling typeface

The font-family property defines the font(s) to use for the
corresponding element. This typically contains a list of font names, separated
by commas; quotes can be used to enclose those names which contain whitespace.
The browser will use the first font it finds in the list, or default to the
standard browser typeface if none are available.

Listing A is an example
of this directive in action:

Listing A

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
</body>
</html>

And Figure A
shows you what the output looks like.

Figure A

Font_family

It’s important to remember that this directive depends
heavily on which fonts are present on the client system; in the example above,
if neither Bookman Old Style nor Verdana are present, the default browser font
will be used instead. To avoid this, it’s a good idea to follow up the list of
specific font names with the name of a generic font family, such as serif, sans-serif or cursive; this tells the browser to use the
closest match within that category of fonts. Listing B is a revised version of the previous example, which does
just that.

Listing B

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”, “cursive”;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
</body>
</html>

Controlling color

Font color is controlled using the color property, which accepts either an RGB
value in hexadecimal notation or a “color word” such as red, silver or blue. Listing
C
shows you an example.

Listing C

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”;
        color: purple;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
</body>
</html>

And Figure B
shows you what it looks like.

Figure B

Color

Controlling size

Next up, size. Font size is
controlled via the font-size property, which
accepts either absolute (numerical units or keywords such as xx-small, small, medium, large, x-large) or relative (larger and smaller) values. Size units may be described
in terms of points, percentages or ems. Listing D is an example; it magnifies the
font to 400% of its normal size:

Listing D

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”;
        color: purple;
        font-size: 400%;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
</body>
</html>

And Figure C
shows you what it looks like.

Figure C

Size

Controlling emphasis

Font emphasis is controlled via the font-style and font-weight properties, which broadly
correspond to HTML’s<i> and <b> elements. The font-style property accepts any of the
values normal, italic and oblique, while the font-weight property can either accept
values on a numerical “boldness” scale between 100 and 900, or the
keywords normal, bold, bolder and lighter. Listing
E
is an example that demonstrates both these properties.

Listing E

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”;
        color: purple;
        font-weight: bolder;
    }
   
    .attribution {
        font-style: italic;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
    <div class=”attribution”>– Hamlet</div>
</body>
</html>

And Figure D what
it looks like:

Figure D

Font weight and style

Controlling word, character and line spacing

CSS also makes it possible to control the space between
words, characters and lines, via the corresponding word-spacing, character-spacing and line-height properties. As with the
font-size property, values may be expressed in points, pixels and ems. Listing F demonstrates
with an example.

Listing F

<html>
<head>
    <style type=”text/css”>
    .quote {
        font-family: “Bookman Old Style”, “Verdana”;
        color: purple;
        font-weight: bolder;
        font-size: 200%;
        line-height: 50px;
    }
   
    .attribution {
        font-style: italic;
        word-spacing: 15pt;
        letter-spacing: 8px;
    }
    </style>
</head>

<body>
    <div class=”quote”>To be or not to be, that is the question.</div>
    <div class=”attribution”>– Hamlet, Act 3, Scene 1</div>
</body>
</html>

Figure E shows you the
output:

Figure E

Spacing

Of course, these examples are just the tip of the iceberg
when it comes to working with fonts in CSS. However, they should have given you
some insight into how these properties work in practice, and you should now
know enough to begin experimenting on your own. So what are you waiting for?