If you have been writing HTML for a while, you've probably come across the <font> tag. This is an old tag that allows you to set the font size, color and family. There are several problems with the <font> tag:
- It doesn't allow you to change all aspects of typography, only three
- It doesn't give you much flexibility on the options it does support.
- It mixes the visual presentation into the structure of the document, making things difficult to edit later.
Luckily Cascading Style Sheets (CSS) allow you to make your Web typography very precise and your fonts will never be the same.
Font Families
Determining the font you're going to use is the first step to proper Web typography. The most common method is to define the font family as either a generic or specific font, and then list several other fonts as backups (separated by commas). For example:
p { font-family: Geneva, Arial, Helvetica, sans-serif;
Font Size
Once you've set your font family, you'll need to set the font size. There are many units of measure you can use with CSS fonts:
- inches (in)
- centimeters (cm)
- millimeters (mm)
- points (pt)
- picas (pc)
- pixels (px)
- ems (em)
- X-height (ex)
- percentages (%)
The first five types are absolute (fixed) settings and don't work really well on Web pages because Web pages are viewed by people with many different video settings. The second four are relative font sizes and work better on the Web. I prefer to use ems.
p { font-size: 1em; }
Font Colors
Interestingly, the font color property is not font-color, it's just color. Choose your font colors the same way you would any other colors on your site. Then define them in your CSS:
p { color: #330000; }
Leading, Kerning, and Highlighting
Some of the things you can do with CSS that you can't do with the font tag are leading, kerning, and highlighting text. Leading in CSS is called line-height. Use the same units of measure you use for your fonts for your line-height:
p { line-height: 1.25em; }
Kerning is the amount of space between letters. While you often don't have to change this on Web pages, you might want tighter or looser kerning to get an effect. You do this with the letter-spacing property:
p { letter-spacing: -0.1em; }
And you can highlight your text with various font properties:
- background-color: To highlight text with a colored background.
- font-weight: Sets the boldness of a font.
- font-style: Sets the italics of the font.
- font-variant: Changes the font to small-caps.
p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
Make Your Web Typography Work for You
And for your readers. Web typography using CSS offers a lot of options and flexibility. But you need to take advantage of it.
