1. Technology
Send to a Friend via Email

Web Typography

Getting the Most Out of Your Fonts


If you have been writing HTML for a while, you’ve probably come across the FONT tag. This is an old, deprecated tag that allows you to set the font size, color and family. There are several problems with the FONT tag:

  1. It doesn’t allow you to change all aspects of typography, only three
  2. It doesn’t give you much flexibility on the options it does support
  3. 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 text 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. Out of all of the choices, I prefer to use ems (and here’s why).

p { font-size: 1em; }

Font Colors

Perhaps surprisingly, 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, Tracking, and Other Text Adjustments

Some of the things you can affect with CSS that you can’t with the FONT tag include: leading, tracking, kerning, and highlighting text.

Leading is the space between lines of text. In CSS is called line-height. Use the same units of measure you use for your fonts for your leading or line-height:

p { line-height: 1.25em; }

Tracking defines the amount of space between letters. While you often don’t have to change this on web pages, you might want tighter or looser tracking to make your text more readable. You do this with the letter-spacing property:

p { letter-spacing: -0.1em; }

Kerning is trickier than tracking because it is an adjustment between pairs of letters within words. For example, you might adjust the kerning between the letters A and W when they are placed beside one another in a word. Kerning is more important in larger size blocks of text like headlines, as that is where the spacing can look more awkward. You can manually adjust the kerning with the same letter-spacing property only apply it to a class that you've added around the letters to be kerned. For example:

<h1><span class="kern">AW</span>ESOME!</h1>

.kern { letter-spacing: -0.2em; }

There is also a font-kerning property in CSS3 that lets you define how you want the kerning controled for your text. However this property is only supported using the -webkit- browser prefix on Chrome and Safari.

There are several other ways you can adjust your text with CSS font and text properties:

p {
  background-color: #ccc;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;

Make Your Web Typography Work for You

Your typography should work for both you and for your readers. Web typography using CSS offers a lot of options and flexibility. But you need to take advantage of it.

©2014 About.com. All rights reserved.