All UX laws

Modular Type Scale

A geometric scale (e.g. 1.25× or 1.333×) gives proportional jumps the eye can parse.

How to apply it

Define 5–6 sizes max. Pair with weight + line-height to amplify the hierarchy.

Modular Type Scale in practice: a concrete example

Type sizes that feel composed, not random

Pick a ratio, say 1.25, and generate sizes from a base (16, 20, 25, 31, 39) instead of choosing them by hand. The jumps are proportional, so a heading reads as clearly one step above the text below it and the page gains a musical order. Ad-hoc sizes (15, 16, 18, 19, 22) sit too close to signal a real hierarchy, so everything looks vaguely the same weight. Most type systems, from Material to bespoke brand scales, are built this way.

Common Modular Type Scale mistakes

  • Defining a dozen sizes so close together that adjacent steps are indistinguishable, which flattens the hierarchy.
  • Relying on size alone. Pair each step with weight and line-height, or the jumps stay weak.
  • Applying a big desktop ratio unchanged on mobile, where a gentler 1.2 usually reads better than a dramatic 1.5.

When Modular Type Scale doesn't apply

A strict geometric scale is a strong default, not a rule. Display and marketing type sometimes wants a dramatic, off-scale jump for impact, and dense data tables may need one or two custom sizes the ratio doesn't produce. Use the scale to keep the everyday hierarchy honest, then break it deliberately where a specific effect calls for it.

Practise it on a real challenge

Landing Page — seven heading sizes, no hierarchy

A landing page sets its headings at 14/15/16/17/18/19/20px — every level a pixel apart. With no real jump between them, the eye finds no anchor and skims straight past the H1.

More UX laws

  • 60-30-10 Rule
  • 8-pt Spacing Scale
  • Accessible contrast
  • Aesthetic-Usability Effect
  • Alignment Principle
  • Calibrated Trust
UX QuestUX LawsPricingAboutContactPopular UX laws:Hick's LawFitts's LawDoherty ThresholdMiller's LawLaw of ProximityAesthetic-Usability EffectVisual hierarchyAccessible contrastAll UX laws