13 June 2009 | Ted Page
Justified text and readability
Justified text used inappropriately can cause serious readability problems. However, handled with care, and with the aid of the right software, it can work well in PDF-based content. But it may be some time before it can be made to work as well in web pages due in part to the limitations of current browsers. The CSS3 working draft offers some intriguing options for the future, but limited browser support remains a problem.
The image below shows two versions of an extract from Robert Bringhurst’s The Elements of Typographic Style.[1]
The text in the first column is evenly spaced but the text in the second column has large gaps between words.
The technical differences between the two examples
Both examples use word spacing to achieve straight column edges on each side. But the left-hand column also employs letter spacing and letter (or glyph) resizing as well as hyphenation to distribute the text more evenly along each line. In addition, the text in the right-hand column contains another common problem, namely double spaces between sentences (the subject of the extract). Because of all these factors the left-hand column is easier to read.
Defining the problem
With simple justified text (as seen in the right-hand column above) the uneven variation in spacing between words makes the text more difficult to read because, instead of moving smoothly along the line, the eye has to jump from word to word. For people with certain disabilities such as dyslexia the problems can be serious; justification can interfere with their ability to understand the text at all. (In the UK, dyslexia affects around 10% of the population, some 4% of them severely.)
Rivers of white
The problem for dyslexic people occurs because large gaps between words are more likely to line up above one another than are the smaller gaps typical of more evenly spaced text. When they do, readers may perceive highly distracting white patterns flowing through the page that can become more prominent than the text itself. The effect is known as “rivers of white” and it can make reading difficult, if not impossible.
Screen magnifier users
Uneven word spacing can also cause problems for people with various vision impairments who use screen magnification software. For these people the already exaggerated spaces between words are magnified still further, making the gaps even harder to jump across.
The “colour” of text
For justified text to work well for all readers it must have “even colour”. To check the colour of text you should squint at it until the lines appear blurred. If the shading is more or less even across each line it is said to have even colour. However, if lines appear blotchy the justification settings will need further adjustment.
InDesign includes some useful tools for fixing poorly justified text. These can be found under InDesign/Edit, Preferences, Composition, and H&J Violations. Because of their importance for accessibility, the techniques for optimizing justified text in InDesign are covered in detail in our Accessible PDFs from InDesign training course.
How to achieve even colour
Leaving aside hyphenation for a moment, the bulk of the justification work is done through variations in word spacing. But in English there are on average five times as many letters as there are spaces, so character spacing and glyph resizing can have a significant impact. Character spacing of ±3% and resizing of as much as ±2% can work well.[2]
Hyphenation
Also important in achieving even colour is the ability to break words across lines using hyphens. There are established rules of etiquette for hyphenation[3], the most important of which are:
- Leave at least two characters at the end of a line and carry forward at least three.
- Don’t leave the end part of a hyphenated word on its own as the last line of a paragraph.
- Avoid having more than three consecutive lines ending in hyphens.
- Break any rule of hyphenation that fails to serve the needs of the text.
Double spaces between sentences (don’t)
A related problem – the idea that you should insert double spaces between sentences – is a myth. A popular myth, but a myth nonetheless. The additional spaces are a problem for the same reason that exaggerated word spacing is. To reiterate the Robert Bringhurst quotation above:
In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth-century typists were then taught to do the same, by hitting the spacebar twice after every period. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit.
Typing any white space character twice or more in succession is generally regarded as a no-no of graphic design, and all modern web browsers collapse multiple consecutive spaces to one anyway. But word processors do allow it – just say no!
InDesign, QuarkXPress, Word and HTML
Professional page layout software packages such as InDesign or QuarkXPress include fully featured text justification engines. Microsoft Word provides automatic hyphenation (although it seems it is little used) as well as word spacing justification. If working in HTML, current browser support is limited to CSS2.1 word-spacing justification {text-align: justify;} (excluding, of course, the deprecated HTML variant of the same name).
Hyphenation on the web
On the web, soft hyphens (­ or ­) can be added manually to tell browsers where a word can be broken across lines. A soft hyphen will be displayed only when needed and, if desired, can be added multiple times to long words to give the browser options as to where a break might occur. The mark up might look like the following: hy­phen­at­ion, which might be rendered as:
… hy-
phenation
… hyphen-
ation
or … hyphenat-
ion
Some older browsers struggle with or ignore the soft hyphen, but all modern browsers render it correctly. However, because soft hyphens must be added manually, in the real world they aren’t much used. In the future, CSS3 will no doubt provide some form of automated hyphenation such as, perhaps, {hyphenate: auto;} but as of this writing the exact form it will take is still open to debate.[5]
Justification in web pages
As mentioned at the top of this article the CSS3 working draft does also offer the promise of a fine level of control over text justification. There are currently a total of seven options available including:
inter-word
– {text-align: justify; text-justify: inter-word;} – simple spacing between words – does not justify the last line of a content block.
newspaper
– {text-align: justify; text-justify: newspaper;} – combines letter spacing and word spacing. According to the Internet Explorer reference “it is the most sophisticated form of justification for Latin alphabets.”[6]
However, also as noted above, to date there is virtually no browser support for these.
In sum, if you have InDesign or QuarkXPress you can produce good quality justified text relatively easily. But for web pages or for word processor generated documents there are fewer tools available and a good deal more manual work may be required, at least for the time being.
Notes
[1] The Elements of Typographic Style, Robert Bringhurst, Hartley & Marks, 2005, p28
[2] The Elements of Typographic Style, Robert Bringhurst, Hartley & Marks, 2005, p192
[3] The Elements of Typographic Style, Robert Bringhurst, Hartley & Marks, 2005, p42
[4] The Elements of Typographic Style, Robert Bringhurst, Hartley & Marks, 2005, p28
[5] CSS Text Level 3, W3C Working Draft, 6 March 2007