Modular scale
Noun. A sequence of values produced by repeatedly multiplying a base value by a fixed ratio. Each step in the sequence relates to the previous step by the same multiplier, producing values that share an underlying mathematical relationship. Used in typography to derive type sizes, in design systems to derive spacing tokens, and in classical architecture to derive proportional dimensions.
Common ratios
- Golden ratio (1.618): 16, 26, 42, 68, 110… — produces a "natural" feeling sequence.
- Perfect fourth (1.333): 16, 21, 28, 38, 51… — gentler scale, common in body-heavy designs.
- Perfect fifth (1.5): 16, 24, 36, 54, 81… — bold contrast, common in marketing.
- Major third (1.25): 16, 20, 25, 31, 39… — subtle scale for dense UI.
- Augmented fourth (1.414): 16, 23, 32, 45, 64… — based on √2, used in classical book design.
Origin
The modular scale concept is older than typography software. Robert Bringhurst formalised the idea for type in The Elements of Typographic Style (1992), drawing on classical architectural proportion (Vitruvius, Palladio, Le Corbusier's Modulor). Tim Brown's modularscale.com tool (c. 2010) made it accessible to web designers; today most design systems (Material's type scale, Tailwind's text scale, Carbon's productive type scale) implement modular scales.
In design systems
A type scale derived from a modular scale produces sizes that feel coherent without requiring per-size aesthetic judgment. The same logic applies to spacing scales — though the 8pt grid and modular scales coexist uneasily, since 8pt requires integer multiples and modular scales produce non-integer values that get rounded.
Choosing a ratio for your project
The ratio determines how aggressive the scale is. A small ratio (1.125, 1.2, 1.25) produces sizes that grow slowly — heading is just a bit larger than body, second heading is just a bit larger than first. Used for content-dense interfaces where many hierarchy levels need to coexist without dramatic size jumps. A large ratio (1.5, 1.618, 2.0) produces dramatic size jumps — display heading dwarfs body text. Used for marketing pages, magazine-style editorial layouts, and any context where strong hierarchy needs to read from across a room. Most product UI work uses 1.25 or 1.333; most marketing work uses 1.5 or 1.618.
Pairing modular scales with the 8pt grid
The friction is real: modular scales produce non-integer values that get rounded for actual rendering, and the rounding sometimes lands off the 8pt grid. The pragmatic solution is to round each scale step to the nearest 8pt-grid value rather than to whatever the pure mathematics produces. The visual rhythm of the scale is preserved (each step is still meaningfully larger than the previous one), and the 8pt-grid coherence is preserved. The cost is that the pure modular-scale ratio is no longer exact; the benefit is that the entire system stays internally consistent.