Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Alignment

Shared edges create invisible lines that organise a layout and make it feel deliberate.

Definition

Alignment is the placement of elements along common axes. Every element should have a visual relationship with something else on the page, and unaligned elements read as accidental even when nothing else is wrong.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Rules that hold across most interfaces
  3. In practice
  4. Sources
  5. Continue from here

Rules that hold across most interfaces

  • Prefer left alignment for text in left-to-right languages. Justified text creates rivers of whitespace on the web because browsers cannot hyphenate as well as print typesetting.
  • Centre text only in short runs: headings of a line or two, empty states, single-purpose cards. Centred paragraphs are hard to read because each line starts in a different place.
  • Align numbers right, or use tabular figures, so digits line up by place value.
  • Keep to as few alignment axes as the content allows. Every additional axis weakens the structure.
  • Align to the optical edge, not the geometric one, for shapes such as circles and triangles.

Do

  • Give every element a relationship to a shared axis.
  • Use tabular figures for any column of numbers.
  • Mirror alignment correctly under right-to-left layouts, using logical CSS properties.

Do not

  • Justify body text on the web.
  • Centre multi-line paragraphs.
  • Mix left, centre and right alignment within one content block.

In practice

Number columns

Tables

Right-aligned numbers with tabular figures let the reader compare magnitude by shape alone. Left-aligned numbers of different lengths make comparison a reading task.

Form label alignment

Forms

Labels above fields, left-aligned with the input, produce the fastest completion in most studies and are the safest default for responsive and localised layouts.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • The Non-Designer's Design Book

    R. Williams, Peachpit Press, 1994, revised 2014

    Source of the widely taught proximity, alignment, repetition and contrast framing.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA Data TableA FormA Pricing PageAn Enterprise Workflow

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.