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 sometimes 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. They are both sans-serif, and san-serifs are easier to read and the current screen resolutions. When used with Helvetica specified as an alternate for use with non-Windows systems, 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.

You can also control your font by using styles. Using the STYLE attribute or style sheets you can specify the font size in pixels and have better alignment control, such as using justified text. You can also control the weight, slant, line height, foreground and background color, spacing, underlines, overlines, struck-through, blinking, convert all to uppercase or lowercase, or use small caps. You can find pages on our site with the text set against a yellow background to emphasize the text. Check the source code there to see how it's done with the STYLE attribute. If this is new for you, start with the STYLE attribute as we do on our pages and then graduate to the style sheets. The style sheets permit you to apply a consistent styling over your entire web site.

Choosing the Typeface

The typefaces that are the most common such as Times Roman and Helvetica 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 beautiful serifs go to a fuzzy soup with small sizes at that resolution. To resolve this problem, several specific fonts have been designed for screen resolution, 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 this 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 in Dreamweaver, 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 type of "Oregon" is aliased. A close look shows jagged edges in this example. Notice the blurry look.

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 headline 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.

Let us Help You with Your Web Site Design or Analyze Your Current Web Site...

Let us Help You Get a Great Position in the Search Engines...

Do Your Own Search Engine Positioning and Save!....

Get the
e-Book and
Sky-Rocket
Your Traffic!