Golden Ratio Typography Scale Calculator
Build a modular type scale from a base font size and a ratio — golden ratio by default — with px and rem for every step.
How it works
size(step) = base × ratio^step (step 0 = body, positive = larger headings)
A modular scale sizes every heading as the base multiplied by a fixed ratio raised to the step number, so each level relates to the next by the same proportion — the visual equivalent of musical intervals. The golden ratio (1.618) gives a dramatic, wide spread between sizes; gentler ratios like 1.2 or 1.25 keep headings closer together for dense interfaces. Because the scale is multiplicative, it stays harmonious at any base size, and expressing each step in rem lets the whole hierarchy scale with the user’s root font size.
Worked example
Base 16px on the golden ratio 1.618: H4 = 16 × 1.618 = 25.9px, H3 = 16 × 1.618² = 41.9px, H2 = 16 × 1.618³ = 67.8px, H1 = 16 × 1.618⁴ = 109.7px. In rem (16px root) H1 is about 6.86rem.
Frequently asked questions
Is the golden ratio always the best choice?
For big editorial headlines it looks striking, but 1.618 spreads sizes so far apart that mid-level headings can feel jumpy in app UIs. Many design systems prefer 1.2–1.333 for tighter, more usable steps.
Why give sizes in rem as well as px?
rem lets the whole scale grow or shrink with the user’s default font size, which is important for accessibility. The px column is handy for design tools and spec sheets that think in pixels.
How many steps should a scale have?
Most sites need a body size, two or three heading levels above it, and one smaller caption size below. Generating extra steps is fine, but using every one tends to produce too many barely-distinct sizes.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.