Typography Scale Recommender Calculator

A modular type scale is a geometric progression: every size is the base size multiplied by a fixed ratio raised to the step number, so steps -2, -1, 0, 1, 2 give base divided by r squared, base divided by r, base, base times r, and base times r squared. Because the ratio between any two adjacent steps is constant, the eye reads the set as related rather than arbitrary. Named ratios borrow from musical intervals: minor second 1.067, major second 1.125, minor third 1.200, major third 1.250, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.500 and the golden section 1.618. Small ratios suit text-dense reading; anything above roughly 1.4 grows explosively, since six steps at 1.618 turn a 16 px base into about 287 px. Line height is deliberately not scaled by the same factor. Optically, smaller sizes and longer measures need proportionally more leading, so this tool holds the base multiplier for body text and negative steps and reduces it by 0.05 per positive step down to a floor of 1.1, approximating the tight leading used on display headings. Practical constraints follow from the browser: the default root size is 16 px, so expressing sizes in rem lets a reader font-size preference propagate through the whole scale, while px sizes ignore it. WCAG 2.1 success criterion 1.4.12 asks that content survive line height set to 1.5 times font size, letter spacing of 0.12 em and paragraph spacing of 2 times font size, so a scale that only works at its exact values is fragile.

Discrete size systems predate the web by centuries. Continental type founders standardised body sizes with Pierre Simon Fournier's point system of 1737 and Francois Ambroise Didot's revision in the 1780s, and metal type was cast only in a fixed series - roughly 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60 and 72 points. Designers therefore worked inside a scale by necessity rather than theory, and that traditional series approximates a geometric progression with a ratio near 1.15 through the text sizes. Robert Bringhurst reintroduced the idea as an explicit design method in The Elements of Typographic Style, first published in 1992, drawing the analogy between typographic intervals and the intervals of musical scales. The web adopted it slowly, since the pixel-locked layouts of the 1990s and early 2000s discouraged proportional thinking. Tim Brown's 2011 A List Apart article More Meaningful Typography, and the Modular Scale tool released alongside it, pushed ratio-based scales into mainstream front-end practice. The pattern was later encoded into design systems - Material Design ships a named type scale with defined roles - and CSS custom properties together with the clamp() function made fluid, viewport-responsive scales practical without breakpoint-by-breakpoint overrides.