Rivers, rags and where the line breaks · Design, Before Any Software

Why justified text goes wrong

Justified text has flush edges on both sides. To achieve that, the setting engine stretches or compresses the spaces between words until the line fills the measure exactly.

The number of spaces available to absorb that adjustment is roughly the number of words on the line. On a 70-character measure there might be twelve words and therefore eleven spaces, so each absorbs a small share. On a 35-character phone measure there might be five words and four spaces, so each has to stretch four or five times as far.

When several consecutive lines have wide spaces in nearby positions, they connect into a pale channel running down the paragraph. These are rivers, and once you have seen one you will see them everywhere. They are distracting in a specific way: they compete with the horizontal reading motion by offering a vertical path.

The rule that follows is mechanical, not stylistic:

Justify only at a wide measure — 60 characters and up — and only with hyphenation enabled. Never justify at phone width.

Hyphenation is the missing half

Hyphenation gives the engine somewhere else to absorb the adjustment: it can break a long word rather than stretch every space on the line. Justification without hyphenation is the setting that produces the worst rivers, and it is the default in most web pages and word processors.

On the web, hyphenation requires two things and people usually do one of them:

css

p { hyphens: auto; }

html

<html lang="en-GB">

The lang attribute is not optional. Hyphenation is language-specific — the rules for breaking English words are not the rules for German or Hindi — and without a declared language the browser has no dictionary to consult and will silently do nothing. This is one of the most common invisible faults on the web: the CSS is present, the attribute is missing, and nobody notices that hyphenation never ran.

Ragged is usually right

Ragged-right setting — flush left, uneven right edge — keeps word spacing constant, which keeps the paragraph's texture even. It is the correct default for screens and for narrow measures.

A good rag has a shape. What to look for:

No line dramatically shorter than its neighbours. A rag that varies between 90% and 100% of the measure looks accidental; one varying between 75% and 100% looks like a rag.
No accidental shape. If the right edge forms a wedge, a curve or a staircase over several lines, the eye reads it as an object.
No stack of identical endings. Three consecutive lines ending in the word and, or two consecutive hyphens, both draw attention.

You adjust a rag by changing the measure slightly, by inserting a non-breaking space to force two words to stay together, or by rewriting. In long web text you cannot control it, which is fine — this is a fine-typography concern for headlines, pull quotes and print, not for flowing body text that reflows on every device.

Headlines are where line breaks matter most

A headline that breaks badly changes the sentence. Consider:

The committee rejected the plan to
close the library

against

The committee rejected the plan
to close the library

The second breaks at a phrase boundary and reads in one pass. CSS now has a declaration for this:

css

h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

balance evens the line lengths across a short block, which is what you want for headings of up to about four lines. pretty leaves the lines alone but avoids leaving a single word on the last line. Both are recent, both degrade harmlessly where unsupported, and balance is deliberately limited to short blocks because the computation is expensive.

Widows and orphans

Two terms that get swapped constantly. The conventional definitions:

An orphan is the first line of a paragraph left alone at the bottom of a column or page.
A widow is the last line of a paragraph left alone at the top of the next one.

A single word alone on the last line of a paragraph is also commonly called a widow, or a runt. All three are worth avoiding because they look like a mistake in the production rather than a property of the text.

In CSS, orphans and widows take effect only in paged contexts — printing and multi-column layouts — and do nothing in ordinary continuous flow. In Scribus, LibreOffice Writer and any word processor, the equivalent setting lives in the paragraph controls and does work. This is a case where print tools are simply better equipped than the browser, and it is worth knowing which environment you are in before you promise anybody a fix.

Never centre a paragraph

Centred text has no straight left edge, so the return sweep at the end of each line has no target and has to search. Over three lines it is a stylistic choice. Over ten it is a real cost, paid by every reader, for nothing.