Tools — 04
A scale is a promise that no size is accidental.
Pick a base size, pick a ratio, and every heading on every page inherits the same logic. A scale that reads well at 1440px is usually too steep at 320px, so the fluid mode takes a ratio at each end and interpolates every step between them.
Inputs
Scale type
Ratio at small end
Ratio at large end
Minor Third at 320px, Major Third at 1440px. Every step interpolates between the two.
The specimen below is set at the size each step resolves to at this width.
Specimen
--text-cover-xl 47.8px → 76.3px , now 59.2px
Design systems fail slowly
--text-cover 39.8px → 61px , now 48.3px
Design systems fail slowly
--text-display 33.2px → 48.8px , now 39.4px
Design systems fail slowly
--text-title 27.6px → 39.1px , now 32.2px
Design systems fail slowly
--text-lead 23px → 31.3px , now 26.3px
Design systems fail slowly
--text-body-lg 19.2px → 25px , now 21.5px
Design systems fail slowly
--text-body 16px → 20px , now 17.6px
Design systems fail slowly
--text-caption 13.3px → 16px , now 14.4px
Design systems fail slowly
Copy-ready output
/* Fluid modular scale — 16px at 320px, 20px at 1440px */
/* Ratio 1.2 (Minor Third) → 1.25 (Major Third) */
:root {
--text-caption: clamp(0.8331rem, 0.7854rem + 0.2384vw, 1rem);
--text-body: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
--text-body-lg: clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem);
--text-lead: clamp(1.44rem, 1.2934rem + 0.733vw, 1.9531rem);
--text-title: clamp(1.7281rem, 1.5244rem + 1.0188vw, 2.4413rem);
--text-display: clamp(2.0738rem, 1.7943rem + 1.3973vw, 3.0519rem);
--text-cover: clamp(2.4881rem, 2.109rem + 1.8955vw, 3.815rem);
--text-cover-xl: clamp(2.9863rem, 2.4771rem + 2.5455vw, 4.7681rem);
}Each step is a single fluid value. For a one-off size that is not part of the scale — a container padding, a gap, a radius — use the clamp() calculator.
Reference
A modular type scale multiplies a base size by a ratio raised to each step: 16px at a 1.25 ratio gives 20px, 25px, 31.25px upward and 12.8px downward. Common ratios are 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth) and 1.618 (golden ratio).
How is a modular type scale calculated?
Each step is base × ratio^n, where n is the step's distance from the base. A 16px base at 1.25 produces 16, 20, 25, 31.25 and 39.06 going up, and 12.8 going down.
This scale runs eight steps with the base at position two, so the caption tier below body text is part of the system rather than an exception bolted on later.
Which ratio should you choose?
Ratios between 1.2 and 1.333 suit interfaces, where many sizes must coexist in one dense screen. 1.618 suits editorial layouts with few sizes and large jumps between them.
The higher the ratio, the faster the top steps run away: at 1.618 the fifth step above a 16px base is 179px, which is a poster, not a heading.
Should a type scale be fluid or static?
Fluid, if the top of the scale is large. A ratio that reads well at 1440px is usually too steep at 320px, because the display and cover steps overflow a narrow screen long before the body text does.
This tool's fluid mode therefore takes two ratios, one per end, and interpolates every step between them with clamp(). A single ratio stretched across both ends is the common mistake — it fixes the base size and leaves the headline broken.
| Ratio | Name | Step above 16px | Suited to |
|---|---|---|---|
| 1.067 | Minor second | 17.07px | Dense data UI, very gentle hierarchy |
| 1.2 | Minor third | 19.2px | Interfaces, narrow viewports |
| 1.25 | Major third | 20px | General-purpose product UI |
| 1.333 | Perfect fourth | 21.33px | Marketing pages, clear hierarchy |
| 1.618 | Golden ratio | 25.89px | Editorial, few sizes, big jumps |
Common questions
- What is a good base font size for body text?
- 16px, which is the default in every major browser. Setting it smaller means the user has to zoom, and expressing it in rem keeps their own browser setting intact.
- Should type steps be in rem or px?
- rem. A size in rem scales with the user's browser font-size setting; a size in px ignores it, which fails WCAG 2.2 success criterion 1.4.4 Resize Text if the text cannot reach 200%.
- How many steps does a type scale need?
- Six to eight. Fewer forces unrelated content to share a size; more produces steps too close together to read as distinct, and nobody can remember which is which.