A guide to web design

Readability is the ease with which text can be read and understood.

Guidelines to better readability:

  1. Use contrast. Text is easier to read when the font color and the background color have a strong contrast – usually black (hex #000) on white (hex #fff), the widest separation of light and dark.
  2. Use short paragraphs. They are easier to grasp, follow and locate information in. Information in long paragraphs is often difficult to follow and remember. It is also easier to find details the reader wants to return to.
  3. Use headings and lists. They help the readers understand the main points and put them in order. They also make it easy for the readers to locate again an idea or sequence of ideas which interests them.
  4. Emphasis. Within the body of a sentence use italics for emphasis, not bold text. The use of bold within the body of the text disrupts ease of reading. Bold should be used for titles and headings.
  5. Do not set your font size in pixels. Leave it as the default, which is 16px in most browsers, and set the size for different elements with relative measures – % and em. The setting for paragraphs <p> should be between 100% and 110%, or 1em and 1.1em, depending on the font used.
  6. Serif and Sans Serif fonts. It is not possible to make a meanful judgement about readability between serif and sans serif fonts in general. They vary so much from one font to another. For instance, compare these commonly used fonts: Georgia jgh 1lI to Times New Roman jgh 1lI and Verdana jgh 1lI to Arial jgh 1lI. They have to be compared one to one, and a judgement reached on that comparison.
  7. Text width, line height. Text width, which set in your style sheet, paragraphs should be between 30 and 35em (60 to 70 letters and spaces). The line height – the space between the lines works best at between 1.3 and 1.5 em (an em is the width of the lower case m in the font you have chosen).
  8. Use color for your links. Red is the tradition color for calling attention of text within a document. Links can be both within the text or listed separately, depending on how they are being used. It especially important that all technical terms be linked to a defintion.