Justified Text and Long Runs of Capitals

Neat edges, uneven gaps

Justified text lines up on both the left and the right, like a newspaper column. In a design mockup it looks tidy, which is usually why it was chosen.

To make every line reach both edges, the browser stretches the spaces between words.

On a wide screen the gaps vary a little. On a phone, with five or six words to a line, some grow wide enough to break the line apart.

The same sites often set introductions or whole sections in capital letters, or long passages in italics, to look elegant. Both slow reading down.

None of this stops anyone using the site. It is friction on every line, for every reader, and a good deal more for some.

Who it slows down

• Readers with dyslexia, who find uneven spacing makes words harder to separate.
• People with low vision, whose enlarged text stretches the gaps further.
• Anyone on a phone, where narrow columns exaggerate every stretched space.
• People reading in a second language, who lose their place more easily.
• Screen reader users, whose software may spell out words typed in capitals.

The first is the reason this matters beyond taste. Dyslexia is common, and guidance written for readers with dyslexia regularly asks for left-aligned text, no blocks of capitals and no long italic passages.

What justification does to a line

Readers find the edges of words partly by the spaces between them. When every space is the same width, the eye moves along the line in an even rhythm.

Justified text breaks that rhythm. Some spaces are narrow and some are wide, and in a long paragraph the wide ones can line up into channels of white running down the text, which typesetters call rivers.

Print avoids the worst of it with hyphenation and careful setting, line by line. A website cannot, because the width of each line changes with every screen, and browsers rarely break long words on their own.

So a single long word in a narrow column can pull the spaces of a whole line apart.

Ragged right is easier

Left-aligned text keeps every space the same width and lets the right edge fall where it falls.

The uneven edge helps rather than hurts: each line ends in a slightly different place, which gives the eye a landmark when it jumps back to find the next line.

WCAG 2.0, the accessibility standard most sites are measured against, lists text that is not justified among the requirements of its highest level. Few sites aim for that level in full, but this part costs nothing.

Capitals for labels, not paragraphs

Lowercase letters rise and fall: the tall strokes of a d or an h, the tails of a g or a y. Those shapes give each word an outline.

In capitals every word becomes an even rectangle, and readers have to work through the letters instead of recognising the shape. A heading of three words survives that. A paragraph does not.

Capitals also read as a raised voice, rarely the tone a business wants for its introduction.

Keep them for short labels: a button, a menu item, a two-word heading.

Italics for a word, not a page

Italic letters slant and narrow, and their shapes are less distinct than upright ones. For a book title, a foreign word or a single word of emphasis, that is fine.

A whole testimonial section in italics, or an about page in a flowing script, asks every reader to decode rather than read. Pale grey italic text on white adds a contrast problem on top.

A worked example

A calligrapher who letters wedding invitations, place cards and certificates had a site designed to echo her work: a script typeface for headings, italic body text, and every paragraph justified for the clean edges of a printed card.

The about page opened with a paragraph in widely spaced capitals. The page explaining how to order, with deadlines for proofs and printing, was set in italics.

It looked lovely in the design files. On a phone the justified italic lines broke into scattered words, and one couple said they had given up on the ordering page and phoned instead.

The redesign kept the script for her name and the page headings, where a few words show off the craft. Body text moved to a plain upright typeface, left-aligned, in sentence case.

Capitals stayed for the four menu items. Italics stayed for the names of paper stocks. The calligraphy itself now appears in photographs of finished pieces, which show it far better than any typeface could.

Type it normally, style it in capitals

If the design calls for capitals, the text should still be typed in ordinary sentence case and turned into capitals by the style sheet, the part of the site that controls appearance.

Then a screen reader reads the words as words, someone who copies the text gets normal sentences, and a later redesign can drop the capitals without retyping a single heading.

Text typed with the caps lock on stays in capitals forever, whatever the design does next.

Line length and spacing

Lines that run the full width of a large monitor are hard to follow back to the start of the next line. Very short lines break sentences into fragments.

Somewhere around 50 to 75 characters per line is the traditional comfortable range, and the same part of WCAG 2.0 sets 80 as the limit. A maximum width on text columns keeps lines there on every screen.

Line spacing matters too. About one and a half times the text size, within paragraphs, gives each line room without loosening the page.

The counter-case

Justified text does least harm in wide columns with hyphenation switched on, which some sites can manage on large screens. Few can promise it on a phone.

Capitals, italics and script also have their place. A logo, a single heading or a short label in capitals is part of a brand and harms nobody.

The rule is about paragraphs people need to read: left-aligned, sentence case, upright type, at a comfortable length.

The changes, in order

1. Switch body text to left-aligned.
2. Retype paragraphs set in capitals in sentence case.
3. Use the style sheet for capitals the design needs.
4. Limit italics to titles and single words.
5. Set a maximum width on text columns.
6. Loosen line spacing in long paragraphs.
7. Check every page on a phone afterwards.

Step one is the smallest change with the widest effect. It is usually a single setting in the theme or the style sheet, and it evens out the spacing in every paragraph on the site at once.

Text that moves on before it can be read is the subject of slideshows that move too fast to read.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.