Font Scaling Calculator

A modular type scale is a geometric sequence: every step is the previous size multiplied by a fixed ratio, so size at level n equals base times ratio to the power n. Level 0 is the base, usually 16px because that is the default root size in every major browser; positive levels give headings, negative levels give captions and fine print. The named ratios come from musical intervals - minor second at 1.067, major second at 1.125, minor third at 1.2, major third at 1.25, perfect fourth at 1.333, perfect fifth at 1.5, octave at 2.0 - plus the golden ratio near 1.618. Ratios of 1.125 to 1.25 give gentle steps suited to interfaces, where many levels coexist; 1.414 and above produce dramatic jumps that suit editorial pages but exhaust the usable range in three or four steps. The compounding is what to watch. A ratio of 1.5 over six levels multiplies the base by 1.5 to the fifth power, about 7.6, turning 16px into roughly 122px - fine on a wide desktop viewport, unusable on a 320px phone. That is why the fluid output pairs each step with a CSS clamp expression: a minimum, a viewport-proportional middle term, and a maximum, so a heading interpolates between the two viewport widths you specify instead of jumping at breakpoints. Two caveats apply. Sizes tied to viewport width can interfere with text zoom, so the clamp minimum must stay legible, and generated values need rounding judgement, since a scale yielding 25.63px and 25.99px offers a distinction no reader perceives.

Proportional systems in design long predate typography. Renaissance architects worked from musical consonances, and Le Corbusier published the Modulor in 1948, a scale of dimensions derived from human proportions and the golden section intended to govern everything from furniture to facades. Typography absorbed the same logic through the Swiss and German traditions of the mid-twentieth century, where grid systems tied type sizes, column widths and leading into a single set of related measurements rather than arbitrary choices. Robert Bringhurst brought the argument into the standard typographic literature with The Elements of Typographic Style in 1992, discussing musical proportion as a basis for choosing sizes. The idea reached web designers in 2011 when Tim Brown presented modular scales in an article for A List Apart and released the modularscale.com tool with Scott Kellum, which made the ratios concrete and reusable; type scale generators proliferated from there and the ratio names in this calculator are the set that convention settled on. Implementation caught up more slowly: sizing in relative units became practical once rem was supported across browsers, and continuous fluid sizing became straightforward only with the CSS clamp function, defined in CSS Values and Units Level 4 and supported in all the major browser engines from around 2020, which replaced the earlier practice of stepping sizes through a series of media queries.