|
Design Tip:
Limit Your Line Length
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you run a content-rich Web site with lots of text, here's an important usability tip: limit the length of your lines.
Web pages are all about information; visitors come to your Web site to read content. Unfortunately the default structure of an HTML document often makes that content hard to read.
Book and magazine publishers long ago learned that blocks of text are easier to read if they're limited to around 65 characters per line. This isn't a firm rule; in practice print publishers may use anywhere from 50 to 80 characters per line, with 65 being about the average.
Lines longer than 80 characters are hard to follow. When your eye reaches the end of a line, it has trouble finding the beginning of the next line. Likewise, very short lines require your eye to constantly scan back and forth.
Unfortunately, basic HTML text tags don't allow you to control the width of your lines. Since HTML was designed to be machine- independent, early versions of the language deliberately avoided such "look and feel" issues. The standard paragraph tag gives you no control over the width of your line. Instead paragraphs of text are liquid, flowing until they reach another page element or the edge of the browser window. This usually results in text that's hard to read.
Don't believe it? Try reading this article in a long line format. We've reformatted this page to use the browser's default line length. On a computer monitor with a 640x480 pixel resolution, that means each line will be about 95 characters long. On a 800x600 pixel monitor, a resolution that's rapidly becoming the standard for computer screens, each line is nearly 135 long when the browser is set to use the full screen!.
Normally we place our newsletter inside an HTML table to limit the width of each line. We use a 480 pixel column to limit the width of each line to around 70 characters. Other Web publishers use even narrower columns. Salon.com, the award-winning magazine, uses a 58 character line length. ZDNet's DevHead channel uses a 50 character line length.
All these examples use HTML tables to divide the page into two or more columns, with the widest column containing the page's key content. This makes the content easier to read and allows space for related links and navigation elements in the other columns.
Keep that in mind when building text-rich pages. Sometimes less is more.
|
