A typography scale is a set of predefined font sizes that follow a mathematical ratio. Creates visual hierarchy without guesswork — from xs to 6xl.
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.
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.'
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.
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.
OneMinuteBranding generates your complete brand system — including typography scale — in 60 seconds.
Generate your typographyNo account required • 60-second generation • $49 one-time