What is a typography scale?
A typography scale is a set of predefined font sizes that follow a mathematical ratio. Creates visual hierarchy without guesswork — from xs to 6xl.
Definition
A typography scale is a set of harmonious font sizes derived from a mathematical ratio (such as 1.25 or 1.333). It creates consistent visual hierarchy from the smallest label to the largest display heading.
How it works
Instead of picking arbitrary sizes (14px, 18px, 24px, 36px?), a typographic scale uses a ratio to generate sizes that feel naturally related. A 'Major Third' scale (ratio 1.25) starting from 16px gives you: 16, 20, 25, 31.25, 39, 48.8. Tailwind's default scale approximates this. The key insight: our eyes are surprisingly good at detecting when sizes don't follow a harmonic pattern, even if we can't articulate why something 'feels off.'
Why it matters
A consistent type scale is the fastest way to create visual hierarchy. Headlines feel important. Subheadings guide scanning. Body text is readable. When developers skip this and eyeball sizes, text feels chaotic — h1 is too close to h2, captions are the same size as body text, and there's no clear reading order.
Example
Tailwind's default scale: `text-xs` (12px), `text-sm` (14px), `text-base` (16px), `text-lg` (18px), `text-xl` (20px), `text-2xl` (24px), `text-3xl` (30px), `text-4xl` (36px), `text-5xl` (48px). Ratio ≈ 1.2.
Related terms
Skip the theory, generate the result
OneMinuteBranding generates your complete brand system — including typography scale — in 60 seconds.
Generate your typographyNo account required • 60-second generation • $49 one-time