Font Scale Modular Typography Calculator

A modular type scale is a geometric progression: each size is the base multiplied by a fixed ratio raised to the step number, so sizes grow multiplicatively rather than by arbitrary increments. The ratio names come from just-intonation frequency ratios in music, which is where the numbers originate: the minor second is 16:15 or 1.067, the major second 9:8 or 1.125, the minor third 6:5 or 1.2, the major third 5:4 or 1.25, the perfect fourth 4:3 or 1.333, the augmented fourth the square root of two, and the perfect fifth 3:2 or 1.5. The golden ratio at 1.618 is the one common choice with no musical basis. A base of 16px is conventional because that is the default root font size in every major browser. Ratio choice is a contrast decision. Text-dense interfaces and documentation usually sit between 1.125 and 1.2, editorial and marketing layouts around 1.25 to 1.333, and display work at 1.5 or higher. The compounding is the trap: 16px with a ratio of 1.5 and six steps up reaches about 182px, which overflows a 360px phone viewport, so large ratios need a separate mobile scale or fluid sizing with CSS clamp(). Two practical points follow. Line height should fall as size rises, roughly 1.4 to 1.6 for body text and 1.1 to 1.2 for display sizes. And computed steps rarely land on whole pixels, so most teams round and store the result as design tokens rather than recomputing the power each time.

Proportional rather than arbitrary type sizing long predates the web. Metal type foundries sold a limited, irregular series of sizes such as 6, 8, 10, 12, 14, 18, 24, 36, 48 and 72 point, and the gaps between them widened as the sizes grew, which is a rough geometric scale arrived at by trade practice rather than arithmetic. The underlying unit was itself standardised slowly: Pierre Simon Fournier proposed a typographic point in the 1730s, Francois-Ambroise Didot revised it in the 1780s, and the Anglo-American point was fixed at one seventy-second-and-a-fraction of an inch by American type founders in 1886, before PostScript rounded it to exactly 1/72 inch in the 1980s. The explicit modular scale entered design writing through Robert Bringhurst, whose The Elements of Typographic Style, first published in 1992, argued for sizing text by proportional relationships and drew the analogy with musical intervals directly. The idea reached web designers through Tim Brown, then at Typekit, who presented and wrote about more meaningful typography around 2011 and released the Modular Scale tool with Scott Kellum, making the ratios directly computable for CSS. Jeremy Church's Type Scale followed as a visual calculator. Adoption accelerated as design systems and design tokens became standard practice in the mid-2010s, and again after CSS clamp() gained broad browser support around 2020, which let a scale interpolate fluidly across viewport widths instead of switching at breakpoints.