# Don't Justify Without Hyphenation **NEVER** · **ID:** `content-impeccable-justified-text` · **Category:** content **Source:** [impeccable](https://impeccable.style/) **Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-impeccable-justified-text > NEVER: Ship `text-align: justify` without `hyphens: auto` — stretched word-spacing carves rivers of white through the paragraph. Left-align body text; if a justified column is non-negotiable, set `hyphens: auto` plus a `lang` attribute so the browser has a dictionary. Left-align body text, or enable hyphens: auto if the design demands a justified column Browsers justify a line by stretching word-spacing until it reaches both margins. On a narrow measure there are only a few gaps to absorb the slack, so each one grows, and when wide gaps stack across consecutive lines they carve visible vertical channels through the paragraph. impeccable's detector flags exactly the combination text-align: justify where hyphens is not auto. Left alignment sidesteps the problem entirely; hyphens: auto (plus a lang attribute so the browser knows the dictionary) is the escape hatch when a justified column is non-negotiable. ## Rule snippet ```tsx p { text-align: justify; hyphens: auto; } /* requires */ ``` ## Bad — do not do this `content-impeccable-justified-text-bad` ```tsx const COPY = 'Browsers justify a line by stretching the spaces between words until the line reaches both margins. On a narrow measure there are only a handful of gaps to absorb the slack, so each one grows enormously, and when the wide gaps happen to stack up, they carve a pale vertical channel down the paragraph.'; export function ImpeccableJustifiedTextBad() { return (

{COPY}

text-align: justify with{' '} hyphens: none — the exact combination the detector flags. Squint at the paragraph: the stretched word gaps line up into “rivers of white” running through it. Nothing here is broken in code, but the text is measurably slower to read.

); } ``` ## Good — do this `content-impeccable-justified-text-good` ```tsx const COPY = 'Browsers justify a line by stretching the spaces between words until the line reaches both margins. On a narrow measure there are only a handful of gaps to absorb the slack, so each one grows enormously, and when the wide gaps happen to stack up, they carve a pale vertical channel down the paragraph.'; export function ImpeccableJustifiedTextGood() { return (

Default: left-aligned

{COPY}

If you must justify: hyphens: auto

{COPY}

Left-aligned text keeps every word gap identical and lets the right edge stay ragged — no rivers, no compromise. If a design genuinely calls for a justified column, add{' '} hyphens: auto plus a{' '} lang attribute so the browser can break words at syllable boundaries and absorb the slack there instead of in the spaces.

); } ``` ## References - [impeccable](https://impeccable.style/) - [MDN: hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) - [MDN: text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)