Type scale generator

Font sizes picked one at a time drift apart. Choose a base size and a ratio: every step is set in real text at its real size, with a line height and CSS ready to copy.

  • Free, no signup
  • Runs in your browser
  • Fixed or fluid CSS
Ratio

8 sizes on a major third (1.25) from a 16px base: 10.24px at the smallest step to 48.83px at step 5.

Your scale

Each step at its true size. Very large steps run off the edge of the page rather than shrink, so what you see is what you will ship.

Typeface

  1. +548.83px3.0518remline height 1.16

  2. +439.06px2.4414remline height 1.2

  3. +331.25px1.9531remline height 1.26

  4. +225px1.5625remline height 1.32

  5. +120px1.25remline height 1.4

  6. Base16px1remline height 1.5

  7. −112.8px0.8remline height 1.6

  8. −210.24px0.64remline height 1.6

Copy the CSS

Custom properties named by step, so --step-0 is the base and --step-2 two steps up. Sizes are in rem against the 16px browser default.

:root {
  --step-5: 3.0518rem; /* 48.83px */
  --step-4: 2.4414rem; /* 39.06px */
  --step-3: 1.9531rem; /* 31.25px */
  --step-2: 1.5625rem; /* 25px */
  --step-1: 1.25rem; /* 20px */
  --step-0: 1rem; /* 16px */
  --step--1: 0.8rem; /* 12.8px */
  --step--2: 0.64rem; /* 10.24px */

  --leading-5: 1.16;
  --leading-4: 1.2;
  --leading-3: 1.26;
  --leading-2: 1.32;
  --leading-1: 1.4;
  --leading-0: 1.5;
  --leading--1: 1.6;
  --leading--2: 1.6;
}

What is a type scale?

A type scale is a short list of font sizes built from two numbers: a base size, usually the body text, and a ratio. Each step up multiplies by the ratio and each step down divides by it. With a 16px base and a ratio of 1.25 the steps run 12.8, 16, 20, 25, 31.25 and 39.06px.

The ratios carry the names of musical intervals because the idea came from music: a perfect fourth is 4:3, a perfect fifth 3:2. The golden ratio, 1.618, is the largest in common use. None of them is correct in itself. The test is the specimen: every level you need should look clearly different from its neighbours, and the largest should still fit the screen it is for.

How do you choose a base size and a ratio?

Start from the body text, because it is what people read most. 16px is the browser default and a safe floor for body copy on screens; 17 or 18px reads more comfortably in long articles. Then count the levels your design really has. The more levels, the smaller the ratio has to be, or the top ones grow too large to use.

Size is one way to build visual hierarchy, and scale is what makes the difference read: a heading only looks important against the text around it. Weight, color and space do the rest. For how size affects reading itself, see legibility versus readability.

Questions

What is a type scale?

A set of font sizes that all come from one base size and one ratio. Each step up multiplies the size by the ratio, and each step down divides it. Because every size is related to the others, headings, body text and captions read as one family instead of sizes picked one at a time.

Which ratio should I use?

Small ratios, from 1.125 to 1.2, suit dense interfaces and small screens, where six or seven levels have to fit in a narrow range. Larger ratios, from 1.333 to 1.618, suit editorial pages with few levels and big headlines. Many sites use a smaller ratio on phones and a larger one on desktop, which is what the fluid option does.

How many sizes does a design need?

Most interfaces use five to seven: one or two below the body size for captions and labels, the body size itself, and three or four above it for headings. If two neighbouring steps look the same in the specimen, the ratio is too small for that many levels.

Should I round the sizes to whole pixels?

You do not have to. Browsers render fractional sizes such as 20.8px without trouble. Round them if your design tool or a spacing grid needs whole numbers, and accept that each rounded step drifts slightly off the ratio.

What does the fluid clamp() option do?

It writes each size as a CSS clamp() that grows in a straight line from the small-screen scale at one viewport width to the large-screen scale at another, and holds at each end. The result is one set of custom properties that needs no media queries.

How is the line height worked out?

The gap between lines is kept at half the base size, so the unitless line height falls as the type grows: about 1.5 for a 16px body, 1.25 at 32px and 1.13 at 64px. It stays between 1.1 and 1.6. Treat it as a starting point and adjust for the typeface.

Once the sizes are set, check that the text colors pass with the color contrast checker, or get a second opinion on the whole screen from the AI design critique.