3. The Appearance of Text

Because of the difficulties associated in reading and moving around web text, style and layout can be of critical importance to good website design and copy readability. Even if you are not in charge of how your text will look on screen, it is important to have an understanding of the constraints on layout imposed by the online medium so you can take them into account when drafting material.

Hyperlinks

Internet users move around via channels known as hyperlinks, which can be embedded in almost any element of a web page: a picture, an area, a sentence or a word. When used in text, HTML usually indicates that the link is there by colouring the text blue and underlining it. In a well-designed web page, these blue/underline sections stand out so that the reader can see at a glance where the links to other pages are.

The blue/underline convention is not universal; HTML allows programmers to state what style they want hyperlinks to appear in. On my site, for example, I have used a different style for the links in the standard navigation bar down the left-hand side of the page.

However, most web users recognise blue or underlined sections of text as being links. This can make it very confusing if the text is not a link, but has simply been underlined or coloured blue for emphasis.

Navigation

In the early days of the internet, web designers rapidly recognised that internet users needed all the help they could get in finding their way around. Hence they started using words, such as ‘next’, ‘previous’ or ‘click here for more’, to signpost the way.

This use of copy works after a fashion, but is inelegant for a couple of reasons:

• Using signs like ‘next’ or ‘previous’ in a chain of pages does not mean much to a visitor who arrives via a link from a page that is not in the chain. Instead, give each page a descriptive subhead that is also a link and provide a list of the subheads on each page.
• Using signs like ‘click here for x’ or ‘select this’ is wasteful and clumsy when hyperlinks can be incorporated into the text itself. Instead of saying ‘The report says x’ then ‘Click here for the full report’, try just ‘The report says . . .’ If you use context-sensitive links such as these, however, always make sure the reader can easily get back to the point they originally came from, particularly if the new text opens in a new window where the ‘back’ button on a browser will not lead anywhere.

Other points

When formatting text on screen:

• Put line breaks between paragraphs to show clearly where they begin and end.
• Lay out text in narrow columns to make it easier for the eye to follow each line. Ideally, a text column should not take up more than a third of the width of a screen, but bear in mind that different types of screen have different sizes.
• Use (but do not over-use) bold and italic fonts to help particular points stand out and make it easier for the reader to keep their eye fixed on a paragraph while scrolling down the page.
• Make sure the colour of the text will enable it to stand out from its background (so dark letters out of pale backgrounds and vice versa).