Modular Scale

A modular scale is a sequence of numbers derived from a base value and a consistent ratio, used to generate harmonious measurements across a design — particularly font sizes, but also spacing, component dimensions, and layout proportions. The term was popularized by Tim Brown's Modular Scale tool, though the concept originates in music theory (a musical scale is exactly this: a sequence based on harmonic ratios).

The relationship between modular scale and type scale is direct: a type scale is a modular scale applied specifically to typography.

Generating a scale:

Base: 1rem (16px)
Ratio: 1.333 (perfect fourth)

Scale values: 0.563, 0.75, 1, 1.333, 1.777, 2.369, 3.157, 4.209, 5.61...

Each value is the previous multiplied by the ratio. Each value divided by the ratio gives the previous.

CSS implementation using custom properties:

:root {
  /* Perfect fourth scale (1.333) from 1rem base */
  --scale--2: 0.563rem;
  --scale--1: 0.75rem;
  --scale-0:  1rem;
  --scale-1:  1.333rem;
  --scale-2:  1.777rem;
  --scale-3:  2.369rem;
  --scale-4:  3.157rem;
  --scale-5:  4.209rem;
}

/* Typography */
small  { font-size: var(--scale--1); }
p      { font-size: var(--scale-0); }
h4     { font-size: var(--scale-1); }
h3     { font-size: var(--scale-2); }
h2     { font-size: var(--scale-3); }
h1     { font-size: var(--scale-4); }

/* Spacing derived from the same scale */
.card  { padding: var(--scale-1); gap: var(--scale-0); }

Multi-stranded scales:

You can interleave two ratios from the same base, creating a denser set of values. This is common in design systems that need more intermediate steps:

Base: 16px
Strand 1 (ratio 1.5): 16, 24, 36, 54, 81...
Strand 2 (ratio 1.5, starting from 21): 21, 31.5, 47.25...
Combined: 16, 21, 24, 31.5, 36, 47.25, 54...

When to use vs. when to abandon:

Modular scales produce their best results in editorial and expressive contexts where the full range of sizes is deployed. In tightly constrained UI systems — data dashboards, admin interfaces — the mathematical sizes often land at awkward pixel values that conflict with alignment grids. Tailwind CSS's manually curated scale is a deliberate rejection of the modular scale for exactly this reason.

The scale is a design aid, not a constraint. Starting with a modular scale and then adjusting specific values for practical reasons is a valid approach — the mathematical base gives you a principled starting point and keeps unrelated adjustments from multiplying.