Is justified text bad for readability? Word gaps, measured on real paragraphs

What justification actually does

A browser can only make a line reach both margins by changing something. With text-align: justify it adds space between words. It does not shrink letters or move words to other lines to compensate, so a line that ended with a long word and a lot of leftover room gets very wide gaps, and the last line of a paragraph is left alone. Left-aligned text leaves the right edge ragged instead and keeps every gap the same.

The measurement

The test used every paragraph of at least 25 words from this site's article bodies: 472 paragraphs, 24,107 words. Each was laid out at four column widths in headless Chromium 141 with the article font size. For every line except the last, the script measured the average gap between words and divided it by the width of a normal space.

Two readings. First, the median is not the problem: a typical gap at phone width is under twice normal. The problem is the spread: at 358px more than a third of lines had gaps over double, and one line in twenty was over 3.6 times. Second, the extreme values (the maximum was about 30 times at 358px) come from lines holding one very long word, such as a URL, and should be treated as outliers, which is why the table uses percentiles.

What the standard says

That is a standard's position, not a measurement of any particular page. It is worth knowing for two reasons: it names a specific group of readers who are affected, and it is the same concern the 95th-percentile numbers above describe. The accessibility testing guide covers why this kind of issue is invisible to automated checkers.

The hyphenation caveat

Hyphenation is the standard remedy: breaking long words across lines gives the browser more places to end a line, so fewer lines need big gaps. hyphens: auto only works when the page declares its language and the browser has a hyphenation dictionary, according to MDN. In the headless Chromium used for this measurement, hyphens: auto produced numbers identical to plain justify, which means no dictionary was available. So the table above is the no-hyphenation case, the worst one. Desktop and mobile browsers with dictionaries will do better, and how much better is exactly what this test could not show.

A rule you can apply

.article-body p { text-align: left; }

@media (min-width: 700px) {
  .article-body p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}

The breakpoint is a judgment call: it exists so the narrow case gets the ragged edge and the wide case gets the tidy one. Pair it with a sensible line length and the spacing values from the standard, and check the result against the UI/UX checklist's typography items.

text-align: justify;
text-justify: inter-word;
hyphens: auto;

Measure your own pages

This console snippet prints the median word gap, as a multiple of a normal space, for one plain-text paragraph (it expects the paragraph's first child to be a single text node, so pick one without links or inline code):

function wordGap(p) {
  const node = p.firstChild;
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = getComputedStyle(p).font;
  const space = ctx.measureText(' ').width;
  const rects = [...p.textContent.matchAll(/\S+/g)].map(m => {
    const r = document.createRange();
    r.setStart(node, m.index); r.setEnd(node, m.index + m[0].length);
    return r.getClientRects()[0];
  });
  const lines = {};
  rects.forEach(r => (lines[Math.round(r.top)] ||= []).push(r));
  const gaps = Object.values(lines).slice(0, -1).filter(l => l.length > 1)
    .map(l => l.slice(1).reduce((s, r, i) => s + r.left - l[i].right, 0)
                / (l.length - 1) / space);
  return gaps.sort((a, b) => a - b)[Math.floor(gaps.length / 2)];
}
wordGap(document.querySelector('.your-paragraph'));

Run it at a phone width, then at a desktop width, with justification on and off. A value near 1 means the gaps are close to normal.

What this does not cover