Choose a base size and a ratio — the two numbers that define a modular scale — and every heading size follows from them. Change one value and the whole system stays in tune.
The ratio controls how fast sizes grow as you move up the hierarchy. It is the single decision that most determines whether your page feels like a dashboard or a magazine.
Adjacent steps stay close together. Use these when you have deep nesting — settings screens, data tables, documentation sidebars — and a heading that is too large would break the layout. The trade-off is weak hierarchy: at 1.067 a level-one heading is barely distinguishable from level-three.
The default range for most products. 1.25 (major third) gives clear hierarchy without producing a 60px display size for a simple article page. If you don't have a reason to choose otherwise, start here.
Dramatic, editorial, and mostly appropriate for marketing pages and landing pages where the hero heading is the point. At 1.618 with a 16px base, the top step is over 180px — which is why these ratios are rarely used past three or four levels.
Most interfaces need five or six distinct sizes, not nine. Each extra step is another decision every author has to make, and inconsistent use of near-identical sizes is what makes hand-built typography drift over time. Generate the full scale, then delete the steps nobody uses.
Keep the base at a fixed pixel value in your CSS, then express every other step in rem so users who raise their browser's default font size get a proportional result. A scale generated here converts directly: divide each pixel value by your base and you have the rem value.
A scale gives you sizes, not spacing. As text grows, its line height should tighten — a 48px heading at 1.6 line height looks unmoored, while 16px body copy below about 1.5 becomes hard to track. A common approach is to interpolate: roughly 1.5 for body, dropping toward 1.05–1.15 at display sizes.
Once the scale is settled, check it for contrast — large headings are exactly where light-grey-on-white tends to slip under 3:1. Run the sizes through the contrast checker before you commit to them.
