plus logo

Typography

Create a Style Guide

A style guide establishes what type faces are used for different purposes. It can include color guides as well. Style guides are helpful for team-based projects.

Don't Use Too Many Fonts

Most beautifully designed publications (and web sites are no different) use only 1-2 different typefaces. Instead, they use a type family - creating different looks with the same font.

Type Families

A type family is a single font that comes in different weights and styles. You can get a lot of mileage out of a font family. It's better to work with one or two font families than to combine muliple, unrelated fonts.

Tradeoffs Between ASCII and Pictures

ASCII type is searchable, accessible, can be translated to other languages and is small in file size.

Pictures of text afford more design freedom. You can use any font and style, and the end-user does not have to own the font to view the picture. Include alt tags with text images.

Text at Small File Sizes

Body Text on the web is often displayed at a very small size. It relies on your visitors owning and having the font you specify installed in their system. For this reason, most web pages use system fonts.

Remember that by default, text views at almost 24 percent larger on a PC than on a Mac--this can be controlled through Cascading Style Sheets (CSS).

Upper and Lowercase Is Easier to Read

When you read, you don't look at each letterform. Instead, your eye dances quickly from one word shape to another. For this reason, upper and lowercase text is much easier to read than all caps. It's not to say that all caps should never be used. It's to say that all caps should not be used for large blocks of body copy.

Web and Print - Different Rules

Many web designers who come from a print background create type that's too small on the page. The minimum size for buttons should be 12 pt.

Serif vs. San Serif

With small body text - san serif is easier to read than serif!

Cross-Platform Differences

The way to get around size differences on Macs and Windows is to use pixels instead of points. You can set the text to pixels by setting a style.


Valid XHTML 1.0 Transitional

Valid CSS!