Type scale: how to choose font sizes for a site
What a type scale is, eight classic ratios, one page in three scales, fluid sizes with clamp(), line length and spacing — with live examples.
In short
A type scale is a short set of font sizes built by one rule: each next size is the previous one multiplied by the same ratio — for example, 1.25. Instead of dozens of random sizes the project gets seven or eight steps: a caption, body text, a lead paragraph, headings of several levels. Headings stop competing, the page gets a rhythm, and designers and developers speak the same language — “step 4” instead of “around 38 pixels”. The ratio sets the character: a small one is calm and suits interfaces with a lot of text, a large one is dramatic and suits landing pages and brands. With clamp() the steps grow smoothly with the screen.
A scale of 1.25: eight steps from a caption to a hero
Every step is shown at its real size. The base is 16 px; each step up is multiplied by 1.25, each step down is divided.
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
- A scale keeps rhythm
Eight steps are enough for a whole site. Steps 0–1 are for reading, 2–3 for headings of cards and subsections, 4–6 for sections, pages and the first screen. If a layout needs a size between two steps, it is a signal to reconsider the layout, not to add a step.
Eight classic ratios and their character
The names come from music intervals. The larger the ratio, the bigger the jump between headings and text.
| Ratio | Name | Character | Suits |
|---|---|---|---|
| 1.067 | Minor second | almost flat | dense data tables |
| 1.125 | Major second | quiet | admin panels, documentation |
| 1.2 | Minor third | soft | applications, blogs |
| 1.25 | Major third | balanced | most sites |
| 1.333 | Perfect fourth | confident | corporate sites, media |
| 1.414 | Augmented fourth | expressive | landing pages |
| 1.5 | Perfect fifth | dramatic | brands, posters, portfolios |
| 1.618 | Golden ratio | very contrasting | one hero heading |
One page in three scales
The same fragment with ratios 1.125, 1.25 and 1.333: the text does not change, the character does.
Kitchens made to order
How we work
Measuring, design and assembly — one team is responsible for everything from the first meeting to the last screw.
From three weeks
Kitchens made to order
How we work
Measuring, design and assembly — one team is responsible for everything from the first meeting to the last screw.
From three weeks
Kitchens made to order
How we work
Measuring, design and assembly — one team is responsible for everything from the first meeting to the last screw.
From three weeks
Fluid sizes: a scale that grows with the screen
Move the slider: the heading grows with the width of the “screen” and stops at the limits — no jumps between breakpoints.
clamp(1.5rem, 0.9rem + 4cqi, 3.25rem)
Kitchens that last for decades
The heading grows with the screen and stops at the set limits — without jumps between media queries.
On a phone large steps are compressed: a 61 px heading does not fit a 375 px screen. clamp() sets a minimum, a growth rate and a maximum, so the hierarchy stays the same and only the contrast between steps becomes softer on small screens.
The scale in code: 2 examples
Steps as CSS variables — the same names in the layout and in the code.
Steps of the scale
Sizes in rem respect the font size the person set in the browser.
/* A scale of 1.25 from 16px: every size in the project is one of these steps */
:root {
--step--1: 0.8rem; /* 12.8px — captions */
--step-0: 1rem; /* 16px — body text */
--step-1: 1.25rem; /* 20px — lead paragraph */
--step-2: 1.5625rem; /* 25px — card title */
--step-3: 1.953rem; /* 31.25px — subsection */
--step-4: 2.441rem; /* 39px — section */
--step-5: 3.052rem; /* 48.8px — page title */
}
body { font-size: var(--step-0); line-height: 1.55; }
h1 { font-size: var(--step-5); line-height: 1.05; }
h2 { font-size: var(--step-4); line-height: 1.1; }
h3 { font-size: var(--step-2); line-height: 1.2; }
small { font-size: var(--step--1); }Fluid steps
Large steps grow with the screen; inside a component — with its container.
/* Fluid steps: the size grows with the screen between two limits */
:root {
--step-4: clamp(1.75rem, 1.35rem + 1.8vw, 2.441rem);
--step-5: clamp(2rem, 1.4rem + 2.8vw, 3.052rem);
}
/* Inside a component — from the width of its container, not of the screen */
.card { container-type: inline-size; }
.card__title { font-size: clamp(1.25rem, 0.9rem + 4cqi, 1.953rem); }Line length and line spacing
The size is only half of readability. The other half is how long the line is and how much air is between lines.
A comfortable line is about 65 characters long. The eye easily finds the start of the next line, and the text does not break into short pieces. When a line is too short, reading turns into jumps; when it is too long, the eye gets lost on the way back.
A comfortable line is about 65 characters long. The eye easily finds the start of the next line, and the text does not break into short pieces. When a line is too short, reading turns into jumps; when it is too long, the eye gets lost on the way back.
A comfortable line is about 65 characters long. The eye easily finds the start of the next line, and the text does not break into short pieces. When a line is too short, reading turns into jumps; when it is too long, the eye gets lost on the way back.
The space between lines decides whether a paragraph reads as text or as a dense brick. Body text works at 1.5–1.6, large headings at 1.0–1.2.
The space between lines decides whether a paragraph reads as text or as a dense brick. Body text works at 1.5–1.6, large headings at 1.0–1.2.
The space between lines decides whether a paragraph reads as text or as a dense brick. Body text works at 1.5–1.6, large headings at 1.0–1.2.
By eye or by the scale
The same screen: on the left — five sizes chosen by eye, on the right — four steps of one scale.
Workshop
Solid wood furniture to your size
Our own production
We design, make and assemble in one order — without middlemen or rework.
Get an estimateWorkshop
Solid wood furniture to your size
Our own production
We design, make and assemble in one order — without middlemen or rework.
Get an estimateHow to build a scale for your project: 6 steps
-
01
Choose the base
The size of body text — usually 16–18 px for sites, 14–16 for dense interfaces.
-
02
Choose the ratio
By the character of the product: calm for services, contrasting for brands.
-
03
Count the steps
Two down, five or six up — and round to whole pixels where it matters.
-
04
Give the steps roles
Caption, body, lead, card title, section, page — each step has a job.
-
05
Set line spacing per step
The larger the size, the smaller the line-height: 1.55 for text, about 1.05 for large headings.
-
06
Make large steps fluid
clamp() for headings, fixed sizes for text and captions.
Common mistakes with type scales
-
Twenty sizes on one site
Every new block gets its own size, and the page loses its hierarchy.
-
Neighbouring sizes too close
22 and 23 px look like a mistake, not like two levels.
-
One line-height for everything
1.5 makes large headings fall apart into separate lines.
-
The desktop scale on a phone
A 61 px heading turns into a column of single words.
-
Sizes only in pixels
The site ignores people who enlarged the font in the browser.
-
Weight instead of size
Five weights on one screen create noise; the scale and two weights are enough.
Questions about type scales
What is a type scale?
A set of font sizes where each next one is the previous multiplied by the same ratio.
Which ratio should I choose?
1.2–1.25 for most sites and applications; 1.333–1.5 for brands and landing pages with large headings.
How many sizes does a site need?
Usually seven or eight steps; more means the hierarchy is no longer readable.
px, rem or em?
rem for the scale: it follows the font size set in the browser, and the steps keep their proportions.
Does the scale change on phones?
The large steps become smaller through clamp(); the body text usually stays the same.
What is the best line length?
About 45–75 characters; in CSS it is easy to set with max-width: 65ch.
Online form
A system
for your product
I build design systems on tokens: a type scale, spacing, colours and components that live both in the layout and in the code. Tell me about the project — I answer within one working day.