Typography Scale Calculator (Golden Ratio, Major Third)

Six sizes, each a fixed ratio larger than the last

Starting from a 16px base with a 1.25 ratio, the scale produces: xs 10.24px, sm 12.80px, base 16.00px, lg 20.00px, xl 25.00px, and 2xl 31.25px -- each step multiplying the previous size by exactly 1.25 (going up) or dividing by 1.25 (going down from base).

This is a geometric progression, not a simple additive one -- each step is a consistent multiplicative ratio away from its neighbor (16 x 1.25 = 20, 20 x 1.25 = 25, 25 x 1.25 = 31.25), which produces visually consistent, proportional jumps between sizes, unlike simply adding a fixed number of pixels at each step, which would feel proportionally larger at small sizes and smaller at large ones.

1.25 (sometimes called the 'major third' in musical-ratio-inspired naming conventions some type systems use) is a moderate, commonly used scale ratio -- a smaller ratio like 1.125 produces more subtle, closely-spaced size steps, while a larger ratio like 1.5 produces much more dramatic jumps between each step.

Why this is a starting point, not a complete responsive type system

Geometric steps. Line length and viewport clamps are a separate pass. This calculates six fixed pixel values based purely on the mathematical ratio -- it doesn't address line length (how many characters fit comfortably per line at each size) or make these sizes responsive across different viewport widths, both of which are separate design and CSS considerations layered on top of this base scale.

A real production type system typically also needs corresponding line-height values for each size step (larger text generally needs a tighter line-height ratio, smaller text a looser one) -- this calculator produces the font-size scale specifically, with line-height as a related but separate calculation.

Six steps is a common, practical starting range covering everything from small print/caption text (xs) up to a prominent heading size (2xl) -- a design system needing even larger display headings would extend this same geometric progression further (continuing to multiply by 1.25 for additional steps beyond 2xl).

Related typography and responsive-sizing tools

For making any one of these fixed sizes scale fluidly with viewport width instead of staying static, the Responsive Font Size Calculator is the direct next step.

For calculating an appropriate line-height to pair with any of these font sizes, the Line Height / Leading Calculator covers that related need.

Frequently Asked Questions (FAQ)