A typography scale is a set of font sizes where each step increases by a consistent ratio. A common scale uses a 1.25 ratio (Major Third): 16px, 20px, 25px, 31px, 39px, 49px. Each size is 1.25× the previous one. The result: every heading level feels proportionally "one step up" from the last, creating a visual rhythm the brain processes effortlessly.
Pages without a type scale use random sizes — 16px body text, then a 28px heading, then a 22px subheading, then a 36px section title. The inconsistency doesn't register consciously, but it makes the page feel disorganized. When sizes don't follow a pattern, the brain can't quickly assign hierarchy levels, so users spend more effort parsing structure instead of absorbing content.
Choosing the right scale for landing pages
For landing pages, use a more dramatic ratio than you'd use for a blog. A 1.333 (Perfect Fourth) or 1.5 (Perfect Fifth) scale gives you enough contrast between headings to make hierarchy obvious at scanning speed. Blog-optimized scales (1.2 ratio) don't provide enough differentiation when users are making split-second decisions about what to read.
Practical implementation: define 5-6 sizes in your CSS variables. Use the smallest for captions and fine print, one for body text, one for subheadings, one for section headings, and the largest for your hero headline. Then use only those sizes. When you're tempted to add a 17px or tweak a 32px for a specific element, resist. The system's value comes from its constraints.