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

Scale

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Using scale well
  3. 3What scale can and cannot do
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Establishing a type scale or spacing scale.
  • Emphasising a primary element.
  • One value on a screen genuinely matters more than everything around it.

Common mistakes

  • Timid size differences.
  • Display sizes used routinely.
  • Scale chosen without reference to the viewport.

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.

What scale can and cannot do

UseWorksBetter tool
Marking the one number that mattersYes, stronglyNothing beats it
Separating heading levelsUp to about three stepsWeight and space, beyond that
Showing that two things differ in kindNoShape, colour or position
Rescuing a flat layoutNoSpacing and ranking first
Drawing attention on a dense screenPartiallyIsolation, since everything is already large

In practice

  1. i.

    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.

  2. ii.

    The dashboard where everything grew

    Scale inflation

    Each team enlarged its own metric until every tile held 48 pixel type. The relative difference disappeared, the page got longer, and the hierarchy ended exactly where it started.

Local chart

FND·012 · Region II · Grid D2

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

BalanceFND·011 · RELATED CONCEPTEmphasisFND·018 · RELATED CONCEPTProportionFND·013 · RELATED CONCEPTResponsive TypographyFND·038 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPTVisual HierarchyFND·001 · 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.

Related concept

Connected closely enough to change how you apply this.