Accessibility Recipes/Paragraphs

From DPWiki
Jump to navigation Jump to search

There is a balance to be struck between making the HTML version look like the book did, and making it readable on the screen. This page aims to give information to help the PPer decide.

What to do and how?

Here we discuss matters of spacing. There are other issues (such as line lengths, choice of font, and background colour) that the PG HTML rules prohibit us from altering.

Justification of Text

Most books have justified text, that is, the lines are made flush both right and left. Printed books achieve this both by altering the space between words and by hyphenating words across linebreaks, so that the spaces between words don't have to get too large or small. This paragraph is justified.

Browsers, however, aren't sophisticated enough to decide to hyphenate words, so justified text on the web tends to have more uneven word spacing. Some people find this makes it harder to read. Making the text left-justified but ragged-right, like this paragraph, makes the spaces more equal and helps readability.

Justification is controlled by the CSS property text-align. For example

p { text-align:left; }

Even if you don't want to do this to your whole document, it is a good idea to avoid justifying very narrow parts such as table cells and figure captions (if there are only 3 or 4 words per line, the browser often needs to use extremely close or wide spacing to get the line length exact). Left alignment is usually the default, so you can either explicitly set text-align:left; (or right, or center), or just leave it alone.


Leading (pronounced "ledding" because it refers to strips of lead used to separate lines of metal type) is the distance between lines. If lines are too close, the eye can get distracted by letters above and below the line being read. In CSS this is controlled by the line-height property.

p { line-height: 1.3; }

(Units aren't needed for line-height.) For list items you might need to alter their separation using something like

li { margin-bottom: 0.5em; line-height: 1.3; }

Indentation vs Spacing

Most books use indentation to signal a new paragraph. On the web it is more usual to use vertical space. This gives a stronger visual separation and improves readability.

To do this, instead of

p { text-indent: 1.5em; margin-bottom:0; margin-top:0; }

one would use something like

p { margin-bottom: 0.75em; margin-top: 0.75em; }

If you've chosen a high leading, you may need more space than usual. The CSS Cookbook suggests 0.75em, but some typographers suggest using the same value as your leading, which makes the gap exactly equal to "one blank line".



W3C doesn't say anything about these issues, except perhaps

but it then goes on to discuss colour, contrast, size etc, not spacing.

Who benefits?

  • Dyslexics: the variable spacing caused by justification creates "rivers of white" running down the screen, that can make it hard to focus on a line of text.
  • Users who need big text (justification is bad if the text is so big that only a few words fit on each line).
  • Users of screen magnifiers? (At least I—Laurawisewell—found it hard to scan down a document when new paragraphs were distinguished only by indents.)
  • Anyone else who finds reading difficult, because of vision problems or learning disabilities.
  • Everyone? There have been comments in the forums, particularly about spacing between paragraphs being helpful.


It doesn't look as nice, nor as "book-like", and (other than the leading, perhaps) it's unlikely to match how the book was styled.

One might argue that users for whom spacing issues are a real problem will override them with a user stylesheet, but of course many people do not know how to do this.


No real need to test, just see what looks most readable. You could experiment with enlarging the text enormously, or using a screen magnifier if your OS has one.

Further Reading