Skip to content
UX Atlas
Plate FND·003 · UI foundationGrid D1 · Rev. 2026-08-14

Alignment

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Rules that hold across most interfaces
  3. 3What to align to, by content type
  4. 4In practice
  5. 5Local chart
  6. 6Sources
  7. 7Continue from here

Reach for this when

  • Any layout that feels untidy without an obvious cause.
  • Designing tables and numeric displays.
  • Setting up grid and spacing rules.
  • A layout feels untidy and nothing is obviously wrong with the individual elements.

Common mistakes

  • Too many alignment axes.
  • Centred body text.
  • Ignoring optical adjustment for round and pointed shapes.

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.

What to align to, by content type

ContentAlignWhy
Body text in most scriptsLeft, ragged rightJustified text opens rivers of space without hyphenation
Numbers in a columnRight, tabular figuresDigits line up by place value, so magnitude is visible
Currency with symbolsRight, symbol alignedThe eye compares the amounts, not the symbols
Form labels above fieldsLeft, with the fieldFastest to complete, and it survives translation
DatesRight or decimalSo the same components sit in the same place per row
Mixed icon and labelOptical centre, not the boxThe glyph's visual mass rarely matches its bounding box

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    One stray edge

    Why alignment is noticed only when it breaks

    Eleven aligned elements and one two pixels out reads as carelessness before anyone identifies the cause. Alignment is invisible when correct and is the first thing a trained eye finds when it is not.

Local chart

FND·003 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Data TableCMP·025 · APPLIED THROUGHNatural MappingPRIN·008 · PRINCIPLES BEHIND THISGridTERM·068 · SHORT DEFINITIONRight-to-Left (RTL)TERM·137 · SHORT DEFINITIONTabular FiguresTERM·063 · SHORT DEFINITIONColumnsFND·040 · RELATED CONCEPTCompositionFND·014 · RELATED CONCEPTContinuityFND·008 · RELATED CONCEPTGridsFND·039 · RELATED CONCEPTProximityFND·004 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPT

Sources

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

  1. [1]

    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.