Plain Words - the Documentation and Training People

Web Design – Guidelines To Enhance Readability

Once you've decided on a layout for your website, you need to bear a number of other elements in mind. These include…

Loose fit

Remember that you should not over-define the appearance of a page. Web browsers have the facility to adjust the type size to suit their preference or visual ability.

White Space

To keep visitors on your site, break up your copy with short sentences and paragraphs, and insert lots of sub-headlines. Doing this creates a degree of white (blank) space – which is kind on the eye and makes for easy reading.

Allowing copy to clog up in a “wall of text” makes for difficult reading and simply loses the reader.

Background

Be careful with your background. Make sure it doesn't interfere with reading. A coloured or graphical background tends to distract the reader from the message of your website.

The best bet is to be conventional and use black (or dark blue) body text on a white background. Tests show this is easiest to read. Relevant graphics can be slotted in around the text – just don't have them behind it.

Text boxes work well with a coloured background

Text boxes, however, do work well with a coloured background. Black or dark blue text on a light background – or white text on a black background – work well.

If you use light text on a dark background, you need a slightly heavier typeface to help readability, but remember that this can make the pages harder to print.

Text Wrapping

Wrap body copy somewhere between 55 and 65 characters. If your text stretches across the full width of your monitor screen, it is very tiring to read. This is why newspapers and magazines set their body copy in columns.

However, it is irritating to see narrow columns only using half the space available because the designer was too lazy to create a design that will stretch to use the available screen space. Don't let the text run right to the edge of the page, so that it is crammed to the edge.

Typeface

It's important to use the right typeface or font. Don't use Times Roman for body copy. Tests show it works fine on paper (in brochures, magazines, and newspapers, etc). But on a monitor screen it is hard to read and it somehow doesn't look professional.

The usual font to use is Verdana

The usual font to use for online body copy is Verdana, but be aware that this is only available on modern Windows computers, so you should specify a series of fonts in order of preference, finishing with a generic ‘sans serif’ font.

Set the size of the font in points rather than pixels

Setting the size is something of an issue. You can specify a font size in pixels, in points or in ‘size’. Try not to use pixels, or the text will be tiny on high-resolution screens. Points is better, but still prevents the user enlarging the type size.

Using the basic ‘font size’ settings is best, but you lose a lot of control over the appearance of the page.

Headlines can be in Verdana or Arial

Headlines and sub-headlines can also be in Verdana. Or use Arial, which has crispness and so is ideal for attention-grabbing headlines and sub-headlines.

It's best not to capitalise all the letters in your headlines – all capitals take longer to read and therefore you run the risk of losing your reader. Instead, capitalise either the first letter of each word in your headlines or only the first one.

Coloured fonts add variety

Too many graphics on a web page make it slow to load. One way to brighten up the page without using many graphics is to use coloured fonts and embolding here and there throughout the text, but this can break up the flow of reading if not used sparingly.

Use it to grab attention to a phrase, but don't let it interrupt the reader.

Here's an example…

OnlineMarketing Strategies

The great thing about the Internet is things move fast. You can take a week planning a marketing campaign and fire it into action the following week – and see the results very quickly.

But one word of warning…

This approach adds liveliness without using slow-loading graphics. Don't get me wrong, some graphics are fine – but only if they truly add something to your message.