Golden Ratio Typography Calculator
Generate a harmonious typographic scale -- line height, H1, H2, H3, and small text -- using the golden ratio (phi = 1.618).
Results
What is it?
The golden ratio (phi approx 1.618) produces type scales that feel naturally proportional because each level is phi times larger than the one below. It has been used in print typography since the Renaissance and translates directly to web CSS font-size systems.
How to use
Set your body font size (16 px is the browser default), content column width, and optionally adjust the line-height ratio. The calculator outputs a complete heading scale from H3 to H1 and small/caption text, plus the ideal character count per line.
Example scenario
Body 16 px, 680 px column: line height = 25.9 px, H3 = 25.9 px, H2 = 41.9 px, H1 = 67.8 px, small = 9.9 px, approx 76 chars/line. At 18 px body: H1 = 76.3 px, H2 = 47.1 px -- richer hierarchy for magazine-style layouts.
Pro tip
Robert Bringhurst's "The Elements of Typographic Style" recommends 60-75 characters per line for comfortable reading. The ideal chars/line output flags when your column is too narrow or wide. For CSS, convert px line-height to a unitless ratio (e.g. 25.9/16 = 1.618) -- browsers handle it better across zoom levels.