Type Scale

A type scale is a curated set of font sizes derived from a mathematical ratio, creating visual harmony across all text elements in a design system. Rather than choosing arbitrary sizes (14px, 18px, 24px, 36px), a type scale generates sizes that feel proportionally related — because they are.

The major third scale (ratio: 1.25) is a reliable starting point for UI:

Implementing a type scale in CSS custom properties:

:root {
  --ratio: 1.25;
  --text-xs:   calc(var(--text-sm) / var(--ratio));
  --text-sm:   calc(var(--text-base) / var(--ratio));
  --text-base: 1rem;
  --text-lg:   calc(var(--text-base) * var(--ratio));
  --text-xl:   calc(var(--text-lg) * var(--ratio));
  --text-2xl:  calc(var(--text-xl) * var(--ratio));
  --text-3xl:  calc(var(--text-2xl) * var(--ratio));
  --text-4xl:  calc(var(--text-3xl) * var(--ratio));
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
p  { font-size: var(--text-base); }

Common ratios and their character:

• Minor second (1.067): Subtle scale, works for dense UI where size differences should be understated
• Major second (1.125): Conservative but clear, good for technical documentation
• Minor third (1.2): Versatile, widely used in design systems
• Major third (1.25): Clear hierarchy, recommended for general-purpose UI
• Perfect fourth (1.333): Assertive hierarchy, works well for editorial and marketing sites
• Golden ratio (1.618): Dramatic contrast, suits expressive display contexts

Tailwind CSS uses a hand-tuned scale (not a pure ratio) because strict mathematical scales sometimes produce awkward values. This is valid — the ratio is a starting point and constraint, not a rule you can't break.

For choosing a ratio, consider the range of text sizes in your design. If you have many heading levels, a smaller ratio like 1.2 keeps them from growing too large. If you only have two or three levels, a larger ratio like 1.333 creates the contrast needed to distinguish them clearly.

Tools like Type Scale and Utopia let you preview and export type scales interactively, including fluid scales that interpolate between two different ratios across viewport sizes.