Pick heading sizes one at a time and a page starts to feel accidental — 34px here, 40px there, 28px for no reason at all. Every size becomes a fresh negotiation, and the result reads as noise even when nobody can name the problem. A modular type scale fixes this by replacing a dozen small decisions with one big one: a base size and a ratio, from which every other size follows.
The free type scale calculator does the whole job in the browser: pick a base size and a ratio, see the full modular scale, preview it in real Google Fonts, explore curated font pairings, and copy the CSS out when it looks right. Everything recomputes live — change the ratio and every step, preview, and code snippet updates on the spot. This post covers how to think about the two numbers, because the tool is easy; the judgment is the useful part.
Try Type Scale Calculator — free, no sign-up.
What a Modular Scale Actually Is
A modular scale is a series of font sizes where each step multiplies the previous one by a fixed ratio:
size(n) = base × ratio ^ n
With a base of 16px and a ratio of 1.250 (the major third), the scale upward runs 20, 25, 31.3, 39.1, 48.8, 61.0 — and downward, 12.8. Each size is related to the others by the same interval, the way musical pitches are related by a fixed ratio rather than arbitrary frequencies.
The practical effect is that type starts to feel designed rather than assembled. The intervals between levels carry information: a reader senses that an h2 is two "steps" above body text and one below an h1, even without measuring. Per-heading guesswork — nudging a size up 2px, down 1px, settling on a compromise — produces sizes with no relationship to each other, and the eye registers the inconsistency as amateurishness long before it registers any individual size as wrong.
The other benefit is leverage. A scale is one decision instead of six. When the design needs to feel bigger or tighter, you change the base or the ratio and the whole hierarchy moves coherently — instead of re-choosing every size by hand and re-introducing drift.
Choosing a Ratio: The Three Classics
The Type Scale Calculator accepts any ratio, but three values carry the field's history, and they anchor most real projects:
| Step | Major third 1.250 | Perfect fourth 1.333 | Golden ratio 1.618 |
|---|---|---|---|
| −2 | 10.2 | 9.0 | 6.1 |
| −1 | 12.8 | 12.0 | 9.9 |
| 0 (base) | 16 | 16 | 16 |
| +1 | 20.0 | 21.3 | 25.9 |
| +2 | 25.0 | 28.4 | 41.9 |
| +3 | 31.3 | 37.9 | 67.8 |
| +4 | 39.1 | 50.5 | 109.7 |
(All values in pixels from a 16px base; the math is exact, the display rounded to 0.1.)
How to read the table:
- Major third (1.250) — tight, for UI. Steps are modest enough that a full heading hierarchy fits between 16 and 40px. Interfaces, documentation, dashboards: anywhere the page should feel calm and the hierarchy should stay understated.
- Perfect fourth (1.333) — the middle. Noticeably more contrast than 1.250 without exploding; a strong default for blogs and marketing pages that still need several heading levels.
- Golden ratio (1.618) — dramatic, for editorial. Two steps up nearly triples the base, and step +4 is a 110px display size. Good for landing pages with two or three levels and a hero; unusable for a documentation site with h1 through h6.
The rule of thumb: the more heading levels you need, the smaller the ratio should be. A scale that climbs too fast forces you to skip steps, and skipped steps reintroduce exactly the arbitrary size choices the scale was supposed to eliminate.
Fluid Type With clamp()
A scale gives you fixed sizes; screens are not fixed. The modern answer is CSS clamp(), which interpolates fluidly between a minimum and a maximum while respecting both:
h1 {
font-size: clamp(31.3px, 24px + 2.2vw, 48.8px);
}
Read it as: never smaller than 31.3px, never larger than 48.8px, and fluid in between. The min and max here are two steps of the 1.250 scale above — that is the pattern worth stealing. Take the scale step you want on mobile and the step you want on desktop, and let clamp() handle the middle:
- Decide the scale steps for each level at the smallest and largest viewports you design for.
- Set
clamp(min, preferred, max)with those two scale values as the bounds. - Tune the preferred middle expression (
base + Nvw) until the transition feels even — the tool's copy-ready CSS gives you the fixed sizes to build these bounds from.
Fluid type removes the media-query cliff edges where every heading jumps at once, and it lets a single h1 serve both a 360px phone and a 1440p monitor. The scale still does the deciding; clamp() only smooths the delivery.
Pairing Fonts Without Guesswork
A scale sets sizes; pairing sets voices. Two rules cover most of it:
- Contrast, not similarity. A serif for headings over a grotesque sans for body works because the two fonts are visibly different kinds of objects. Two similar sans-serifs paired together read as a mistake — the eye detects the mismatch of details (different a, g, t shapes) without either font registering as itself.
- One loud voice at most. If the display font has strong personality, the body font should be quiet. Two characterful fonts fight; the page gets loud and nothing wins.
This is where live preview earns its keep. Font pairing judged in a dropdown thumbnail is pairing judged at the wrong size, weight, and line length. The calculator previews pairings in real Google Fonts at actual scale sizes, so you evaluate the pairing as readers will meet it — headline at 48.8px next to body at 16px — and swap pairings until the contrast lands. Iterating there costs seconds; discovering the mismatch after shipping costs an evening.
For everything visual beyond type — marks, icons, simple logos — a browser vector editor covers the same kind of ground in the free online vector editor for logos and icons. Type scale plus a simple mark is most of a small brand.
The Copy-Paste CSS Workflow
The full loop, start to finish:
- Open the type scale calculator and set the base to your real body size — 16px minimum for long-form readability on desktop, 17–18px if the line length runs long.
- Pick the ratio by heading count. Three levels plus a hero: 1.333 or 1.618. Five or six levels: 1.250.
- Map steps to elements. body = step 0, small = −1, h3 = +2, h2 = +3, h1 = +4, display = +5. Skip nothing in between that you actually use.
- Preview pairings in real Google Fonts at those exact sizes, and settle on a heading/body pairing with real contrast.
- Copy the CSS. The calculator emits copy-ready CSS for the whole scale; paste it into your stylesheet as the single source of truth for sizes.
- Wrap key levels in clamp() using adjacent scale steps as bounds, per the pattern above, so headings stay proportional from phone to desktop.
From then on, size changes happen at the scale level, not the element level. When a redesign asks for "bigger type," you change one ratio and watch the whole hierarchy re-decide itself — coherently, which was the point all along.
Frequently Asked Questions
What is a good type scale ratio for a website?
For interfaces and documentation with several heading levels, 1.250 (the major third) keeps the hierarchy calm and everything readable. For marketing and editorial pages, 1.333 (perfect fourth) adds contrast without exploding. 1.618 (golden ratio) suits dramatic landing pages with few levels. The more heading levels, the smaller the ratio.
How many sizes do I actually need?
Usually five to seven: base body, a small size for captions, and three or four heading/display levels. A modular scale generates infinitely many steps, but a page should only use the handful it maps to real elements — every extra size in play dilutes the hierarchy.
What base font size should I choose?
Start at 16px for body copy and go to 17–18px if your measure (line length) runs long, since bigger type at longer measures reads more comfortably. The base matters more than any other number in the scale, because every other size multiplies out from it.
How do I make a modular scale responsive?
Use clamp(min, preferred, max) with two adjacent scale steps as the min and max bounds, and a vw-based expression in the middle. Each heading then interpolates smoothly between the two sizes across viewports instead of jumping at breakpoints, while staying inside scale-defined limits.
Why preview pairings in Google Fonts instead of system fonts?
Because you are choosing fonts you will actually ship, at the sizes readers will actually see. A pairing that looks fine as a 14px sample can fall apart at a 48.8px headline, and Google Fonts previews expose that before you commit a single stylesheet line — no downloads or installs required.
Can I mix steps from different ratios on one page?
You can, but it reintroduces the exact guesswork the scale exists to remove. A cleaner approach when one ratio does not fit everything: keep a single ratio and skip steps for the rare display size, rather than maintaining two competing scales. One ratio, one decision — that is the discipline that makes type feel designed.
