How much white space is right? You may feel that you need to use every precious pixel of screen space for advertisements, links, search engines, images, minuscule text, etc. on the front page of your website. (see the MSN website) Or you may choose to use three-dimensional screen space: popup windows, frames, or layers.

Others have chosen a minimalist approach to web design. -- the splash page, which has just a logo and perhaps some animation. Or the home page on which everything is an unassuming - and unexplained - icon.

Which is right? Generally, none of these.

History

The use of white space in clarifying published works is relatively recent. In hieroglyphics and Sumerian clay tablets, there wasn't even spacing between words. Every precious inch had to be used - writing materials were costly. Here, you can see that in the Rosetta Stone, Greek was written with no spacing whatsoever (it also extends about two and a half feet wide across the stone -- no columns). Until around 500 AD, all language, at least in the West, was written that way.

When Johann Gutenberg brought typesetting to Europe, the standardization required to use the machine resulted in more margin space, regular spacing between lines and words, and the recognition that certain types of spacing and layout added readability to books, playbills, and other printed items. Newspaper columns, centering, and printed advertising were born. So was white space.

Today, whitespace is more important than ever; a website with unrelieved text can wear out the eyes and lose your reader to an easier-to-comprehend site.

Simple Tricks

How can you use white space to make your website more readable?

Group like items together. You see this all the time: the menu bar. The list of links. The library of jpeg thumbnails. Do it consciously. Your pages will improve.

Separate groups with whitespace rivers. This is called a "moat." Like its namesake, it holds the items within it apart from surrounding items. This is easy to do with a table and the "cellspacing" or "cellpadding" attributes.

Separate navigation buttons from text with white space. Make certain text and buttons are at least 10 pixels apart, preferably 20 or more. Any closer and they run together, making it visually difficult to pick out the buttons.

Space draws attention to items. Put the most space around the most important items on your page.

White space doesn't have to be white. Any background color that is reasonably muted and against which your text and images are clear and distinct is fine. For example, photographs generally look great on a black background. Dark blue text looks good on an ivory background. Background patterns should generally not be used. They almost invariably distract from the objects placed on them.

There is a difference between vertical and horizontal white space. When you offset text with horizontal whitespace, the reader tends to read on, as if there were no space, unless the space is very large. When you offset with vertical, it is clear on electronic media that this is a different element. Columns next to one another are treated as different groups.

Keep line length short. As you should see on this page, you can use a table with invisible lines to a) center a text column, and b) keep the text to a universal width of about 450 pixels, regardless of viewer screen size.

The human eye has trouble reading a line of text longer than 10-12 words -- it's analogous to trying to read the entire Pledge of Allegiance in one long breath. Just as reading in one breath tires your lungs, reading very wide text tires your eyes. The white space at the margins provides a place for the eye to rest at the beginning and end of each line.

Don't trap white space. Large white spaces trapped between elements call attention to themselves rather than the elements around them. Puddling white space in this manner is sometimes unavoidable, for example in ASP- or JSP-generated documents which turn out to have less or more text than anticipated, but avoid it when possible by increasing the size of your font, the size of your graphic, or decreasing column widths or table cell sizes.

White space allows lower-resolution browsers room to contract. Instead of wrapping your elements or forcing the viewer to scroll horizontally, your 800x600 layout, set up in a percentage-based table with generous whitespace, will contract and allow a lower-resolution browser to display something much closer to what you intended; and conversely, will spread evenly across higher-resolution layouts.

For more information on designing web pages with the reader in mind, try these links:

http://www.useit.com

http://www.webmonkey.com