Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Scale

Relative size is the fastest signal of importance and the easiest one to overuse.

Definition

Scale is the size of an element relative to others and to the viewport. It communicates importance instantly, before colour or position are processed.

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

On this page
  1. Definition
  2. Using scale well
  3. In practice
  4. Continue from here

Using scale well

  • Make size differences decisive. A 10 percent difference reads as an error; a 50 percent difference reads as intent.
  • Use a scale system rather than arbitrary values, so relationships are consistent across the product.
  • Reserve the largest sizes for genuinely rare content. If every page has a display heading, none of them is display.
  • Remember that scale is relative to the viewport. A 48px heading dominates a phone and is modest on a desktop, which is what responsive type scales solve.

In practice

Metric emphasis

Dashboards

A single large number with a small label communicates a metric faster than a medium number with a medium label, because the eye lands on the value first.

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.

Related concept

Connected closely enough to change how you apply this.