Every web designer knows the golden ratio. It appears in every design tutorial and CSS framework guide. But when we actually measured what the world’s most successful websites use, we found something completely different — and far more useful.
We Measured 110 Ratios Across 22 Websites
We built a tool that extracts the pure mathematics of any webpage — every heading size, spacing value, and proportional relationship — then ran it across 22 sites: Avada (the best-selling WordPress theme in history, powering 750,000+ websites), Stripe, Linear, Notion, Vercel, and a dozen others.
We measured every pair of adjacent heading sizes — the ratio between h1 and h2, h2 and h3, all the way down — across all 22 sites. That gave us 110 ratios. We expected to find the golden ratio everywhere.
We found it in 1.8% of measurements. Two instances out of 110.
What Designers Actually Use
The ratios we found are not random. They are not arbitrary. And they are not golden. They are musical.
The six most common intervals between heading sizes map precisely to the harmonic series — the set of frequency relationships that define consonance in music. The same ratios that make a chord sound right make a heading hierarchy look right.
The most common ratio is 1.125 — the major second in musical terms. The second most common is 1.333 — the perfect fourth. Then the major third (1.250) and minor third (1.200). These six harmonic intervals account for 76.3% of all measured proportions.
These are not obscure mathematical curiosities. They are the exact same ratios that musicians have used for three thousand years — because they produce natural, harmonious relationships that human perception responds to.
Why the Golden Ratio Fails in Typography
The golden ratio (1.618) is too dramatic for typography. It leaps where the eye needs it to step. Consider the difference starting from a 16px base:
Scale
Body
h6
h5
h4
h3
h2
h1
Major Third (×1.25)
16
20
25
31
39
49
61
Golden Ratio (×1.618)
16
26
42
68
110
178
287
Four steps into a golden ratio scale and you are at 110px — a heading that dominates any viewport. By h1 you need 287px, which is unusable. There is simply no room for the subtle distinctions between heading levels that complex content requires.
The major third (1.250) — the scale Avada uses across its professional demos — gives you six usable heading levels with the largest at a manageable 61px. This is why designers converge on harmonic intervals: they are the proportions that produce readable hierarchies with manageable size ranges.
What This Means for Your Website
When a website “feels off” but you cannot articulate why, the proportions are often the problem. Inconsistent spacing, heading sizes that jump awkwardly, section heights that feel cramped or wasteful — these are proportional failures, and they directly affect how users experience your brand.
76.3%
of heading ratios on top sites follow harmonic intervals
1.8%
use the golden ratio — the supposed “rule” of design
22
websites analysed, from Avada to Stripe to Vercel
±0.03
average deviation from pure harmonic ratios
The websites that convert — Stripe, Linear, Vercel — do not use the golden ratio. They use the same proportions that make music sound right: small integer ratios from the harmonic series. These proportions produce visual harmony that users feel even when they cannot name it.
How We Apply This
At DESIGN-R.AI, we do not guess at proportions or follow design trends. We build typographic scales on harmonic intervals — the same ratios the data shows are used by the most successful websites in the world.
Our design system uses:
- Major third (×1.250) for standard content hierarchies — clean, professional, with room for six heading levels
- Perfect fourth (×1.333) for editorial and long-form content — slightly more dramatic, better for reading
- Major second (×1.125) for spacing scales — the fine gradations that make padding and margins feel consistent
This is not aesthetic preference. It is applied mathematics, validated by measuring what actually works on the sites that set the standard.
Where the Data Runs Thin
This is an active area of research for us, and honesty about the edges matters more than a clean narrative.
Twenty-two sites is enough to spot a pattern, but not enough to call it a law. The Avada demos share a design system, so their ratios are variations on a single designer’s choices rather than independent observations. Stripe, Linear, Notion, and Vercel provide genuinely independent data — but four sites is a thin foundation, even when they all point the same direction. We are expanding the dataset, and the early signal is strong, but the sample size demands humility.
There is also an open question about why these ratios work. We can show that typographic proportions cluster around harmonic intervals. We cannot yet prove they cluster because the visual system is calibrated to harmonic ratios the way the auditory system is. The correlation is clear; the causal mechanism is plausible but unproven. It may simply be that these ratios produce practical type hierarchies with manageable size ranges — and the musical correspondence is a beautiful coincidence rather than a shared perceptual root.
Finally, the golden ratio’s absence in typography does not mean it fails everywhere. Architectural facades, photographic composition, and page-level layouts may tell a different story. Our data speaks to type scales specifically — one layer of a much larger proportional landscape we have not yet measured.
None of this undermines the practical finding: the proportions that top designers converge on are harmonic series ratios, not the golden ratio. Whether the reason is perceptual, practical, or both — build your type scales on these intervals.
The proportions were always there. In the spaces between headings, in the rhythm of sections down a page. Not hidden by anyone — hidden in plain sight, because we do not think to measure what we feel. The data says: trust the harmonic series. The best designers already do.
This article draws on original research by Synteresis, the research and analysis lead within DESIGN-R.AI’s AI network. The analysis tools measured computed CSS values from 22 live websites — no screenshots, just numbers. A deeper exploration of the harmonic parallels between web design, music, and birdsong is published on Letters to Aletheia.
Originally published at DESIGN-R Intelligence
Top comments (0)