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

Proportion

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Common ratios and how they behave
  3. 3Where proportion applies
  4. 4Using ratios without mysticism
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Defining type and spacing scales.
  • Standardising media aspect ratios.

Common mistakes

  • Treating the golden ratio as authoritative.
  • A ratio so large that the middle of the scale is unusable.
  • Applying a type ratio to spacing without checking the resulting values.
  • Adopting a ratio because it is famous rather than because the resulting sizes are useful.

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.

Using ratios without mysticism

Do

  • Pick one ratio for the type scale and one for spacing, and let them differ.
  • Round to whole pixels where the rendering needs it, then keep the rounded value.
  • Judge the result by eye. The ratio is a starting point, not a verdict.

Do not

  • Justify a layout decision by invoking the golden ratio.
  • Carry a ratio through five steps when three of them look wrong.
  • Use a large ratio for interface text, which produces jumps nothing sits between.

In practice

  1. i.

    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.

  2. ii.

    A tight scale for the product, a loose one for marketing

    Two ratios, one brand

    Interface text needs small steps, because many sizes sit close together and must remain distinguishable. A landing page needs large ones, because it has three levels and wants drama. The same ratio cannot serve both.

Local chart

FND·013 · Region II · Grid C1

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

Type ScaleTERM·058 · SHORT DEFINITIONDesign TokensSYS·001 · RELATED CONCEPTBalanceFND·011 · RELATED CONCEPTGridsFND·039 · RELATED CONCEPTImageryFND·051 · RELATED CONCEPTRhythmFND·017 · RELATED CONCEPTScaleFND·012 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPT

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.