Laying out Web Content

By Gerry McGovern , September 28, 2000

If you were to place the world's 100 biggest-selling English-language newspapers in a row, you would find no more than two or three different layout styles for the front page. There are only so many ways to properly lay out content, whether in a newspaper or on the web, but there are two, sometimes conflicting, objectives to follow.

The primary objective is to provide the most readable environment for the content possible. The next objective is to present the content with style, so that it is pleasing to the eye, and, thus, the reader will enjoy reading it.

When you use a word processor or an email package, what color is the text, and what color is the background? In the vast majority of cases, the text is black, and the background is white as should be content on a web site, particularly when you're asking the reader to read a lot of text.

There are a number of simple rules in relation to laying out content on the web. Breaking them is not really the sign of an artist, but rather of an amateur. Remember, classic novels are not classics because every second page has a different color and font but because of the power of the words.

Before long, a few standard layouts for content will become the norm on the web. The quality of the content itself is what will differentiate one web site from another.

Here are some rules for laying out web content:

Never underline body text, as a reader will think it's a link.
Avoid using bold within the body of the text for the same reason.
Avoid using italics because it is difficult to read on a screen.
With copy that is more than a couple of paragraphs long, use a 10-point font, as anything less will make the text difficult to read.
The font style that works best on the web is sans serif; it looks sharper on the screen and is therefore easier to read.
If you're laying out a document summary on a home page, make the heading of the summary a link, which the reader will expect.
If the body text is in a 10-point font, then the heading should be 14 point.
If there is an image as part of a document summary, then the image should also link to the document.
On a home page, you may go down to 8 point for the body text as this will allow for more text on the page. In this case, the heading size should be 10 point.
When presenting an article or other document, the number of words per line of text should average between 9 and 12 in the central column. (The longer a line of text is, the more difficult it is for the eye to follow down to the next line.)
If the document is longer than 10 paragraphs, a table of contents should be placed below the heading. The table should be generated from subheadings found in the main body of the document.

Reading on a screen is still more difficult than reading on paper. Flashy design may look well on the surface; however, when your readers get down to the job of reading on such a site, they will not thank you for it.

Back to Article