Typographic Ratio

A typographic ratio is the consistent multiplier applied to a base size that creates every other size in a modular scale. It exists because human vision responds to proportional steps far more than linear ones. The same logic that makes musical fifths feel right makes 1.25 steps in type feel even.

It is not any random number that looks good in a mockup. It is not the difference between two sizes but the multiplier that connects them. Teams often pick the golden ratio because it sounds impressive then force it onto dense admin tools where it creates chaos.

Five ratios cover almost every real product. 1.125 minor second for tight data heavy dashboards. 1.2 minor third for balanced compact interfaces. 1.25 major third for standard SaaS and editorial work. 1.333 perfect fourth for generous magazine layouts. 1.618 golden ratio for dramatic hero driven marketing sites.

Vercel chose 1.125 for its Geist system in 2023. The tight steps keep headings from stealing focus from dense tables and metrics. Stripe converged on 1.25 across its entire product suite. The scale gives enough headline pop without making body text feel tiny by comparison.

Ratios outside this range usually create problems. Below 1.1 the steps collapse into each other and hierarchy disappears. Above 1.7 the jumps become so aggressive you run out of usable sizes in the middle of the scale. Most teams who think they need a wider range actually need two separate scales.

The ratio decision is a product decision first and a design decision second. Dense CRM tools need tight ratios so hierarchy comes from weight and color not size. Editorial sites need wider ratios so headlines earn their hero blocks.

Use a deliberate typographic ratio the moment your product ships more than five core screens. The multiplier becomes the standard everyone can defend in critique. It survives base size changes and team growth because the math stays constant.

Avoid letting marketing whims dictate the ratio for an entire product. A dramatic 1.618 scale forced onto an internal analytics tool creates noise that exhausts users by lunch. Match the ratio to the actual density users will stare at for hours.

The tradeoff sits in flexibility versus consistency. One ratio forces discipline across every surface. When you truly need different densities for different modes consider separate scales instead of compromising the primary one.

Pick your ratio based on the product you actually ship not the one that looks coolest on a Pinterest board. Then commit like your quarterly redesign meetings depend on it. They do.

A typographic ratio is the quiet multiplier that decides whether your typography feels harmonious or like a collection of accidents.