- Featured Columnists
-
Table of Contents
- Welcome
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Layouts
- Forms
- Meta Tags and Search
- Usability
- Accessibility
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Multimedia
-
Content
- RSS: What’s it for?
- Emphasize Hyper in Hypertext
- Give 'em Something to Talk About
- What's a product without a selling point?
- Site Matters
- Organize This!
- Inverted Pyramid – No Toppling
- Beauty Is in the Eye of the Beholder
- Whizzy Things and Other Distracting Objects
- Don't Make Me Read Twice
- What the Font Does It Say?
- No Flaunting Creative or Fancy Lexicon, Better Yet Cut to the Chase
- Cut the Fat
- Text Harmony and Understanding (and Consistency)
- Peace and Link Love
- Tale of Two Proofs
- Just the Facts, Ma'am
- Books and e-Books
- Online Resources
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Tools
- Tutorials
- Intellectual Property for Web Designers
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
2 Before: USA Today text at default size
)
Figure
3 After: USA Today text did not change after using browser's option.
)
Figure
4 Before: Lockergnome text at default size
)
Figure
5 After: Lockergnome text resized using browser's option.
Tip #5: Validate text visibility.
