What is a modular type scale?
A modular type scale is a set of font sizes derived from a single base size and a fixed ratio. Each step up multiplies the previous size by the ratio; each step down divides it. The result is a harmonious progression where every size belongs to the same mathematical family.
Instead of picking sizes by eye — 12, 14, 16, 20, 24, 32 — a modular scale gives you sizes that feel related because they are. Designers borrowed the concept from music, where intervals like the perfect fifth or major third create chords that sound right together.
Common ratios and when to use them
The ratio you choose determines how spread apart your scale steps are.
Minor Second (1.067) — very tight steps, useful for data-dense UIs like dashboards where you need many distinct sizes without dramatic jumps.
Minor Third (1.200) — gentle contrast between steps. A good default for product UIs that need clear hierarchy without the drama of a landing page.
Major Third (1.250) — slightly more expressive. Works well for SaaS marketing sites.
Perfect Fourth (1.333) — a clear, confident jump between sizes. The most popular ratio for general web use. Heading levels feel genuinely distinct from body text.
Perfect Fifth (1.500) — dramatic contrast. Best for editorial, portfolio, or branding-heavy sites where display type needs to dominate.
Golden Ratio (1.618) — extreme contrast between steps. Striking for display-only hierarchies; rarely practical for multi-level body copy.
Start with Perfect Fourth if you're unsure. It reads naturally at both small and large viewport widths.
Building the scale step by step
Pick a base size — 16px is the browser default and a solid anchor. With a Perfect Fourth ratio (1.333):
| Step | Calculation | Result | |------|------------|--------| | -2 | 16 / 1.333² | 9px | | -1 | 16 / 1.333 | 12px | | 0 | 16 | 16px | | 1 | 16 × 1.333 | 21px | | 2 | 16 × 1.333² | 28px | | 3 | 16 × 1.333³ | 38px | | 4 | 16 × 1.333⁴ | 51px |
Round to the nearest whole pixel for implementation. Steps 0 through 3 typically map to body, h4, h3/h2, and h1. Step 4+ is display type.
Exporting as CSS variables
Once you have your scale, encode it as design tokens so every component inherits it automatically:
:root {
--text-xs: 0.75rem; /* 12px — captions, labels */
--text-sm: 0.875rem; /* 14px — secondary body */
--text-base: 1rem; /* 16px — body copy */
--text-lg: 1.333rem; /* ~21px — lead / intro */
--text-xl: 1.777rem; /* ~28px — h3 */
--text-2xl: 2.369rem; /* ~38px — h2 */
--text-3xl: 3.157rem; /* ~51px — h1 */
--text-4xl: 4.209rem; /* ~67px — display */
}
Reference these in components with var(--text-lg) rather than hardcoded px values. When you revisit the scale — say, switching from Perfect Fourth to Major Third for a rebrand — you update the token file once and everything updates.
Automating the calculation
You don't need to calculate this by hand. The free Typography Scale Generator at UXNext lets you pick a base size, choose a ratio, and instantly preview all scale steps. It exports a ready-to-paste CSS variables block or a Tailwind fontSize config object — either works as your token foundation.
Pairing with line height and letter spacing
A scale is only part of the story. Each size needs matching line height and letter spacing to read well:
- Display sizes (3xl+): tight line height (~1.05), slight negative tracking (−0.02em to −0.04em)
- Heading sizes (xl–2xl): compact line height (~1.2), minimal negative tracking
- Body sizes (base–lg): relaxed line height (~1.6), neutral tracking (0)
- Labels / captions (xs–sm): medium line height (~1.4), wide positive tracking (0.04em–0.08em)
Encode these alongside your size tokens and your typography system is complete — consistent from the first component you build to the thousandth.