I want to spend some time on a series of articles on web design usability practices. I call this series, the HTML Museum. I hope to update it with articles that address past web design practices and why they are no longer in use.The first exhibit deals with font, text and page size.

Font type and size. What a boring element to start with, but what an important ingredient in any written communication. We often don't notice font, even when we can't read it: it's almost completely transparent. I have two other articles on font. In one I discuss the use of font to enable better reading, and in the other I discuss how font is used to help create meaning. But both of those articles were pretty specific to writing hard copy documents.

Writing for the web is a completely different set of rules, and those rules created for hard copy writing don't really apply any more. For example, one of the rules I stress in the first article on font states that you should really use a Times-like font when writing, because the slight serifs (the small marks at the end of each leg of a letter) allow the reader to quickly separate and identify the letters more quickly than any other letter. This is part of the meta-information of a document: it facilitates meaning without meaning something itself.

However, the rule is different for the web. Researchers have found that sans-serif fonts, specifically Verdana or Helvetica, work the best. People can more easily read on the screen when using these fonts. Thus, when setting font type, these are perhaps the best used.

Actually many specify "verdana, sans-serif;" just to be safe. In such a case if verdana is not available, the available sans-serif will be displayed. This might be a trend, after all web design is design after all, but research has demonstrated that sans-serifs seem to enhance understanding when reading online information.

Maybe it has something to do with how we read online. We scan for information, when we find that information we concentrate on it, and then move on. We tend to skip to topics sentences throughout a page. Thus, perhaps words in san-serifs stand out more. And because we aren't reading an immense amount of text, we don't need the same strategies we use when reading hard copy documents (with which we typically read much more than we do online anyway).

With regards to font size: larger is not better! Large fonts make for akward reading, and it is difficult to use the space effectively to find the information we're looking for when the words are too big. A font size of what would be equivelant to 11 pt typically are the best. Sans-serif fonts tend to be larger anyway, so scaling it back down from what we would normally use on hard copy (12 pt) is needed anyway.

You can use bigger font sizes, of course, for headings and titles, but try to limit the amount of larger font sizes used: it actually detracts from understanding and it's hard to see the entire screen easily when the font size of any element is large.

Using colors with text. Web designers used to erroneously think that bright colors would attract people to read something. They also felt that some type of rainbow effect was useful or would be catchy somehow. It was actually more kitsch than catch!

The rules of contrast apply especially to screen. Light background and dark font need to be used to effectively communicate. Because we scan screens for information, you need to use effective contrast to highlight information. We will quickly miss important information that blends in with the background.

Page size. The size of the page, and the amount of text on it are extremely crucial to aiding people in their task of finding and understanding information. As we graze over a web page, we are scanning back and forth for specific pieces of information. Thus, long paragraphs tend to hamper our attempts. The more information we put in a paragraph, and the longer it is, the more people have to scan.

This will cause a couple of things to happen. People will either get frustrated and leave, or they will not find the information they need because it's buried under a layer of text they dont' need. Thus breaking up the paragraphs into smaller, more manageable chunks of information--usually by subtopic--is necessary to help people find information.

Many experts recommend what's called the upside-down pyramid approach to organizing information. Unlike in hard copy writing strategies, where we introduce a topic and gradually get to the point, we want to quickly give the important information at first and then fill in the details. Readers will first read the important info, perhaps the first or topic sentence of a paragraph, and then determine what they want to read next.

Also, the length of a page can be a detriment to design. Long, scrolling pages are harder to navigate as well, according to many studies. Users would rather skip to the next page, just like when reading a book, than scroll through a bunch of information they don't need. We don't use things like papyrus scrolls anymore, after all, so it's hard for users to adjust to finding information in that manner.

To enhance the amount of information the user gets, we need to also try to constrain the viewing information as well as the amount of information we are giving. Thus, the viewing size in which the primary information is given should be reduced, as it is on the senseandusability.com website. This makes the reading task more familiar to users because, again, its more like reading hard copy, which is how we were originally taught to read: small pages with small bits of information. We weren't originally trained on the landscaped rectangles we use to view web pages on, thus it just doesn't seem natural.

See this article as it would have looked circa 1996, in the HTML Museum's Exhibit 1.

For technical, professional and business communication help in the Las Cruces, NM area, visit Lanier Infomedia.