Modular Type Scales: How One Ratio Sizes Your Whole Design

Open a design that feels amateur and the font sizes are almost always the culprit: a 16px body, a 22px subhead, a 24px heading and a 28px title, all close enough that nothing reads as clearly more important than anything else. The hierarchy is mushy because the sizes were picked one at a time by eye. Professional typography rarely works that way. Instead it derives every size in the system from one base size and one ratio, so the steps relate to each other the way notes in a musical scale do. That’s a modular type scale, and it turns “what size should this heading be?” from a guess into arithmetic.

What a modular scale actually computes

A modular scale starts from a base — almost always 16px, the browser default — and a ratio greater than 1. Every step up multiplies by the ratio; every step down divides by it:

step  0  = base                     = 16.00 px
step +1  = base × ratio             = 19.20 px   (ratio 1.2)
step +2  = base × ratio²            = 23.04 px
step −1  = base ÷ ratio             = 13.33 px
step −2  = base ÷ ratio²            = 11.11 px

The general form is size = base × ratio^step. Because each size is the previous one multiplied by the same factor, the ratios between adjacent sizes are all identical — which is exactly what makes the hierarchy feel intentional. The gap between body and subhead is proportionally the same as the gap between subhead and heading, so the eye reads a consistent rhythm. A typical scale runs a few steps below the base (for captions and fine print) and several steps above it (for headings and display text), naming them something like xs, sm, base, md, lg, xl, 2xl and up.

Choosing the ratio: why they have musical names

The ratio is the single most important decision, and the common presets borrow their names from musical intervals because the maths is the same — an interval is a frequency ratio, and a type scale is a size ratio:

Minor second      1.067   very tight, dense UI text
Major second      1.125   subtle, good for content-heavy pages
Minor third       1.200   a popular, balanced default
Major third       1.250   clear hierarchy without drama
Perfect fourth    1.333   strong, editorial contrast
Augmented fourth  1.414   the √2 ratio (also paper sizes)
Perfect fifth     1.500   bold, poster-like jumps
Golden ratio      1.618   dramatic, large display work

A small ratio like 1.125 keeps every size close together — sensible for an information-dense dashboard or a long article where you don’t want headings shouting. A large ratio like 1.5 or the golden ratio 1.618 produces big, confident leaps that look great on a landing page but can blow your largest heading up to 80–100px, which only works with lots of whitespace. A safe starting point for most websites is the minor third (1.2) or major third (1.25): enough contrast to establish clear levels, not so much that the scale runs away from you. The ratio interacts with the base, too — bump the base to 18px for a reading-heavy site and every derived size grows with it, keeping the whole system in proportion.

Line-height should shrink as size grows

Font size is only half of legible type; line-height matters just as much, and the right value isn’t constant across the scale. Small body text needs generous leading — around 1.5–1.6 — so the eye can track from the end of one line to the start of the next. Large headings need much tighter line-height, often 1.1 or lower, or the lines drift apart and the heading stops reading as a single unit. A good scale therefore reduces line-height as size increases: roughly 1.6 for body, 1.4 for mid-size headings, and as tight as 1.05–1.1 for display sizes, clamped so it never becomes unreadable at either extreme. Tying line-height to step number means you get a sensible default for every size for free, instead of hand-tuning each one.

From scale to code

The reason a computed scale beats eyeballing is that it drops straight into your stylesheet as reusable tokens. Expressed as CSS custom properties it becomes a single source of truth:

:root {
  --fs-sm:   0.8333rem;  /* 13.33px */
  --fs-base: 1.0000rem;  /* 16.00px */
  --fs-lg:   1.4400rem;  /* 23.04px */
  --fs-xl:   1.7280rem;  /* 27.65px */
}

Sizes are emitted in rem (px ÷ 16) so they respect the user’s browser font-size setting — an accessibility win over hard-coded pixels. The same scale exports just as cleanly as a Tailwind fontSize block, pairing each step with its line-height so your utility classes carry the full type system. Define the scale once, reference the tokens everywhere, and changing the whole site’s typographic feel becomes a matter of editing two numbers — the base and the ratio.

Common mistakes and how the scale fixes them

Three pitfalls trip up people who size type by hand, and a modular scale heads off all of them. The first is too many sizes that are too close together — once every value is a fixed ratio apart, you physically can’t create two near-identical sizes, so the muddy hierarchy problem disappears. The second is inconsistent rounding: hand-picked sizes drift to whatever looked nice (17px here, 23px there), whereas a generated scale rounds every value the same way and keeps the relationships intact. The third is forgetting the small end — captions, labels and legal text need defined sizes too, and a scale gives you steps below the base for free instead of leaving you to invent a “small” size on the spot.

It’s also worth resisting the temptation to use every step. A scale of ten steps doesn’t mean a design should use ten sizes — most interfaces look cleaner using four or five well-separated steps (say body, a subhead, a heading and a display size) and leaning on weight and colour for the finer distinctions. The scale is a palette to choose from, not a quota to fill. Many designers even reuse the same ratio for spacing — margins and padding stepped by the same factor — so type and layout share one underlying rhythm.

Build your scale

You only need the base, the ratio and the base × ratio^step formula to generate a scale by hand, but doing it for ten steps with line-heights and rounding is tedious. The Typography Scale Calculator builds the full scale live as you change the base and ratio, previews each size with its suggested line-height, and copies the result as ready-to-paste CSS custom properties or a Tailwind block. When your design moves from screen to print, the Font Size Converter helps you translate px and rem into points, and the Pixels to cm / Inches Print Calculator keeps everything sized correctly at a given DPI. Pick one ratio, commit to it, and your typography will finally look like a system instead of a pile of guesses.