What is the golden ratio in typography?

The golden ratio (φ ≈ 1.618) is an irrational number that appears throughout nature and art. In typography it is used to derive harmonious relationships between font sizes, line heights, and line widths. A type scale built on φ feels visually balanced because each level is exactly 1.618× the one below it — the same proportion the eye naturally finds pleasing.

How is each font size in the scale calculated?

Each step n uses the formula: size(n) = base × φⁿ. So step +1 = base × 1.618, step +2 = base × 1.618² = base × 2.618, and step −1 = base ÷ 1.618. Multiplying or dividing by φ at each step keeps every pair of adjacent sizes in the same ratio.

Why is the line-height ratio 1.618?

Setting line-height = font-size × φ places the leading (space between baselines) in golden proportion to the cap height. For a 16px base that gives a line-height of about 25.9px. The result is a rhythm that feels open and easy to read without wasting vertical space — the whitespace between lines mirrors the ratio found in well-proportioned typefaces.

How is the optimal line width (measure) derived?

Classic typographic guidance recommends 45–90 characters per line, with 66 as the sweet spot (Robert Bringhurst, "The Elements of Typographic Style"). The calculator uses measure = size × φ², which for a 16px base gives roughly 419px — wide enough for comfortable reading without the eye losing its place on the return. Adjust your container to match.

What does the step number mean?

Step 0 is your chosen base size (body text). Positive steps (+1, +2…) are larger — headings and display sizes. Negative steps (−1, −2) are smaller — captions and fine print. This mirrors the convention in tools like Every Layout and Utopia.

Should I use rem or px?

Rem is strongly recommended for accessibility. Rem values scale with the user's browser default font-size preference, so someone who has bumped their browser to 20px will see your type grow proportionally. Px values are fixed and override the user's preference — acceptable for print-like contexts but not for body text on the web.

Golden Ratio Typography Calculator

Harmonious typography is not guesswork — it is geometry. The golden ratio (φ, phi, ≈ 1.618…) is the proportion at which a line is divided so that the whole is to the longer part as the longer part is to the shorter. It appears in the shell of a nautilus, the spiral of a sunflower, and the proportions of the Parthenon. When applied to a type scale it produces a set of sizes, line heights and line widths that feel instinctively balanced, because the eye has evolved to recognise that specific ratio as harmonious.

This calculator takes a single input — your base font size in pixels — and derives a complete, production-ready typographic system from it using exact φ arithmetic. No rounding heuristics, no magic numbers: every value traces directly back to the formula.

How it works

The modular type scale

Each size in the scale is computed as:

size(n) = base × φⁿ

where n is the step number (positive for larger, negative for smaller) and φ = (1 + √5) / 2 ≈ 1.6180339887…

For a 16 px base:

Step	Role	Formula	Size
−2	Caption	16 ÷ φ²	6.11 px
−1	Small	16 ÷ φ	9.89 px
0	Body	16 × φ⁰	16.00 px
+1	Lead	16 × φ	25.89 px
+2	H3	16 × φ²	41.89 px
+3	H2	16 × φ³	67.77 px
+4	H1	16 × φ⁴	109.67 px
+5	Display	16 × φ⁵	177.44 px

Every adjacent pair is in exactly the same ratio — φ — which is why the scale feels unified rather than arbitrary.

Optimal line height

The line-height ratio for each step is simply φ:

line-height = font-size × φ

For 16 px body text that is 25.89 px, giving a unitless ratio of 1.618. This is notably close to what accessibility guidelines and reading-research recommend (1.5–1.8), but arrived at geometrically rather than by convention.

Optimal line width (measure)

Typographers have long recommended 45–90 characters per line, with 66 as the ideal (The Elements of Typographic Style, Bringhurst). The golden ratio gives a clean formula:

measure = font-size × φ²

φ² ≈ 2.618, so for 16 px body text the ideal max-width is about 419 px — comfortably within the comfortable reading range. The measure scales proportionally as font size grows, so headings automatically get a narrower max-width, encouraging shorter, punchy lines.

Vertical rhythm

Paragraph spacing (margin-bottom) should equal one full line-height. This keeps the vertical grid consistent: the space between paragraphs matches the space between lines, so the page breathes without losing the sense of blocks.

Worked example — 18 px base

A designer working on an editorial article sets a 18 px base (slightly larger than default for comfortable long-form reading).

Step	Role	Size	Line height ratio	Max width
0	Body	18.00 px	1.618	472.63 px
+1	Subtitle	29.12 px	1.618	764.85 px
+2	H3	47.12 px	1.618	1237.30 px
+3	H2	76.24 px	1.618	2002.00 px

The H3 at 47 px would typically be constrained to the body column width anyway, so the max-width for larger steps functions as a design ceiling rather than a strict container constraint. The key value is the body max-width: 472 px, close to the classic 480 px column used by many editorial sites.

Formula note

φ is defined as the positive root of x² = x + 1, giving x = (1 + √5) / 2. It has the remarkable property that φ² = φ + 1 = 2.618… and 1/φ = φ − 1 = 0.618… These identities mean a scale built on φ is self-similar: the ratio between any step and the step two above it is always φ² = 2.618, and the ratio to the step below is always 1/φ = 0.618. This is why the scale feels “complete” — every level is a whole-number power of the same ratio.