Using Type Effectively

There are five basic elements of web page design:

Content
Layout
Images
Color
Typefaces

As you design the page, the typefaces you use are an integral part of your message. Choosing the right typefaces are very important. Here are a few tips:

Don't use too many different typefaces on a page - or will look like a ransom note.
Match your fonts to the message and theme of the page.
Readability is generally the most important issue, but somtimes your requirements may take priority over readability.
Consider how your typeface will work with others on the page.

You can use the FONT tag to set the font for text, but remember that a given font on your system may not be available to the user's system. You can also specify multiple fonts, separating them by commas, in the FONT tag. So that a given font may work on both the PC and MAC, you might specify both Arial and Helvetica to obtain a sans font.

If you wish a specific font that is independent of the user's machine, create the text using a font in a graphic program, add the page background, and save it as a GIF or JPG. Then use it as an image. This permits you to use shadows, embossing, and other effects.

In choosing typefaces, Ventura or Arial is often the best for readability. When used with Helvetica specified as an alternate for use with non-Windows sytems, you can often get the best pages - particularly at low font sizes.

Styles (bold, italic, etc.) can be controlled logically or physically. You can logically control the style using the tags, such as the ..., ..., and .... You can also control the style physically by specifying the name of the font that has that style. Arial Black, for example, is a bold version of Arial. This assumes, though, that the user has that font installed on his or her system. You can also create the text using the font of the desired style in a graphic program and save it as a image to use on a page. It will then load on the client's system as a graphic, even if the client doesn't have it. This will, however, slow the loading of the page.

Choosing the Typeface

The typefaces that are the most common were designed for printing; that is, a print resolution of 600 dpi or more. Web site type is displayed on a monitor with about a 72 dpi resolution. All those beautfiul serifs go to a fuzzy soup at that resolution. To resolve this problem, several specific fonts have been designed for screen resoultion, both serif and sans-serif. The most popular ones are:

Geneva
Georgia
Monaco
New York
Trebuchet

For the best looking web sites, stick with these. Avoid Times and Helvetica fonts for web page design. Geneva is the bit-mapped (web) version of the Helvetica font and New York the bit-mapped (web) version of Times New Roman. Monaco is the bit-mapped version of Courier. Use these substitutions instead. This is particularly true at low resolutions. This text is in Verdana if the font is on your system.

If you are using Dreamweaver as your editor, the Properties panel sets the font for a given text selection. The default groupings there, however, are not the best. Edit these to new groups:

Sans-serif: Verdana, Geneva, Arial, sans-serif
Serif: Georgia, New York, Times New Roman, serif
Monospaced: Monaco, Courier New

This tip is for both Mac and PC machines.

To Anti-Alias or Not?

If a font is used as aliased, it means it has jagged edges, or jaggies, showing where the pixel edges are. This is aliased. A close look shows jagged edges as in this example.

The fonts designed for the web listed previously are designed so that the jaggies aren't there, even when used with no alias. In other words, for most graphic text (particularly of small size) you are better off using web fonts with no alias.

The above examples show a button with a small Verdana font shown in various modes of alias and anti-aliased. The best image is using the Verdana font (1) bold or (2) regular without anti-alias and duplicating the text layer. The buttons using an anti-alias text show fuzzy or blurry text.

If you want to use your favorite font in graphic work for a headling or logo, you can generally use the larger font sizes and then set the font to an anti-alias. The Photoshop background to which you anti-alias should be the same color as your web page background. Otherwise, you will get a white halo on the text.

This was done using a smooth anti-alias and selecting one of the default Photoshop styles from the Styles panel. Then a bit of a drop shadow was added.