# Don't Center Body Text

**SHOULD** · **ID:** `content-no-centered-body` · **Category:** content
**Source:** Custom
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-no-centered-body

> 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

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.

## Rule snippet

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

## Bad — do not do this

`content-no-centered-body-bad`

```tsx
export function NoCenteredBodyBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="rounded-lg border border-border bg-card p-4">
        <p className="text-center text-sm leading-relaxed text-foreground">
          Every line in this paragraph starts at a different horizontal position, so your eye has to
          hunt for the beginning of each one. It reads as balanced in a mockup and as work at length —
          the classic tell of a centered body column.
        </p>
      </div>
      <p className="mt-4 text-xs text-destructive">
        Centered body: no consistent left edge, so the return sweep has nowhere fixed to land.
      </p>
    </div>
  );
}
```

## Good — do this

`content-no-centered-body-good`

```tsx
export function NoCenteredBodyGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="rounded-lg border border-border bg-card p-4">
        <p className="text-left text-sm leading-relaxed text-foreground">
          Every line in this paragraph starts at the same horizontal position, so your eye returns to one
          fixed edge and the next line begins automatically. Flush-left with a ragged right edge is what
          running text wants; centering is for short, deliberate lines.
        </p>
      </div>
      <p className="mt-4 text-xs text-success">
        Flush-left: the eye returns to one fixed edge, so each new line begins without a hunt.
      </p>
    </div>
  );
}
```

## References

- [Butterick — Practical Typography: centered text](https://practicaltypography.com/centered-text.html)
- [bencium — typography skill (Butterick-derived)](https://skills.sh/bencium/bencium-marketplace/ui-typography)