A type scale is a set of font sizes generated from one base value so every heading and paragraph relates to the others instead of being a random pixel guess. You pick a base size, pick a ratio, and multiply your way up. The result reads as deliberate because the math makes it consistent. Here is how to build one.
What a type scale is
A modular type scale starts with two decisions: a base font size and a ratio. The base is almost always 16px, the browser default, which keeps body text comfortable. Each step up is the previous size multiplied by the ratio, so the gaps grow proportionally rather than linearly.
Say your base is 16px and your ratio is 1.25. The next step is 16 x 1.25 = 20px, then 20 x 1.25 = 25px, then 25 x 1.25 = 31.25px, and so on. Steps below the base divide instead, giving you small print and captions. That single ratio is what makes the whole set feel like a family.
Picking a ratio
The ratio controls how dramatic the jump between sizes is. Common musical ratios work well for the web:
- 1.2 (minor third): subtle, good for dense interfaces and dashboards.
- 1.25 (major third): a reliable all-rounder for most sites.
- 1.333 (perfect fourth): more contrast, great for editorial and marketing pages.
- 1.5 (perfect fifth): bold, large headings, use with care.
Bigger ratios mean bigger headings and fewer usable steps before sizes get unwieldy. A smaller ratio gives you more steps that sit close together.
Build your scale in three steps
- Open the Font Size Scale and set your base to 16px.
- Choose a ratio such as 1.25, and read off the generated steps up and down.
- Copy the values as rem and map them to your elements.
Use rem, not px, for every size. One rem equals the root font size, so when a visitor bumps their browser’s default text size for readability, your whole scale grows with it. Hard-coded pixels ignore that preference and hurt accessibility.
A typical mapping from a 1.25 scale looks like this:
:root {
--step--1: 0.8rem; /* small print */
--step-0: 1rem; /* body, 16px */
--step-1: 1.25rem; /* h6 / lead */
--step-2: 1.5625rem;/* h5 */
--step-3: 1.953rem; /* h4 */
--step-4: 2.441rem; /* h3 / h2 */
--step-5: 3.052rem; /* h1 */
}
body { font-size: var(--step-0); }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
Make it fluid with clamp()
A fixed scale looks great on desktop but headings can feel oversized on a phone. The fix is fluid type with CSS clamp(), which takes a minimum size, a preferred size that flexes with the viewport, and a maximum:
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.052rem); }
The heading never drops below 2rem or grows past 3.052rem, and in between it scales smoothly with screen width. Generate a fluid scale on the Font Size Scale, and it produces these clamp() values for each step so you do not have to work out the slope by hand. Everything runs in your browser, so nothing you type is sent anywhere.
Related tools
- CSS clamp() Calculator: fine-tune a single fluid value between two breakpoints.
- Tailwind Color Reference: pair your type with a consistent color palette.
- Aspect Ratio Calculator: keep media sizing as tidy as your type.
Pick a base, pick a ratio, and let the math give your typography a rhythm.