The short answer
A type scale is a short fixed list of font sizes (something like 14, 16, 20, 25, 31, 39, 49) where each step is the one before it multiplied by the same number. You pick from that list every time you set text instead of typing whatever fits. Sites look amateur when they have fifteen sizes chosen in the moment, because nothing on the page looks deliberately related to anything else. Start body text at 16 or 18 pixels, multiply by about 1.25 for each step up, keep six or seven steps, and store them as variables.
We wrote about spacing scales because random gaps are the fastest way to make a site feel wrong. Font sizes are the same problem wearing different clothes, and they are more visible, because text is most of what a visitor actually looks at.
The good news is identical too. This is not taste. It is a short list you decide once.
Why do random font sizes look amateur?
Because size is how a page tells you what matters. When every size is deliberate, a visitor reads the hierarchy without noticing they are doing it: this is the headline, this is a section, this is the body, this is a caption. Four levels, instantly legible.
Now picture the same page where the headline is 41 pixels because that was what fit the space, the section headings are 27 and 29 because they were set on different days, and there is a 19 somewhere that nobody remembers deciding. Nothing is wrong enough to point at. The page just reads as slightly unresolved, the same way a room with almost matching chairs does.
That is the whole effect. Visitors cannot name it, they only feel that the site is a bit homemade, and no amount of choosing a nicer font fixes it.
What is a type scale, exactly?
A starting size and a multiplier. You choose your body text size, pick a ratio, and multiply repeatedly to get the sizes above it. Divide to get the ones below.
With 16 pixels and a ratio of 1.25, the steps land near 13, 16, 20, 25, 31, 39 and 49. Every size is related to every other by the same arithmetic, and that relationship is what the eye reads as intentional. You round them to whole numbers, because nothing is served by 24.41.
You do not have to calculate this by hand. The point is not the maths, it is that afterward you have a list of seven numbers and you never type a font size that is not on it.
Which ratio should you pick?
For most sites, between 1.2 and 1.25. This is the range that gives you distinguishable steps without the jump from body text to heading being a shout.
1.2 is quiet. Good for content-heavy sites, blogs, documentation, anything where the reader spends time. Headings lead without dominating.
1.25 is the safe default. Clear hierarchy, still comfortable on a page with several levels of heading. If you have no strong feeling, use this.
1.33 and above is dramatic and dangerous. It looks excellent on a landing page with a huge headline, three sections and almost no body copy. On a page with real content it produces a fourth step so large that you stop using it, which quietly collapses your scale to fewer steps than you designed.
The failure mode is always the same: a ratio chosen for the hero, then applied to a page that turned out to have paragraphs.
Good to know
Pick your body size first, then build outward. It is tempting to choose a headline size you like and work down, but body text is the one size a visitor spends real time inside, and it is the one that has the least room to be wrong. Sixteen to eighteen pixels, then derive everything else from it.
How many sizes do you actually need?
Six or seven, and you will use four of them constantly.
In practice that is: small print, body, large body or lead paragraph, then three or four heading levels. Most pages need nothing else. If you find yourself wanting an eighth, the honest question is usually whether that element needs a different size at all, or whether it needs different weight, color or spacing, which are three other ways to create hierarchy that people forget they have.
Weight in particular does a lot of work that size gets asked to do. A heading in the same size as body text but heavier still reads as a heading.
How do you set this up in Bricks?
The same way as spacing: as variables, once, so that the list exists in the tool rather than in your memory. Name them by role rather than by size, so that text-body and text-h2 survive you changing what they equal, while a variable called text-25 becomes a lie the first time you adjust it.
Then set the base sizes on your theme styles so that headings and body text inherit the scale without you touching each element. That is the same principle covered in design tokens, and if you already set up a spacing scale it is the identical exercise with different numbers.
If you use a CSS framework, most of them ship a type scale already and you should use theirs rather than inventing a second one alongside it. Which framework, and whether you need one at all, is covered in our framework comparison.
Should sizes change on smaller screens?
Headings yes, body text almost never.
A 49 pixel headline is right on a laptop and wrong on a phone, where it will take four lines and break in an ugly place. So the top two or three steps come down on small screens. That much is unavoidable.
Body text is the opposite. Sixteen to eighteen pixels is correct on every screen, and shrinking it on mobile is the single most common typography mistake on small-business sites. The phone is where reading is hardest and where most of your visitors are, so it is the worst possible place to save space by making words smaller.
The tidy way to handle the headings is to let the size respond smoothly rather than setting a separate number per breakpoint, which also means one less thing to keep in sync.
Bottom line
Set body text at 16 or 18 pixels. Multiply by 1.25 for each step up, divide for the one below. Round the results, keep six or seven, store them as variables named by role, and never type a font size that is not on the list.
That is an afternoon, and it removes a decision you were making dozens of times per project and getting slightly wrong each time. Pair it with a spacing scale and you have fixed the two things that most reliably separate a site that looks considered from one that does not, without changing a single color or font.
FAQ
Questions about this topic
What is a type scale?
A short fixed list of font sizes you choose from every time you set text, instead of typing a new number. Each step is the one before it multiplied by the same amount, which is why the sizes look related rather than arbitrary. Most sites need six or seven steps in total, covering everything from small print to the largest heading.
How many font sizes should a website have?
Six or seven, and one family unless you have a reason for two. Sites that feel amateur usually have fifteen or twenty sizes, because each one was picked in the moment to fit the space it was in. The number of sizes is a better predictor of how professional a site looks than the choice of font.
What ratio should I use for a type scale?
Between 1.2 and 1.25 for most sites. That is tight enough that body text and small headings stay distinguishable without shouting, and it gives you usable steps rather than jumping from readable to enormous. Larger ratios such as 1.5 suit landing pages with very few text levels and become unusable on a page with real content.
What size should body text be?
Start at 16 to 18 pixels and build the scale outward from there. Sixteen is the browser default for a reason and anything under it reads as small on a phone. Set the body size first and derive the rest, rather than picking a headline size you like and working down to whatever body text is left.
Should font sizes change on mobile?
Headings yes, body text mostly no. A heading built for a wide screen is too large on a phone and will break awkwardly, while body text at 16 to 18 pixels is already correct on both. The usual mistake is shrinking body text on mobile, which is the one place it can least afford to get smaller.