What a Typography Scale Is
A typography scale is a set of font sizes where each step is multiplied by a constant ratio. The result: headings, body text, and captions feel visually related rather than like arbitrary sizes picked independently. This isn't a design trend — it's derived from centuries of typesetting practice, where metal type came in fixed sizes related by common ratios.
Choosing a Scale Ratio
- 1.25 (Major Third): Subtle progression. Good for dense content like documentation and long-form reading. Sizes: 12, 15, 19, 24, 30, 37, 47.
- 1.333 (Perfect Fourth): Visible but restrained. Good for blogs, articles, and professional sites.
- 1.5 (Perfect Fifth): Clear contrast between levels. Good for marketing sites, landing pages, and SaaS.
- 1.618 (Golden Ratio): Dramatic jumps. Use sparingly — for hero text and statements, not body content.
Pick your base size (typically 16px = 1rem for body text) and multiply up for headings, divide down for captions and small print. The ratio determines how dramatic or subtle the hierarchy feels.
Building a Scale
Base: 16px, Ratio: 1.25
16 × 1.25⁰ = 16px (body)
16 × 1.25¹ = 20px (h4)
16 × 1.25² = 25px (h3)
16 × 1.25³ = 31.25px (h2)
16 × 1.25⁴ = 39px (h1)Fluid Typography with clamp()
Modern CSS supports fluid type scales that scale smoothly between viewport sizes:
h1 {
font-size: clamp(2rem, 1rem + 3vw, 4rem);
}
/* At 320px viewport: 1.6rem
At 768px viewport: 2.36rem
At 1280px viewport: 2.84rem
Clamped at max: 4rem */A fluid scale eliminates the need for breakpoint-specific font sizes. Define a minimum, a preferred value (viewport-relative), and a maximum. The browser handles the interpolation.
CSS Custom Properties for Type Scales
:root {
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
}Using custom properties makes the scale available everywhere and easy to adjust globally. Change the base size or ratio once; the entire scale updates.
Generate a Typography Scale Now
Use ToolsVito's Typography Scale Calculator to build a modular or fluid type scale from your chosen base size and ratio. See a live preview and copy the CSS. All in your browser.