For long-form article text in a design system, why is start-aligned ragged text preferred over justified text, and when is justification acceptable?

## The alignment options Text in a block can be aligned four ways, and each has a place: | Alignment | What it does | Good for | Cost in long text | |---|---|---|---| | Start-aligned, ragged end | Lines share a straight starting edge and end wherever the last word falls | Body copy, lists, most interface text | Uneven line endings, usually harmless | | Justified | Every full line is stretched to touch both margins | Wide, hyphenated, proofread print columns | Uneven word gaps and rivers of white space | | Centered | Each line is centered in the column | Short headings, pull quotes, empty states | Every line starts somewhere new, so the eye has to hunt | | End-aligned | Lines share the ending edge | Numbers in table columns, short metadata | Ragged starts, as with centered text | **Start** means the edge where reading begins: the left in left-to-right scripts, the right in right-to-left ones. Naming alignment by start and end rather than by left and right lets one text style serve both directions. ## What justification does A text engine justifies a line in a few steps: 1. Fill the line with as many whole words as fit. 2. Measure the leftover space between the last word and the far margin. 3. Divide that space among the gaps between words (and, in some engines, between letters) so the line reaches both margins. 4. Leave the last line of the paragraph start-aligned. The fewer words a line holds, the fewer gaps share the leftover space, and the wider each gap becomes. Where wide gaps happen to line up on consecutive lines they form **rivers**: vertical channels of white space that pull the eye down the paragraph instead of along the line. Start-aligned text keeps every word gap the same width, which is the even texture readers rely on, and its varied line endings give each line a distinct shape that helps the eye find the next one. ## Why screens make it worse than print - **Narrow, changing columns**: a phone column holds perhaps six to eight words, so each line's stretch is large, and the column width differs on every device. - **No proofing per line**: a print compositor or editor can fix a bad line by hand; on screen, nobody sees a given line break before the reader does. - **Hyphenation varies**: good justification depends on breaking long words, and automatic hyphenation quality differs by language, device and text engine. - **Long unbreakable strings**: web addresses, product codes and long compound words leave a line with one or two huge gaps. - **Reader settings move the breaks**: when readers enlarge text or spacing, every line break moves, so a paragraph that looked acceptable in review is re-justified into something else. ## Who is hurt most Uneven word spacing is a recognised difficulty for some readers with dyslexia, and for readers using screen magnification, who see only a few words at a time and can mistake a wide gap for the end of a line. WCAG 2.2 reflects this in **SC 1.4.8 Visual Presentation**, a **Level AAA** criterion that lists text which is not justified among the settings a mechanism must make achievable. It is not a Level AA requirement, so a candidate who says justified text fails an AA audit is overstating it; the AAA text still shows which way the evidence points. ## When justification is acceptable - A **wide** column where each line holds many words, so the stretch per gap stays small. - **Working hyphenation** for the language, so long words can break. - **Fixed, proofed output**, such as a print edition or a page laid out once and checked by eye. - A clear editorial reason, such as matching a print product's look, with the cost understood and accepted. ## What the design system encodes 1. The body and prose text styles default to **start alignment**. 2. Centered alignment is documented for **short** elements only, such as a pull quote or a section-front headline, with a line limit in the guidance. 3. Justification is either left out of the system or offered only as a prose option that requires hyphenation and a minimum column width. 4. The documentation states the reason, so a request to make the website look like the printed paper becomes a conversation instead of a silent override.