Text Alignment

Typography

Text Alignment

Text alignment is the setting that decides which edge each line of a paragraph lines up against — left, center, right, or justify — shaping how easily text reads.

Text alignment sets which edge a paragraph lines up against. Justified text stretches the spaces between words to align both edges, which can leave uneven gaps.

text-align

Definition

Text alignment is the setting that decides which edge each line of a paragraph lines up against. You pick from left, center, right, and justify, which stretches every line to reach both edges evenly. When we read, our eyes finish a line and then swing back to the start of the next one, over and over. If that starting point always sits in the same place, the eye never has to hunt for it and reading flows naturally. That is why left-aligned text, with its steady starting edge, is the most comfortable choice for long body copy and the safe default on almost any screen. One thing to keep straight: the alignment we mean here is about placing letters, which shares only its name with aligning elements on a layout — they are different ideas.

Why does it matter?

Alignment is not just a matter of taste; it directly affects how fast and how comfortably people read. Left alignment starts every line on the same vertical edge, so the eye finds the next line easily, which suits body copy well. Center alignment shifts the starting point on every line, so the longer the lines get, the more the eye has to relocate the start each time, and it tires quickly. That is why center alignment only works for short, one- or two-line pieces like headings or pull quotes. Justified text lines up both edges for a tidy look, but to do so it has to stretch the spaces between words, which easily creates rivers — gaps that connect vertically down the paragraph. Pick the wrong alignment and even great writing becomes a chore to read.

Common mistakes

  • Setting long body copy in center alignment. Because the starting point moves on every line, the eye has to find the beginning again each time, so the longer the paragraph, the noticeably harder it is to read. Save center alignment for headings and short phrases.
  • Applying justify to web body copy with no other adjustments. As the spacing between words widens line by line, rivers of white space run vertically and the text ends up looking messier, not cleaner. Unlike print, the web has weak automatic hyphenation, so the problem stands out more, and the narrower the screen, the fewer words fit per line and the wider those gaps grow.

Practical tips

  • Keep center alignment to short headings and quotes, and avoid justify in web body copy when you can — use it carefully even then. For anything with real length to read, left alignment is almost always the safest default, and when you are unsure, leaving it left-aligned fails the least often.
  • Do not mix a bunch of different alignments within one screen. When the heading and the body each go their own way, the flow of the eye breaks, so unless you have a specific reason, keeping everything on the same baseline looks cleaner. If you treat every alignment change as something that needs a real reason, you will make fewer mistakes.
  • Lists of numbers or prices can benefit from right alignment, since it lines up the digits for easy comparison. It does not suit running sentences, though, so limit right alignment to cases where you need to compare values side by side. Pairing it with tabular, fixed-width figures makes the digits line up even more crisply.

Ask your AI

Body text is centered or justified and hard to read

Find every text-align in the CSS/JSX I'll paste below and switch any body paragraph longer than two lines to text-align: left, no exceptions. Keep center alignment only for one- or two-line headings and pull quotes, and strip justify from web body copy — the stretched word spacing creates vertical rivers of whitespace, and the web's weak auto-hyphenation makes it worse. For each change, give me a table of the original alignment, the new one, and why.

A list or table where numbers or prices need to line up

In the table/list code I'll paste below, set numeric columns like amounts and quantities to text-align: right so the digits line up for comparison, and add font-variant-numeric: tabular-nums for fixed-width figures so the columns stay crisp. Leave sentence-style columns like names and descriptions at text-align: left, since right alignment doesn't suit running text. Tell me which columns you switched to right and the reasoning for each.

Setting an alignment rule for a new screen

This screen is [screen type — e.g. product detail + pricing table]. Define one text-alignment rule for the whole screen: left as the default for body copy, center only for one- or two-line headings and quotes, and right only for numeric columns being compared side by side — and don't mix alignments within a single screen; keep them consistent unless there's a specific reason. Lay it out as a rule table showing which alignment each area (heading, body, numbers) uses and why.

Related concepts