How to Build a Typography Scale for Web Design
A type scale is a set of font sizes that follow a mathematical ratio, creating visual harmony and clear hierarchy. Instead of picking arbitrary sizes, a scale ensures every heading, body text, and caption size relates proportionally to the others — just like notes in a musical scale.
- Create a harmonious type scale with mathematical ratios.
- What Is a Type Scale?.
- Covers common scale ratios.
- Covers implementing with css custom properties.
- Covers choosing the right ratio.
What Is a Type Scale?
A type scale multiplies a base font size by a consistent ratio to generate larger and smaller sizes. With a 16px base and a 1.25 (Major Third) ratio: 16 × 1.25 = 20px, 20 × 1.25 = 25px, 25 × 1.25 = 31.25px. Going smaller: 16 / 1.25 = 12.8px. The resulting scale is: 12.8, 16, 20, 25, 31.25, 39px. Each size has a clear proportional relationship to every other size.
Common Scale Ratios
Minor Second (1.067) — very subtle differences, almost monoscale. Major Second (1.125) — gentle hierarchy, good for dense UI. Minor Third (1.2) — moderate contrast, versatile default. Major Third (1.25) — clear hierarchy, good for blogs and marketing. Perfect Fourth (1.333) — strong contrast, good for editorial. Golden Ratio (1.618) — dramatic differences, striking headlines. The Typography Scale tool lets you preview all ratios with your chosen fonts.
Implementing with CSS Custom Properties
Export your scale as CSS custom properties for consistent use:
background-size animation or @property registered custom properties instead.:root {
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
}
Reference these variables throughout your stylesheet for guaranteed consistency. Changing the scale only requires updating the root variables.
Choosing the Right Ratio
For content-heavy sites (blogs, documentation): use 1.2 (Minor Third) or 1.25 (Major Third) — clear hierarchy without extreme size jumps. For marketing and landing pages: use 1.333 (Perfect Fourth) or higher — dramatic headlines grab attention. For dense UIs (dashboards, admin panels): use 1.125 (Major Second) — subtle differences keep the interface compact.