Type scale: how to choose font sizes for headings and body text

Picking font sizes one by one is how pages end up with a dozen almost-identical sizes and a hierarchy nobody can read. A type scale fixes that: you choose a starting size and a ratio, and every other size follows. PaletteDesk’s type scale generator builds a full set of heading and body sizes from two independent anchors, shows them as a ladder in rem, px and pt, and previews them on a live page in your own palette and fonts.

Open the type scale generator

What is a type scale?

A type scale is a sequence of font sizes in which each step is the previous one multiplied (or divided) by the same ratio. Instead of choosing 14, 17, 22 and 29 pixels by feel, you decide where the scale starts and how quickly it grows. The result is a hierarchy that reads as intentional: headlines, subheads, body text and captions relate to each other the way notes in a musical scale do.

• Consistent rhythm: every level sits the same distance from its neighbor, so the page feels calm instead of random.
• Fewer decisions: you set two numbers per group instead of inventing ten sizes.
• Clear hierarchy: steps are far enough apart to tell apart at a glance, which prevents near-duplicates like 16px and 17px.

How the generator builds your scale

The scale has two independent anchors, one for headings and one for body text, each with its own size and ratio:

• Headings start at h1, which is exactly the Title size, and step down: h2 is h1 divided by the ratio, h3 is h1 divided by the ratio squared, and so on down to h6.
• Body text starts at body large, which is exactly the Body size, and steps down the same way through body small, label and caption.
• Weight and line height are set per group, so headings can be tight and bold while body text stays open and regular.

Because the two anchors are separate, a large display heading can sit above modest body text without one setting dragging the other along.

Step by step

1. Open the type scale generator. The font panel at the bottom of the screen gains Size, Scale, Weight and Line height controls for both Title and Body.
2. Pick your heading and body fonts in the same panel. The scale uses exactly these fonts, and the weights on offer follow the font you choose.
3. Set the Title size and Scale. Size is the h1 size; Scale is the ratio between neighboring heading levels.
4. Set the Body size and Scale the same way. 16px is the usual body size for reading on screens.
5. Read the ladder. Switch between rem, px and pt, type your own sentence into the test field, and check the result in the Blog/Editorial layout below it. The reset button returns everything to the defaults.

Choosing a ratio

The Scale control offers eight classic ratios named after musical intervals. Smaller ratios keep sizes close together; larger ones separate them dramatically.

A good starting point is a small ratio for body text (1.125) and a larger one for headings (1.25 or 1.333) - which is close to where the generator starts.

Example: the default scale

With the defaults - Title 40px at a 1.25 ratio and Body 16px at 1.125 - the ladder looks like this:

The generator shows px rounded to whole numbers; the values above are unrounded. Heading line height defaults to 1.1 at weight 700, body to 1.6 at weight 400.

Using the scale in CSS

The rem values are calculated against the browser’s default 16px root size, so they follow the user’s font settings. Copy them into custom properties and reference them in your styles:

:root {
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.6rem;
  --text-h4: 1.28rem;
  --text-h5: 1.024rem;
  --text-h6: 0.819rem;
  --text-body: 1rem;
  --text-small: 0.889rem;
  --text-label: 0.79rem;
  --text-caption: 0.702rem;
}

h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.1; }
body { font-size: var(--text-body); font-weight: 400; line-height: 1.6; }

Prefer rem for on-screen font sizes; the pt values are mainly useful for print stylesheets.

Tips for a scale that works

• Keep body text at 16px or slightly larger for long reading; go smaller only for labels and captions.
• Use a tighter line height for large headings (around 1.1-1.2) and a looser one for body text (1.5-1.7).
• Use a smaller ratio on small screens and in dense interfaces, and a larger one on spacious editorial pages.
• Test the scale with your real headline text, not placeholder words - long titles wrap differently at large sizes.
• Check text colors too: small captions in light gray are the most common contrast failure.

Text size is only half of readability. See how contrast is checked in the contrast checker guide

Frequently asked questions

Is the type scale generator free?

Yes - it is free, with no sign-up. The Editorial layout preview and the size ladder are always available; the Blog Platform preview reacts to the scale with Pro.

What is the difference between rem, px and pt?

px is a CSS pixel. rem is relative to the root font size, 16px by default, so 1rem is 16px and 1.25rem is 20px. pt is a print unit: 1px equals 0.75pt. The ladder lets you switch between all three.

Why are the heading and body scales separate?

Headings and body text usually need different amounts of contrast between steps. Separate anchors let a large display heading sit above modest body text without one setting pulling the other along.

Which ratio should I use?

Start with 1.125 for body text and 1.25 for headings. If the hierarchy feels flat, raise the heading ratio to 1.333; if it feels loud, lower it. Denser interfaces usually want smaller ratios than editorial pages.

Can I use the sizes with Tailwind or plain CSS?

Yes. The values are ordinary font sizes: copy them into CSS custom properties, a Tailwind fontSize theme config, or any design tokens file.

Does the scale change my colors or palette?

No. The scale only controls typography. The preview uses your current palette, so you see text sizes and colors together.

Ready to build your own scale? Open the type scale generator