Line spacing

Readability is enhanced if we leave an easily discernible trail for the eye to follow. Adequate line-spacing helps the eye to travel along the text smoothly, without hesitation or thought. The default setting for line spacing is not always the most suitable. The longer the lines of text the more space required between the lines so that as the user's eye returns to the beginning of the next line they do not get confused. Calculating the best line spacing for a particular piece of text is not an exact science and will depend upon the font used as well as the line length. We have used a line height of 1.6ems for these lesson notes which we have found to be a suitable compromise for Verdana when we use the full page width. For short columns and bulleted lists we find that a line height of 1.2ems works well. For a general purpose website the W3C recommends line spacing of 1.5ems, but this will depend upon the font face and you may well need to use a larger space for serif fonts.

Line Justification

Text should not be justified (aligned to both left and right margins) for screen users because the mathematics involved often creates blank spaces within a sentence that breaks the flow for the reader. Sometimes these blank patches can cause disconcerting patterns that cause serious problems for people with dyslexia.

This paragraph has been formatted as justified to allow you to see the results. If you shrink and expand your browser window whilst viewing this paragraph you should see some lines of text with much bigger spaces. This effect is particularly apparent if the text contains long words such as discombombulation, Honorificabilitudinitatibus, antiskepticism, deinstitutionalization, counterrevolutionaries or Pseudomultiquattuorquinquagintaquadringentillionaires (yes it is a real word from the world of finance to describe people trying to appear richer than they are!).

Letter spacing

If you want to space the letters out for individual words, as used in the heading for this section, you should always use CSS as shown below.

.wide {letter-spacing: 1em;}

If you use spaces (pressing the space bar) to separate the letters the word it will be read by screen readers as a sequence of individual letters (i.e. not a real word), this may not be intelligable to screen reader users.

Colour Contrast