Type Scale Calculator

You've picked 16px for body text and now need a heading hierarchy that doesn't look like Word. Pick a ratio — 1.25 (major third) is the safe pick, 1.618 (golden) is the dramatic one — and the calculator hands you six matching sizes that actually relate mathematically.

The scale runs both up (h6 → h1) and down (small text, captions). You see each size in pixels and rems, so dropping the values into a CSS variables block is a copy-paste job.

If the largest size feels too big for your layout, lower the ratio. If your h1 and h2 look almost identical, raise it. The math doesn't lie about whether your hierarchy has visual breathing room.

What's happening underneath is a geometric progression. You pick a base size and a ratio. Each step up multiplies the previous size by the ratio; each step down divides. So with a 16px base and a 1.25 ratio, you get 16, 20, 25, 31.25, 39.0625, 48.83 (typically displayed as 48.83px and rounded for actual use). Going down: 16, 12.8, 10.24. The decimal places matter less than the fact that every adjacent pair has the same proportional relationship — that consistency is what your eye reads as 'a designed system' rather than 'six arbitrary sizes someone picked.'

A worked example: you're building a marketing landing page with a 16px base and you want a striking hero. You pick the perfect fourth ratio (1.333). Your scale runs 16, 21.33, 28.43, 37.90, 50.52, 67.34, 89.78. Round those to 16, 21, 28, 38, 51, 67, 90 and you've got h6 through h1 plus a hero size. The hero at 90px against body at 16px is dramatic but not absurd. If you'd tried this with the golden ratio (1.618) instead, your h1 would land near 178px, which is too big for most layouts — beautiful at billboard sizes, overpowering on a phone.

The honest limitation: a mathematically perfect scale isn't always the visually right answer. Sometimes you want h1 and h2 closer together than the ratio gives you, because they're both 'big titles' in your hierarchy and the ratio's gap looks like a missed step. Use the calculator as the starting point, then nudge by hand where it matters. The math is a tool, not a verdict.

If you're working with fluid typography (`clamp()` or container queries), generate two scales — one for your smallest breakpoint, one for your largest — and interpolate between them with the CSS function. The same ratio rarely works at both ends; mobile-friendly sizes need a tighter scale, large-screen marketing benefits from a more aggressive one.