Using Typography in Web Page Design

Craig Borysowich (Chief Technology Tactician)

The choice of font and the options for using typography on Web pages is improving. Originally, the HTML specification did not include options for specifying typographic elements, limiting the designer to use the default fonts available on most systems. Extensions to HTML and revisions to the specification now include capabilities to specify fonts.

Options for Including Fonts

To display a font specified within an HTML document, the Web browser must support the font and the font must be present on the user's system. Several techniques support the inclusion of more sophisticated fonts. The Web browser vendors supply fonts that can be freely downloaded from their Web sites. Another technique involves embedding the font, or the relevant parts of the font, into the HTML file to download with the Web page.

Guidelines

Some general guidelines for typography in Web page design:

· Use typography to create visual contrast on the page. For example, varying the size of the font and using empty space effectively helps create contrast and patterns on the Web page that are visually pleasing.

· Don't overuse an effect. For example, use bold to make things stand out but don't make everything bold or the effect is lost.

· Use as few heading styles as possible. Ideally, create a style for a main heading and one sub-title. Apply the style consistently throughout the site.

· Don't use uppercase headings. These are difficult to read.

· Shorten the line length of text so it can easily be viewed and read. Restrict the text line length to about 40 to 60 characters, depending on the Web browser and monitor sizes used by the target audience.

· Be aware that users assume a change in effect, such as a different color or font size, has some meaning. Apply these effects with care.

· Avoid using special characters such as "smart quotes" and the "em" dash as these are not supported in the HTML basic character set.

· Consider rendering typographic effects as bitmap graphics if you are unable to create them using the available fonts.