Define a small set of type sizes on a ratio, with line height and measure tied to each, so text hierarchy is consistent without per-screen decisions. Use when setting typography, fixing inconsistent text, or starting a design system.
--- name: build-a-type-scale category: design description: >- Define a small set of type sizes on a ratio, with line height and measure tied to each, so text hierarchy is consistent without per-screen decisions. Use when setting typography, fixing inconsistent text, or starting a design system. --- # Build a Type Scale Without a scale, sizes accumulate: 14px here, 15px there, 13px because it looked better that once. A year later a codebase has thirty font sizes, no two headings match, and every new screen is a fresh argument. A scale is a small closed set of sizes, generated by a ratio, that you commit to. ## Generate it from one ratio Pick a base — 16px is the browser default and a good body size — then multiply and divide by a ratio: | Ratio | Feel | Use | |---|---|---| | 1.125 (major second) | Tight, dense | Data-heavy apps, dashboards | | 1.200 (minor third) | Balanced | Most product UI | | 1.250 (major third) | Clear separation | Marketing, content | | 1.333 (perfect fourth) | Dramatic | Landing pages, editorial | At 1.2 from a 16px base: ``` xs 11px caption, legal sm 13px secondary text, labels base 16px body lg 19px lead paragraph, card title xl 23px section heading 2xl 28px page heading 3xl 33px hero ``` Round to whole pixels. Seven steps is usually plenty; if you need a size between two of them, you almost certainly need a different weight or colour instead. **Use a tighter ratio in dense UI and a wider one for marketing.** A 1.333 scale inside a table wastes space; a 1.125 scale on a landing page reads as flat.
You are reading the opening of this skill.
The rest is open to any signed-in account — free included. Reading the library costs nothing.
Shared publicly by the author and open for any use. See the Terms.