Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

contentimpeccable

Don't Justify Without Hyphenation

NEVER

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

p { text-align: justify; hyphens: auto; } /* requires <html lang="en"> */

Bad

Good

Why it matters

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.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.