How to Choose a Type Scale

Pick a base size (usually 16px), choose a ratio between about 1.2 and 1.333 for most websites, then multiply the base by that ratio to get each larger size and divide to get smaller ones. Use a smaller ratio for dense interfaces and a bigger one for editorial or marketing pages.

By Sumair Roudani · Published October 27, 2026

A type scale is a short, fixed list of font sizes that every piece of text on a site uses. Instead of picking 15px here and 22px there, you choose sizes from the scale. The result looks more deliberate, is easier to maintain, and gives clear visual hierarchy between body text, subheadings and headings.

What is a modular scale?

The most popular way to build a type scale is a modular scale: every size is the previous size multiplied by the same ratio. Because each step grows by the same proportion, the sizes feel related to each other, the way notes in a musical scale do. That is where the ratio names come from.

size = base × ratio^step

Step 0 is your base (body text). Step 1 is base × ratio, step 2 is base × ratio × ratio, and so on. Negative steps go the other way: step −1 is base ÷ ratio.

Common type scale ratios

How to pick a ratio for your context

Count your heading levels

The more levels you need, the smaller the ratio has to be. With a 1.5 ratio and a 16px base, step 5 is already about 121px. If your content uses h1 through h4 plus a lead paragraph and small print, you need six or seven steps, and a ratio around 1.2 to 1.25 keeps the top size reasonable.

Consider the screen

Large ratios look great on a wide desktop and cramped on a phone, where a 60px heading may break onto four lines. Many teams use a smaller ratio on mobile and a larger one on desktop. See the fluid scale section below.

Match the tone

Data-heavy software benefits from a quiet scale where headings don't shout. A magazine or a product launch page can afford bigger jumps. When in doubt, start at 1.25, set some real content, and adjust. Your eyes are a better judge than any formula.

Reference table: 16px base at 1.25 and 1.333

These values are calculated exactly and shown to two decimal places. The rem column assumes the browser default root size of 16px.

Notice how quickly the two scales diverge. At step 3, the major third gives about 31px while the perfect fourth gives about 38px. By step 6 the gap is roughly 61px versus 90px.

Worked example: building a scale

Suppose you are designing a blog with body text at 16px and you have chosen the major third (1.25).

1. Step 1 (lead text, h4): 16 × 1.25 = 20px.
2. Step 2 (h3): 20 × 1.25 = 25px.
3. Step 3 (h2): 25 × 1.25 = 31.25px.
4. Step 4 (h1): 31.25 × 1.25 = 39.0625px.
5. Step −1 (captions): 16 ÷ 1.25 = 12.8px.

Convert each to rem by dividing by 16 (the px to rem converter does this for any base), then store them as custom properties so the whole site draws from one source:

:root {
  --step--1: 0.8rem;     /* 12.8px  small print */
  --step-0:  1rem;       /* 16px    body */
  --step-1:  1.25rem;    /* 20px    lead / h4 */
  --step-2:  1.5625rem;  /* 25px    h3 */
  --step-3:  1.9531rem;  /* 31.25px h2 */
  --step-4:  2.4414rem;  /* 39.06px h1 */
}

Rounding: exact or tidy?

A modular scale rarely lands on whole numbers. You have three reasonable options:

• Keep the exact values. Browsers handle fractional sizes fine, and text rendering smooths them out.
• Round to whole pixels. 31.25px becomes 31px and 39.06px becomes 39px. Easier to talk about in design reviews.
• Round to a grid. Some teams snap sizes to multiples of 2 or 4 (32px, 40px) to match a spacing system.

Whichever you choose, round the final result for each step rather than rounding as you go, or errors compound. A pixel or two of difference is invisible. A scale that drifts because each step was rounded before the next multiplication is not.

Also remember that font size is only half the picture. Line height usually needs to tighten as size grows: body text often sits around 1.5, while large headings commonly look better between about 1.1 and 1.25.

Using the golden ratio

The golden ratio (about 1.618) is popular because of its long history in art and architecture, but as a type scale it grows fast: 16, 25.9, 41.9, 67.8px. It works when you have only two or three levels, like a poster or a hero section. For layouts, it is often more useful for proportions such as content and sidebar widths. The golden ratio calculator splits any length or size for you.

Fluid type scales

A fixed scale gives every screen the same sizes. A fluid scale defines a minimum size at a small viewport and a maximum at a large one, and lets each step grow smoothly in between using CSS clamp().

A common recipe is to run a smaller ratio at the minimum width and a larger ratio at the maximum. For example, h1 might be 28px on a 360px phone and 40px on a 1280px desktop:

h1 {
  /* 28px at a 360px viewport, 40px at 1280px and wider */
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
}

Working out the middle value by hand is tedious, so use the CSS clamp() generator and repeat for each step. Keep the rem part in the preferred value so text still responds to the user's browser font setting, which matters for the WCAG resize text requirement. Our fluid typography guide walks through the full method.

Common mistakes to avoid

• Too many sizes. A scale with twelve steps is not a scale. Most sites need five to seven sizes in total, and extra steps tend to look like accidents rather than hierarchy.
• Relying on size alone. Weight, letter spacing, color and space above a heading all signal importance. A modest ratio combined with bold weights often reads more clearly than a large ratio with uniform weight.
• Body text that is too small. Shrinking the base to make headings fit usually hurts readability. Lower the ratio instead.
• Mixing ad-hoc sizes with the scale. One-off values creep in over time. If a design keeps needing a size that isn't on the scale, revisit the ratio rather than patching around it.

A quick checklist

• Base size of at least 16px for body text on most sites.
• Ratio chosen by number of levels and context, not by what looked good in someone else's portfolio.
• Sizes defined in rem and stored as tokens.
• Line heights adjusted per step.
• Tested with real headlines, including long ones, on a narrow screen.