Type Scale

What it's for

Pick a set of font sizes that look right together. A type scale starts from a base size, usually body text, and multiplies it by the same ratio for each step up (headings) and divides for each step down (small print). This shows the sizes, a sample in each, and the CSS to use them.

For example, when you’re setting heading sizes for a website, try a few ratios here, see which looks right, and copy the CSS custom properties into your stylesheet.

How to use it

Set the Base size in pixels and choose a Ratio, or Another to type your own. Choose how many Steps above the base and below you want, the Name prefix for the CSS custom properties, and the Sample text. The base size and ratio are remembered in this browser.

The table lists each size in pixels, as CSS in rem (a base of 16 pixels to the rem), and in a sample. The CSS box has them all as custom properties, such as --step-1, with --step-n1 for the steps below the base.

Tick Fluid for sizes that grow with the screen: give the narrowest and widest screen widths, and the base size (and, if you like, a different ratio) to use on the widest. Each size becomes a CSS clamp() that grows smoothly from its size on the narrowest screen to its size on the widest.

Example

With the defaults (a base of 16 pixels and a ratio of 1.25, a major third), the sizes run from 48.83 pixels at --step-5 down to 10.24 at --step-n2, and the CSS starts:

:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;

Good to know

The rem sizes assume the browser’s default of 16 pixels to the rem; a visitor who has made their default text bigger gets bigger sizes too, which is the point of using rem. The sizes are worked out to four decimal places, and browsers round them when drawing.