Type Scale for Web Design: How to Choose Font Sizes for H1 to H6

Open a few design files and you will see the same problem: headings that are almost the same size, body text at 15px in one place and 17px in another. A type scale fixes that. It gives you a short list of font sizes that grow by a fixed ratio, so everything looks like it belongs together.

What is a type scale?

A type scale is a set of font sizes where each step is the previous one multiplied by the same number. Start with a base size, like 16px, and a ratio, like 1.25. The next size up is 16 × 1.25 = 20px. The next is 25px, then 31.25px, then 39.06px, and so on.

Because the jumps are consistent, the page feels calm and organised, even to people who could never explain why.

Which ratio should you pick?

Ratio	Name	Feels like
1.067	Minor second	Very subtle, good for dense apps
1.125	Major second	Quiet and tidy
1.2	Minor third	Calm, great for dashboards
1.25	Major third	A safe choice for most websites
1.333	Perfect fourth	Bold, clear hierarchy
1.5	Perfect fifth	Dramatic, editorial
1.618	Golden ratio	Very dramatic, use sparingly

If you are unsure, start with 1.25. It gives clear headings without shouting.

From scale to headings

With a 16px base and a 1.25 ratio, you get a set like this:

• Small text: 12.8px
• Body (base): 16px
• H6: 20px
• H5: 25px
• H4: 31px
• H3: 39px
• H2: 49px
• H1: 61px

You will not use every step. Most websites need five or six sizes. Pick the ones you need and leave the rest.

Use rem, not px

Write your sizes in rem so they follow the reader's browser font setting. 20px is 1.25rem, 25px is about 1.563rem. If you need to convert, our px to rem converter does it instantly.

Make it fluid with clamp()

A heading that is perfect on a desktop can be far too big on a phone. Fluid typography solves this with the CSS clamp() function. You give it a minimum size, a maximum size and a rule for growing in between:

h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.8rem); }

The text grows smoothly as the screen gets wider and never goes below or above your limits. No media queries needed.

You can use a smaller ratio on small screens (for example 1.2) and a bigger one on large screens (for example 1.25). Our type scale generator does this for you: switch on Fluid sizes, set both ends and it writes the clamp() values.

Line height and spacing

• Body text: a line height of about 1.5 is comfortable.
• Large headings: 1.1 to 1.3. Big text with loose lines looks disconnected.
• Short lines: keep paragraphs to around 60 to 75 characters wide.

Common mistakes

• Using too many sizes. Five or six is plenty.
• Making the ratio too big for body-heavy pages, which makes headings overpower the content.
• Setting sizes in px and ignoring the user's text preferences.
• Forgetting to check the result on a real phone.

A worked example: a blog page

Take a blog with a 17px body and a 1.25 ratio. The steps you will actually use are:

Use	Size	Line height
Caption or label	0.8rem	1.4
Body	1.0625rem	1.6
H3	1.33rem	1.3
H2	1.66rem	1.25
H1	2.07rem on mobile, up to 2.6rem on desktop	1.15

Only five sizes. Everything else on the page, such as buttons, navigation and footers, can use the body size or the caption size.

Choosing the base size

The base is your body text, and every other size grows from it. Use 16px for interfaces and dense pages. Use 17 or 18px for long reading, such as articles. A bigger base gives you more room, but it also makes every heading bigger, so you may want a smaller ratio with it.

How clamp() works, step by step

clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. The preferred value is usually a mix of a fixed size and a viewport unit, like 1rem + 1vw. Because the viewport part grows as the screen gets wider, the text grows smoothly. You can test it by dragging your browser window wider and narrower.

One caution: if the preferred value uses only vw, the text will not respond to the user's own text size setting. Adding a rem part, as in the example above, keeps that working.

How to use the scale in Figma

1. Create a text style for each step: caption, body, H3, H2, H1.
2. Name them clearly, for example Heading/H2.
3. Set the line height on each style. Do not leave it on auto for headings.
4. Use only these styles in your designs. If you reach for a size outside the list, ask whether the scale needs another step.

When to break the scale

A big hero headline, a price or a large number on a dashboard can go beyond the scale. That is fine if you do it on purpose and rarely. A scale is a guide that keeps the ordinary text calm, so special moments can stand out.

Frequently asked questions

What is the best font size for body text?

16px is the standard. Go to 17 or 18px for long articles.

What is a modular scale?

It is another name for a type scale, built by repeatedly multiplying a base size by a ratio.

Do I need a type scale for a small site?

It helps even more on a small site, because you only need a few sizes and they will all fit together.

Build yours in a minute: open the type scale generator.