Left-align by default

Left-align text; center only short heroes, single CTAs, empty states.

From refactoring-ui, section 7, Layout & Composition.

Where each line starts

Switch alignment, then press Trace.

At the end of every line your eye makes a return sweep back to the start of the next one. With a left edge, that target sits in the same place every time, so the jump is automatic. Center the text and the target moves on every line: the eye searches before it can land, and on a long paragraph those searches add up.

0 lines 0px spread text-align: left

Bullets need a column

Add a feature and compare where the checkmarks land.

CenteredBad
    0pxtext-align: center
    Left-alignedGood
      0pxdisplay: flex; gap: 8px

      When centering is fine

      Try the long subtext or a longer headline.

      Close the books in a day

      Bank feeds, reconciliations and reports in one place.

      Start free trial
      0text-align: center

      Why it matters, pros and cons

      Why it matters

      After each line the eye jumps back to find the next start. A fixed left edge makes that landing automatic.

      Pros

      • Paragraphs, lists and forms scan faster.
      • Bullets and icons line up.
      • One edge ties labels and inputs together.

      Cons

      • Heroes and single-CTA empty states read better centered.
      • RTL scripts: use text-align: start, not left.
      • Table numbers right-align so digits line up.