Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Proportion

Consistent ratios between sizes make a layout feel considered, without needing any particular mystical ratio.

Definition

Proportion is the relationship of sizes to one another. Systems built on a consistent ratio, such as 1.25 or 1.5, produce coherent relationships across type, space and layout.

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

On this page
  1. Definition
  2. Common ratios and how they behave
  3. Where proportion applies
  4. In practice
  5. Continue from here

Common ratios and how they behave

RatioNameCharacter
1.125Major secondVery subtle. Needs many steps to create contrast.
1.200Minor thirdComfortable for dense interface type.
1.250Major thirdThe most common interface default.
1.333Perfect fourthClear steps. Good for content-led sites.
1.500Perfect fifthDramatic. Works for editorial and marketing.
1.618Golden ratioLarge jumps. Often needs intermediate steps in practice.

Where proportion applies

  • Type scale steps.
  • Spacing scale steps, though a linear or doubling scale often works better for space than a ratio.
  • Aspect ratios for media, kept to a small documented set such as 16:9, 4:3, 3:2 and 1:1.
  • Container width relative to line length, which is governed by readability rather than by ratio.

In practice

Two ratios in one system

Design systems

Many systems use a modular ratio for type and a doubling or four-pixel scale for space, because space is used in more contexts and benefits from predictable arithmetic more than from elegant ratios.

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.

Short definition

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

Related concept

Connected closely enough to change how you apply this.