Golden Ratio

What it is. Golden ratio is a fixed 1.618 multiplier applied to a base font size to generate every heading size in a typographic hierarchy. Start at 16px body, multiply by 1.618 and you get 26px. Multiply again for 42px, then 68px, then 110px. Those numbers are not suggestions. They become your H3, H2, H1, and display sizes. The ratio comes from the same proportion that appears in nautilus shells, Da Vinci compositions, and the Parthenon. In type it delivers clear visual order because each step feels related yet distinct. The jumps are large enough that weight and leading do not have to work overtime. A bold 68px headline sits on 1.1 leading and still clears the 42px H2 below it without any visual confusion. Tools such as type-scale.com spit out the full table in one click. You pick the base, lock in 1.618, and every decision downstream becomes arithmetic instead of taste.

What it is not. Golden ratio is not a universal law that makes every project better. It is not the same as golden ratio rectangles used for layout grids. It is not a substitute for good leading or spacing. It is not something you apply to body text or small labels. It is not the default for product interfaces. Applying it to a dense admin dashboard produces comically oversized headings that waste horizontal real estate and collapse on mobile. It is also not a free pass to skip documentation. Generating the scale is the first move, not the last. The teams that treat it as decoration instead of system end up with five different versions of the same ratio patched across pages.

Concrete example. The 2024 redesign of Wired magazine feature pages used golden ratio from a 17px base. Body text locked at 17px regular. Captions and labels dropped to 13px. H3 sat at 26px medium. H2 jumped to 42px bold. Feature headlines hit 68px bold at desktop with 1.15 leading. The hero display size cleared 110px on large breakpoints. The result was immediate scanning order. Readers saw the 110px headline first, then the 42px deck, then dropped into the 17px body without any visual negotiation. Figma's 2023 marketing site followed the same sequence but started at 16px. Their hero H1 measured 109px on a 1440px viewport, paired with -0.03em tracking and 1.1 leading. Below it the 42px subhead used semibold weight so it never competed. The same scale failed inside their dashboard product where the 68px token became useless noise. They kept golden ratio strictly for marketing pages and switched the product UI to perfect fourth. The New York Times 2022 Style section experimented with the same scale on long-form articles. The 110px drop cap treatment on feature openers created theatrical entrances that matched the fashion photography. On mobile they remapped the 110px token to 52px rather than let it become a single giant word per line.

When to use it and when to avoid it. Use golden ratio when the headline must dominate the fold and the project has breathing room. Landing pages, editorial sites, brand stories, and magazine layouts are its natural habitat. It works when you control the photography and whitespace so the 110px headline has space to breathe. It works on marketing sites like Stripe's 2024 campaign pages where a single message needs to stop scroll dead. It works when your art direction is expressive and your font has strong display cuts like GT America or Neue Haas Grotesk at heavy weights. Avoid it on SaaS tools, admin panels, documentation sites, or any interface that must fit twelve controls in 320px of width. The ratio creates gaps too large for dense UI. Never use it when your client demands seven heading levels. The jumps eat the entire size range before you reach H4. Skip it on mobile-first products where every pixel matters. The 1.618 multiplier forces painful tradeoffs at 375px viewports and produces sizes that round to awkward values like 27.8px. Use major third instead for those projects. The 1.25 steps keep every level usable from mobile through desktop. Test the full scale on real content before committing. Generate the numbers, set them in a real Next.js build, and check the homepage hero, a 2000-word article, and a settings panel. If any of those three feels theatrical for the wrong reasons, kill the scale immediately.

The golden ratio turns a headline into a billboard without needing extra color or weight to sell the importance.