Type scale
A fixed ladder of font sizes built from one base size and one ratio, so your headings relate to each other instead of being random numbers.
See it
What it is
A type scale is a small, fixed set of sizes generated from one base size and one ratio, instead of whatever number felt right that day. Start at 16px and multiply by 1.25 (major third) and you get 16, 20, 25, 31, 39, 49. Common ratios: 1.125 (major second) for dense UI, 1.25 for general product work, 1.333 (perfect fourth) for editorial, 1.618 (golden ratio) for dramatic marketing pages. The idea comes from musical intervals by way of Renaissance page design.
Reach for one the moment you have more than three text sizes. It kills the 17px-versus-18px debate, makes hierarchy obvious because each step is visibly different, and gives you named tokens ('text-sm', 'text-2xl') that survive a redesign. Tailwind and most design systems ship a scale already; you are usually choosing one, not inventing it.
Gotcha: a pure ratio explodes at the top and crowds at the bottom. 1.333 from 16px hits 67px by the fifth step, and the small end gives you 12.0 and 9.0 where you actually wanted 14 and 12. Most real scales are hand-adjusted: tight and hand-picked below the base, ratio-driven above it. Also give each step its own line-height, since big text needs proportionally less.
Ask AI for it
Define a type scale for this project as CSS custom properties: base 1rem, ratio 1.25 (major third), six steps up (--text-lg through --text-5xl) and two hand-tuned steps down (0.875rem, 0.75rem). Give every step a paired line-height that tightens as size grows (1.6 for body, 1.1 for the largest display). Apply the tokens to h1 through h6, body, caption, and label, and use no font-size value outside the scale.