Skip to main content

Search rules

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

contentCustom

Don't Center Body Text

SHOULD

SHOULD: Set running body text flush-left (ragged right) so the eye returns to one fixed edge each line. Centered text moves every line's start and makes the reader hunt for it — acceptable only for short, deliberate lines (a hero, a pull quote), never for paragraphs.

Center a heading or a short line if you must, but set running paragraphs flush-left — centered body makes the eye hunt for each line's start

<p class="text-left">…paragraph…</p>   {/* not text-center */}

Bad

Good

Why it matters

Reading is a loop: the eye sweeps left to right, then flicks back to a KNOWN horizontal position to begin the next line. Flush-left text keeps that return point fixed, so the flick is automatic and unconscious. Centered text moves the start of every line, so the reader has to visually hunt for where each one begins — tolerable for a two-line hero or a pull quote, genuinely tiring across a paragraph.

A centered column of body copy is a reliable tell of template or AI layout: it looked "balanced" in the mock and reads like work at length. Set running text flush-left with a ragged right edge, and reserve centring for short, deliberate lines. This is distinct from content-impeccable-justified-text, which is about the RIGHT edge (do not justify without hyphenation); this rule is about the left edge existing at all.

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.