Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

What the Font Does It Say?

Last updated Oct 17, 2003.

Some font types are more readable on screen than in print and vice versa. The rule of thumb has been to use Times New Roman and serifs for text-heavy material that's likely to be printed. Verdana, Georgia, and sans serif have been created specifically for screen viewing. To make things worse, Macs and PCs don't display fonts in the same way or have the same default fonts loaded.

When working on text appearance, watch out for browser differences and give users control to resize text to cover all the bases. When using style sheets, you can list multiple font faces in order of priority. If the computer doesn't have the first font face, it looks at the second priority in the style sheet and loads it. It takes a little work to make the text sing in harmony with all computers and browsers.

What about the fact users don't use the resize feature? The way around it is to add a button or link to resize the text or change the font. It doesn't take much screen estate and it's easy to use. A List Apart (http://www.alistapart.com/stories/alternate/) has an easy tutorial for implementing a style switcher.

Figure 2Figure 2 Before: USA Today text at default size

Figure 3Figure 3 After: USA Today text did not change after using browser's option.

Figure 4Figure 4 Before: Lockergnome text at default size

Figure 5Figure 5 After: Lockergnome text resized using browser's option.

Tip #5: Validate text visibility.