The golden ratio φ ≈ 1.618 has been used as an aesthetic guide in art and architecture for centuries. Applied to typography, it gives you a heading hierarchy where every level has a consistent, mathematically derived size relationship to every other level. This calculator takes a single input — your base body font size — and computes the full H1-through-H6 hierarchy, showing the sizes in both pixels and rem along with a live rendered preview.
Drag the slider to change the base size; everything else updates instantly. The step between consecutive heading levels is $\sqrt{\varphi} \approx 1.272$, so H1 (six steps above body) lands at $\varphi^3 \approx 4.24 \times$ your base.
The formula
Each heading level is related to the next by a fixed multiplier. For a base body size $b$, the size at level $n$ (where body is $n=0$, H6 is $n=1$, …, H1 is $n=6$) is:
Which simplifies at the key levels to:
- Body: $b$
- H6: $b \cdot \sqrt{\varphi} \approx 1.272 b$
- H5: $b \cdot \varphi \approx 1.618 b$
- H4: $b \cdot \varphi^{3/2} \approx 2.058 b$
- H3: $b \cdot \varphi^2 \approx 2.618 b$
- H2: $b \cdot \varphi^{5/2} \approx 3.330 b$
- H1: $b \cdot \varphi^3 \approx 4.236 b$
So a 16 px body produces an H1 of about 67.8 px — big enough to function as a hero headline without being so large it dominates the layout.
Why √φ and not φ directly
The temptation with golden-ratio typography is to use $\varphi$ itself as the multiplier between adjacent heading levels. That seems “more golden.” But it produces a scale that explodes too quickly: from body (step 0) to H1 (step 6) is six steps, and $\varphi^6 \approx 17.94$. A 16 px body would give you an H1 of nearly 290 px, which is poster-sized. Most web layouts cannot accommodate H1s that large, and designers end up clamping the scale at H3 or H4, which defeats the point of using a scale at all.
Using $\sqrt{\varphi}$ as the step instead gives a milder progression while keeping the scale mathematically based on $\varphi$ — every other level is still exactly $\varphi$ apart, and H1 lands at $\varphi^3 \approx 4.24 b$. This is the approach used by most practical “golden ratio typography” systems, because it is the only one that actually works at web and print sizes.
If you want the more aggressive full-$\varphi$ scale, use the general type scale calculator and pick the golden ratio preset with a smaller step count.
Example: a 16 px body
Plugging $b = 16$ into the formula gives (rounded to two decimals):
- body: 16.00 px
- H6: 20.35 px
- H5: 25.89 px
- H4: 32.92 px
- H3: 41.88 px
- H2: 53.26 px
- H1: 67.75 px
These values are all reasonable web sizes. The body sits at its default; H6 is slightly larger than body, useful for subheads that do not warrant full heading emphasis; H1 is large but not overpowering. The scale feels consistent because every level has the same proportional relationship to its neighbours.
Example: a 20 px base for long-form reading
Long-form reading sites often use a larger body size — 18 px or 20 px — for comfort. With $b = 20$:
- body: 20 px
- H6: 25.44 px
- H5: 32.36 px
- H4: 41.15 px
- H3: 52.36 px
- H2: 66.58 px
- H1: 84.69 px
The H1 is bigger here (about 85 px) because the base is bigger, but the proportions are identical. Scaling the base scales the whole system — which is exactly what you want for responsive design, because you can shrink the base on narrow viewports and every heading shrinks with it automatically.
Using the output in CSS
Copy the px or rem values into your stylesheet as direct property values or as CSS custom properties:
:root {
--fs-body: 1rem;
--fs-h6: 1.272rem;
--fs-h5: 1.618rem;
--fs-h4: 2.058rem;
--fs-h3: 2.618rem;
--fs-h2: 3.33rem;
--fs-h1: 4.236rem;
}
body { font-size: var(--fs-body); }
h1 { font-size: var(--fs-h1); }
/* ... */Prefer rem over px so the scale respects the user’s preferred root font size. If you want the CSS custom-properties block generated for you, use the general type scale calculator — it produces the same format and supports any ratio.
What this tool does not do
It does not compute line-height (see the line height calculator for that), letter-spacing, font weight, or any other typographic property. It does not emit utility classes or component styles — just the raw sizes. It does not handle fluid type scales that vary with viewport width, because that requires min and max sizes plus a breakpoint policy that a single-input calculator cannot reasonably infer. For fluid scales, pair this output with CSS clamp() by hand.