Key Concepts

You can play with the text on a web page by changing its size, typeface, font, and/or color.

However, before you do too much experimenting with type, become familiar with some of the basic concepts of typography.

A font is a style or shape of type.

A typeface is a family of fonts. For example, the text you are reading now uses the Verdana typeface. Verdana also comes in a bold font and an italic font.

Each typeface has many different characteristics ranging from the height and width of each character to the thickness or thinness of the strokes that make up each character.

Typeface does fall into two major classifications: serif and sans serif.

A serif is a stroke that appears or projects from the ends of the main strokes that make up a letter.  Times Roman, the typeface I am using in this sentence, is a serif typeface.

A sans serif (from the Latin sans, meaning "without") typeface lacks these projecting strokes.  Ariel, the typeface I am using in this sentence, is a sans serif typeface.

Each typeface has its own character and projects its own image. For example:

Comic sans Gothic has a playfulness that reminds the reader of the kind of hand lettering that might appear in a comic strip.

Courier New looks like it was created by a typewriter.

So choose your typeface carefully. 

However, note that the browser being used by your visitor must be able to support your chosen typeface. In other words, if the visitor's browser cannot display your typeface, the browser will revert to its default typeface and your carefully chosen effects will disappear.

The only way to permanently insure the look of your chosen typeface is to create a graphic file using that typeface.  In general, use such a graphic file only with a headline.

The script font displayed above is actually a graphic.

Typography Rules of Thumb

The art of typography is a separate study unto itself.  But there are a few basic rules that web developers should follow when they choose typefaces.

• Limit the number of typefaces on your site to two.
• In printed material most American readers will be more comfortable with serif typefaces (like Times New Roman) in their body copy and sans serif typefaces (like Ariel or Helvetica) in their headlines. However, it is easier to read a sans serif typeface on a monitor.
• Don't use all capital letters for any phrase longer than a short title.
• Never use all capital letters with a script or italic font.

Employ contrast between your typeface color and the background of your page.

• Black text on a white background provides the highest and therefore the strongest contrast.  However, black text on a slightly less contrasted background seems to work best on a monitor screen.  Try black on light yellow (#ffffcc) or light gray (#cccccc).
• White text on a black background, while legible, causes eyestrain.  Use it sparingly. If you must use light text on a dark background, experiment with enlarging and bolding the text for easier reading and better contrast.
• When you choose text and background color or background image combinations, keep your visitors' needs in mind.  Visitors may want to print your pages.   Highly textured backgrounds are not only hard to read but often difficult to print.

Employ white space.

• Break long stretches of running text into columns; but don't make a visitor scroll up and down your screen.
• Break up your text with occasional graphics; even a horizontal line or a splash of colored text will often suffice.

Web Design Center
Dreamweaver 8 Tutorials
© Agatha Taormina
Last Revised: October 1, 2006