Typography Scale Guide: Modular Scales, Ratios & Responsive Sizing
One of the fastest ways to make a website look unpolished is choosing font sizes at random—picking 18px here, 22px there, 35px for an H2, and 44px for an H1. Without a shared mathematical logic, the visual hierarchy feels disjointed and chaotic.
A modular typography scale uses a fixed base size and a consistent mathematical ratio to generate every font size in your design system. Much like musical notes adhering to a harmonized scale, modular type creates an intuitive cadence that guides the reader effortlessly through content.
Understanding Modular Ratios
A modular scale begins with a base size (most commonly 16px, representing 1rem) multiplied repeatedly by a fixed factor. Different design contexts demand different ratios:
Subtle, incremental size steps. Perfect for analytics platforms, SaaS tools, and software interfaces where screen real estate is constrained.
The most versatile, balanced web ratio. Produces clear distinction between heading tiers without overwhelming standard mobile screens.
Pronounced contrast between headings and body copy. Ideal for editorial magazines, landing pages, and storytelling layouts.
Dramatic exponential jumps. Best reserved for minimalist portfolio sites with sparse, bold typography.
A Practical Major Third Scale (Base: 16px)
Here is how a standard Major Third (1.250) scale translates into rem units and pixel equivalents:
| Element | Size (rem) | Size (px) | Line Height |
|---|---|---|---|
| Caption / Small | 0.80rem | 12.8px | 1.4 |
| Body Copy | 1.00rem | 16.0px | 1.5–1.65 |
| H4 Subheading | 1.25rem | 20.0px | 1.4 |
| H3 Section Title | 1.56rem | 25.0px | 1.3 |
| H2 Section Heading | 1.95rem | 31.25px | 1.2 |
| H1 Page Title | 2.44rem | 39.06px | 1.15 |
| Hero Display | 3.05rem | 48.8px | 1.1 |
Fluid Typography with CSS clamp()
Rather than maintaining jarring step changes between desktop and mobile media queries, modern web development relies on fluid typography using CSS clamp():
/* Fluid H1: Minimum 2rem (32px), scales smoothly with viewport, caps at 3.5rem (56px) */
h1 {
font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
line-height: 1.15;
}This ensures your headlines scale organically on mobile screens without word overflow or awkward line wraps.
Pairings That Shine With Clear Scales
Scales function best when paired with fonts featuring distinct character widths and weights: