Centred or left-aligned text: why paragraphs read better on a left edge
Left-aligned text gives every line the same starting point, so the eye can return to it without searching. Centred text gives each line a different start, which is fine for two short lines and tiring for a paragraph. Centre short, single-purpose elements if you like; left-align anything people actually read.
Why centred paragraphs are harder to read
Reading a paragraph is a loop: read a line, sweep back, find the start of the next line, repeat. With a left-aligned block (in left-to-right languages), the start of every line sits on one vertical edge, so the return sweep lands in the same place each time. With centred text the starting point moves on every line, depending on how long the line happens to be. The reader has to search for it, a small cost that adds up over several lines and is worse for people with dyslexia, low vision or attention difficulties, and for anyone reading on a zoomed screen where the line starts may be off the edge.
Centred text also breaks the vertical edge that scanning depends on. With a ragged left edge, headings, list items and paragraphs no longer line up, so the page loses its structure and reads as a series of floating blocks.
Where centring does work
- A short headline, up to two or three lines, especially in a hero with nothing beside it.
- A single line of supporting text directly under a centred heading.
- Buttons and labels inside their own boxes, such as a button's text or a number in a stat tile.
- Short, standalone moments: a quotation of a sentence or two, a closing call to action, a 404 message.
- Symmetrical, ceremonial layouts such as an invitation, where formality is the point and the text is brief.
The pattern behind all of these: the text is short, it stands alone, and there's nothing on either side for it to align with.
Centered vs left aligned text on websites, element by element
| Element | Alignment | Why |
|---|---|---|
| Body paragraphs | Left | A fixed start for every line |
| Lists | Left | Bullets and numbers need a shared edge |
| Form labels and fields | Left | Labels sit above fields on one edge, which scans fastest |
| Section headings | Left, usually | They should line up with the text they introduce |
| Hero headline with nothing beside it | Left or centre | Either works for one to three lines |
| Prices and numbers in tables | Right | Digits line up by place value |
| Captions | Left, matching the image edge | Keeps the caption attached to its image |
| Footer columns | Left | Several centred columns look ragged side by side |
What about justified text?
Justified text, flush on both edges, looks neat in print where hyphenation and careful spacing fill each line. On the web, browsers justify by stretching the spaces between words, which creates uneven gaps and “rivers” of white running down the paragraph, especially in narrow columns on phones. WCAG's visual presentation criterion, at level AAA, lists text not being justified as one of its requirements for blocks of text. Left-aligned, ragged-right text is the safe default; MDN's text-align reference covers the options.
Fixing an everything-centred page
- Left-align every paragraph and list first. That alone fixes most of the readability problem.
- Give the text a measure. Left-aligned text across a 1200px container is too wide; set a maximum width of about 60 to 75 characters. See ideal line length for web.
- Align headings with their text. A centred heading over a left-aligned paragraph looks detached; move both to the same edge.
- Decide on one exception. If you want centring, keep it to the hero or a closing call to action and make it consistent.
- Rebuild symmetrical sections. A row of three centred cards with icons can become a left-aligned list with real details, which often reads better anyway.
- Recheck on a phone. Centred text on narrow screens produces short, uneven lines; left-aligned text holds up better.
Alignment in Anticode
Anticode's design engine sets body copy, lists, form labels and section headings on a left-aligned reading line in all seven design systems, and gives the hero's supporting text a maximum width of 38 characters' worth (38ch) so it never stretches across the page. Prices and numbers in lists use tabular figures so they line up. The guide why so many AI websites look the same lists everything-centred pages among the common habits of generated sites.
The layout editor's inspector also has an Align setting with Start, Centre, End and Fill. That controls how elements sit within their section, not the alignment of text inside a paragraph, so it won't centre body copy line by line.
Questions people ask
Why is centred text hard to read?
Every line starts in a different place, so the eye has to search for the start of the next line. Over a paragraph that slows reading and causes skipped lines.
Should website headings be centred?
Usually not, unless the whole section is short and centred. Headings read best on the same edge as the text they introduce.
Is it ever right to right-align text?
For numbers in tables, so digits line up, and for text in right-to-left languages, where right alignment is the natural reading edge.
Sources
- Understanding SC 1.4.8: Visual Presentation, W3C, checked
- text-align, MDN Web Docs, checked