Modular Scale

A modular scale is a sequence of numbers that relate to one another through a consistent ratio. Tim Brown (Adobe) and Robert Bringhurst popularized applying musical and mathematical ratios to web typography: starting from a base value and multiplying repeatedly by a ratio generates a scale of proportionally related numbers. While type scale focuses on font sizes, modular scale is the broader principle applied to all design dimensions—spacing, container widths, border radii, icon sizes.

stellae.design

Visual Design

Why It Matters

A modular scale is a sequence of numbers that relate to one another through a consistent ratio, used in design to generate harmonious type sizes, spacing values, and layout proportions from a single mathematical relationship. Rather than choosing sizes arbitrarily, a modular scale ensures that every value in the system has a clear, proportional relationship to every other value, producing visual rhythm and hierarchy that feels intentional and coherent. Using a modular scale eliminates the proliferation of one-off values that fragment design systems and makes it possible to adjust the entire typographic and spatial system by changing just two parameters: the base size and the ratio.

Real-World Examples

Type scale at a 1.25 ratio for a SaaS dashboard

A project management tool uses a 1.25 (major third) modular scale starting at 16px, producing type sizes of 12.8, 16, 20, 25, 31.25, and 39px for body text through page headings. The gentle ratio creates enough size differentiation to establish hierarchy without the dramatic jumps that would feel out of place in a dense data interface. Spacing tokens derived from the same scale ensure that gaps between elements share the same proportional rhythm as the typography.

Editorial site using a 1.5 perfect fifth scale

A digital magazine uses a 1.5 ratio modular scale to create dramatic typographic contrast between body text, pull quotes, and article headlines. The large ratio produces sizes like 16, 24, 36, 54, and 81px, giving the layout a bold, magazine-like presence that commands attention on large screens. Responsive breakpoints step down the base size rather than the ratio, preserving the proportional relationships at every viewport.

Counter-example

Arbitrary type sizes across a product

A design team uses font sizes of 11, 13, 14, 16, 18, 22, 28, and 36px across their application with no underlying mathematical relationship between them. When a new component requires a size between existing values, designers add yet another arbitrary size, and the system grows increasingly fragmented. The lack of proportional logic makes it impossible to adjust the overall type scale without manually revisiting every component in the system.

Role-Specific Guidance

Common Mistakes

• Designers often select a modular ratio based on its mathematical elegance without testing whether the resulting sizes actually work for their content density and viewport range — a perfect fourth sounds appealing but may not produce enough differentiation in a dense data table. Another common mistake is generating the scale and then rounding values to the nearest whole pixel for neatness, inadvertently breaking the proportional relationships that give the scale its coherence. Teams also frequently apply a modular scale to typography but not to spacing, missing the opportunity to unify the entire visual rhythm of the interface under a single proportional system.