Type Scale
A curated set of font sizes derived from a mathematical ratio for consistent typographic hierarchy.
Plain English
A type scale is a restricted menu of font sizes. Instead of choosing 13px for one thing, 15px for another, and 17px for a third, you pick 5–7 sizes from a consistent ratio and use only those. The result is a layout that feels rhythmically ordered — the eye can sense that sizes are related even if it can't measure them. Without a scale, size choices feel arbitrary, and the layout feels like it was built by multiple people who never talked.
Technical
Common ratios: Major Second (1.125×), Minor Third (1.2×), Major Third (1.25×), Perfect Fourth (1.333×), Golden Ratio (1.618×). Starting from a 16px base with a 1.25 ratio produces: 12.8 / 16 / 20 / 25 / 31.25 / 39px — rounding to 13 / 16 / 20 / 24 / 30 / 40px. Tailwind and most design systems encode a type scale as CSS custom properties or tokens. Implement with rem units for accessibility.
Live Demo
A 7-stop type scale. Each level has a distinct size — no two values should look similar by accident.
Usage
✓ Good usage
Define 6 type tokens (12/14/16/24/32/48px) and use only those — every element on every page maps to one of these values.
✗ Bad usage
Using a different font size for every component (13px nav, 15px card title, 17px body, 19px subheading) — sizes are so close they look like accidents.
Recommended values
- 12px — captions, timestamps, metadata
- 14px — secondary labels, supporting text
- 16px — body copy (browser default, accessibility minimum)
- 20px — lead paragraphs, large body
- 24px — card headings, H3
- 30–32px — section headings, H2
- 40–48px — page title, H1
- 60–72px — hero / display text
Common mistakes
- Using too many steps in the scale — 4–6 distinct sizes is enough for most UIs.
- Using px instead of rem — breaks when users change their browser font size.
- Ignoring line-height when defining the scale — size and line-height belong together.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a 6-step type scale: 12 / 14 / 16 / 24 / 32 / 48px (in rem units). Caption text at 12px, body at 16px, card headings at 24px, section headings at 32px, page title at 48px. No other sizes.