Heading Body Size Ratio

Title-to-Body Font Size Ratio

Typographic hierarchy comes down to keeping the size ratios between headings and body text consistent. A modular scale takes your base body size and multiplies it by the same constant factor at every step up. You'll see the golden ratio φ = 1.618 a lot, along with the Perfect Fourth 1.333 and the Major Third 1.25. The formula behind it all is size_n = body × ratio^n, with n standing for the step number.

Take a 16px body and run a 1.25 scale: you get h3 = 20px, h2 = 25px, h1 = 31–39px. Push it to a punchier 1.5 and h1 lands at 48–54px, which works for hero headings. Tailwind’s default scale spans text-sm (14px) up to text-7xl (72px), broadly following a 1.2–1.25 progression with custom jumps once you reach the extremes.

Applications

You'll find these scales in design systems and brand guidelines, in editorial layouts, in web typography through the CSS font-size property, and in print work. Type-Scale.com and Modularscale.com will generate the ratios for you. Material Design, Apple HIG and IBM Carbon each publish their own recommended scales.

FAQ

Should I use the golden ratio? φ = 1.618 gives you dramatic contrast that suits editorial covers, but it can feel too aggressive in a dense UI. On dashboards, something in the 1.2–1.333 range reads better.

What body size should I start with? 16px is the web default and the recommended minimum for accessibility. Print usually sits at 9–11pt. On mobile you might nudge it up to 17–18px for legibility.

Can I mix scales? You can. Plenty of systems run a tighter scale (1.2) on UI labels and a looser one (1.333) on marketing pages while holding the same body base.