design hubs
On this page
Hierarchy and Weight
2 min read

Alignment and What It Signals

Alignment is a structural commitment, not a stylistic preference. Left alignment creates a reliable reading edge. Each choice has a cost the designer must own.

Text alignment determines where the reader’s eye returns at the end of each line. It is one of the most consequential decisions in typographic layout because it directly affects reading speed and the visual signals a piece of text sends. Each alignment mode carries structural and communicative implications that go beyond aesthetics.

Left alignment

Left alignment is the default for good reason. The left edge of a text block is constant — the reader’s eye always knows where to return at the end of each line. This predictability reduces the cognitive cost of reading. The right edge is ragged, which means no two lines end at the same point, but this affects nothing because the eye never needs to find the right edge.

For body text in interfaces, left alignment should be the default in almost all cases. It is the most comfortable setting for extended reading in left-to-right languages, it is universally accessible, and it imposes no visual instability on the text block.

Centred text

Centred alignment removes the stable left edge. Every line is different lengths, so the reader must find the beginning of each new line rather than returning to a fixed point. For short text — two to three lines of a heading, a caption, a button label — this cost is negligible. For body text, it becomes exhausting after a few lines.

Centred text signals ceremony, formality, or symmetrical composition. It is appropriate when the content itself calls for these associations: a title page, a toast, a pull quote, a badge. It is inappropriate when the content’s primary requirement is to be read efficiently.

Justified and right alignment

Justified alignment creates straight edges on both sides. In print, where hyphenation can control line breaks precisely, it creates a clean, formal texture. On screen, without careful hyphenation control, it creates uneven word spacing — “rivers” of white space running through the text block. For most web use, justified text is a worse reading experience than left-aligned text.

Right alignment is rare in left-to-right text and almost always limited to specific use cases: labels for data tables where the right-aligned number aligns with a column edge, captions adjacent to a left-side image, or UI elements that pair with a right-edge interface element. Using right alignment for body text in a left-to-right context creates the same problem as centred text: every line starts in a different place.

Mixing alignments

Each alignment change within a layout is a visual event. Using left alignment for body and centred alignment for a pull quote creates a clear register shift — the reader understands the pull quote is different. Mixing three or four alignments on a single page creates visual restlessness and signals that the layout has no clear system.

Practice

0 / 3

Keyboard shortcuts

Show shortcuts
?
Search
CtrlK
Previous article
Next article
Close
Esc