Type Scale Calculator

How to use the type scale calculator

1. Fill in the fields — they start with a worked example.
2. Read the answer, and the arithmetic shown beneath it.
3. Copy the results, or adjust the inputs to compare scenarios.

About this tool

Picking heading sizes one at a time produces a set that nearly works: two headings almost the same size, a jump that looks arbitrary, and no way to justify any of it. A modular scale sets one base size and one ratio and derives everything else by repeated multiplication, which is why the result reads as deliberate.

The ratio is the whole decision. 1.2 gives a gentle progression that suits dense interfaces where several levels must coexist on one screen; 1.333 gives editorial contrast where a page has a headline and body text and little in between; 1.618 is dramatic and runs out of usable sizes quickly. Larger ratios look better in a specimen and worse in a real interface, because the third step up is already enormous.

Every size is given in rem as well as pixels, and rem is the one to use. A rem is relative to the root font size, so a user who has raised their browser's default — which is the accessibility setting people actually change — scales the whole interface with it. A layout specified in pixels ignores that entirely.

Sixteen pixels is the browser default for body text and the sensible floor, so anything below it is flagged. Small text is not a style choice for the people who cannot read it, and the sizes below the base in a scale are for captions and labels rather than for prose.

Common uses

• Choosing heading sizes for a design system.
• Converting an existing pixel scale to rem.
• Checking whether a set of sizes has a consistent ratio.

Frequently asked questions

What is a modular type scale?

A set of sizes derived by multiplying a base size by a fixed ratio repeatedly, so each step relates to the last in the same way rather than being chosen individually.

Should I use px or rem for font size?

Rem. It is relative to the browser's root size, so text scales when a reader raises their default — which is the accessibility setting people genuinely use. Pixel sizes ignore that.

What ratio should I choose?

Around 1.2 for dense interfaces where many levels share a screen, and 1.25 to 1.333 for editorial pages. Larger ratios look impressive in isolation and become unusable by the third step.