Takeaway: Explore 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.
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?
One of the issues that can plague Web designers (not to be confused with 
Posts
