Skip to content →

/əˈlaɪn.mənt/

Alignment

noun · composition & layout

The arrangement of elements so their edges or centre axes line up along a common line, creating visual order and an implied connection between the aligned parts.

What it is

Alignment is how a layout tells the eye that separate elements belong together. When a heading, a paragraph, and a caption all share a left edge, the eye reads them as one connected group even when space separates them; the invisible line they share does the connecting. Nothing in a designed layout should be placed arbitrarily — every element should align with something else on the page, which is why alignment is one of the four classic principles of layout alongside proximity, contrast, and repetition.

Alignment operates at two scales. Within a paragraph it describes how lines of type meet the column edges — flush left (ragged right), flush right, justified (flush both), or centred. Across a layout it describes how blocks line up to the columns and flow lines of a typographic grid. Strong edge alignment is what makes a grid-built page feel crisp; broken alignment is the most common reason an amateur layout looks untidy.

Three text blocks sharing a common left edge marked by a vertical alignment lineshared left edge
Three blocks aligned to a common left edge (dashed line).

Etymology

From the French aligner ("to put in a line"), alignment entered design vocabulary from surveying and military drill. Its perceptual basis is the Gestalt principle of continuity — the mind prefers to see elements arranged along a continuous line as related. Josef Müller-Brockmann's grid theory makes alignment to shared axes the organising logic of the page, and Ellen Lupton frames it as a core layout principle in Thinking with Type.

Examples in use

"Set the body flush left so the ragged right edge keeps even word spacing." A designer aligns every caption to the left edge of the image it describes so the connection is unmistakable. In interface design, aligning form labels to a single axis lets the eye scan a field list top-to-bottom without horizontal hunting.

See also: Visual hierarchy · Typographic grid · Negative space · Hierarchical grid overlay

References

  1. Lupton, Ellen. Thinking with Type, 2nd ed. Princeton Architectural Press (2010). ISBN 978-1-56898-969-3.
  2. Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli (1981). ISBN 3-7212-0145-0.
  3. Williams, Robin. The Non-Designer's Design Book, 4th ed. Peachpit Press (2014). ISBN 978-0-13-396615-2.

Sarah Chen

Founder of Grid Maker Pro. Classical portrait painter (BA Fine Arts). Writes about composition, drawing methods, and the art-history claims that don't survive measurement.

Updated · Methodology