Modular Scale Generator

A modular scale is a geometric progression: every value is the base multiplied by a fixed ratio raised to the step number, so step 0 is the base, step 1 is base times ratio, and step -1 is base divided by ratio. Because every adjacent pair shares the same proportion, sizes chosen from the scale relate to one another the same way at every level of the hierarchy, which is what produces the sense of order. The named ratios come from musical intervals expressed as small whole-number frequency relationships: the minor second at 15:16 or 1.067, the major third at 4:5 or 1.25, the perfect fourth at 3:4 or 1.333, the perfect fifth at 2:3 or 1.5, the octave at 2:1, plus the golden section at about 1.618. Dense interfaces normally sit between 1.067 and 1.2 because they need many closely spaced sizes; editorial and marketing layouts use 1.333 to 1.618 for dramatic headline contrast. The base value is usually the body text size, and 16px is the near-universal web choice because it is the default computed font-size in every major browser, which makes rem arithmetic clean. Two limits matter in practice. Growth is exponential, so a golden-ratio scale at six steps up multiplies the base by about 17.9 and produces headline sizes no layout can absorb; and the generated values are irrational, so 16 times 1.25 to the fourth power gives 39.0625px, which browsers resolve to fractional device pixels and which most design systems round to a whole number. A double-stranded scale, which interleaves a second base against the same ratio, is the standard remedy when a single strand leaves gaps in the middle of the range.

The idea that pleasing proportion comes from small whole-number ratios is Pythagorean, and it passed into design through Renaissance architecture and page construction, where the type area of a manuscript page was laid out by geometric division rather than by measurement. Le Corbusier gave the approach its best-known modern form with the Modulor, published in 1948 with a second volume in 1955, deriving a double series of dimensions from the golden section and a human figure of 1.83 metres. Typography inherited a rougher version through the traditional metal type sizes of 6, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60 and 72 points, a sequence of Renaissance punchcutting origin that approximates a geometric series and was in practice the first widely used type scale. Robert Bringhurst reframed those inherited sizes as a deliberate proportional system in The Elements of Typographic Style in 1992, treating the scale of the page as something to be chosen rather than accepted. The web adaptation is traceable to Tim Brown, whose 2011 A List Apart article More Meaningful Typography argued for ratio-driven type sizing and who built the modularscale.com tool with Scott Kellum to generate the values. Design systems then absorbed the concept with practical modifications: Tailwind CSS ships a rounded scale loosely near a major third, and the Utopia methodology published by Trys Mudford and James Gilyead around 2020 extended the idea to fluid scales that interpolate between a small-screen and a large-screen ratio using CSS clamp.