COI Toolkit Beta


1
Page Layout

The basics of how to design and structure clear and effective page templates, and how to design the way your content appears within those templates so that it will be easy to read and act upon


1c Basic design/styling dos and don’ts


Style text for readability

  • Always use left-aligned text for body text
    • Avoid centred or right-aligned text
    • Never use justified text
  • Use readable and readily available fonts
    • Sans-Serif fonts like Verdana and Arial are readable and universally available
    • Be careful if using Serif fonts (like Times New Roman) for smaller size text because they can be difficult to read
    • Serif fonts can be used for large text, such as headings and titles
  • Avoid ALL CAPS for body text – all caps is slower and more difficult to read and it LOOKS LIKE SHOUTING
    • All caps is acceptable for short phrases and menus, but avoid if possible
  • Never use blinking text or marquee text (text that scrolls horizontally across the screen) – it is distracting and difficult to read
  • Use underline only for links and nothing else [see 2b]– underlined text is more difficult to read and will be frequently confused with links

Be careful with the use of colour:

  • Use high contrast between foreground and background
  • Add colour to make information stand out more, but do not use colour alone to give information because some people cannot see colours (for example blind people using software to convert the information into speech)
    • Add another cue such as an icon or explicit words [see 5c]
  • Avoid red/green combinations in both images and text – these can be difficult to see for people who are colour-blind

Notes and discussion points

Site specific style conventions
Some sites are very specific about text style rules. For example, for Directgov:

  • All caps are not allowed even for short phrases or menus
  • Italics are not used for any text
  • Verdana is the default font (so the font family set within the style sheet is set to Verdana, Arial, Helvetica, Sans-Serif)

watch video about how we read shown through eyetracking

How we read shown through eyetracking
Using eyetracking this video shows how people read different text alignments and all caps versus mixed case.


 
Always use left aligned text for body text because it is easier to read than any of the other text alignments Do not use all caps for body text as it is slower to read and looks like shouting (text is styled in all caps to illustrate this) Avoid underlining anything other than link as the text is harder to read and will be assumed to be a link (text is styled underlined to illustrate this) Avoid italic text as it makes it more difficult and slower to read (text styled italic to illustrate this) Avoid centred text as it makes it more difficult and slower to read (text is centred to illustrate this) Do not justify text – it creates ‘rivers of white space’ that make it harder to read (text is justified to illustrate this – large areas of white space are formed within the passage of text) Bad examples of use of colour: low contrast between text and background, text on complex background, green text on a red background

© Crown Copyright 2004-2010