What is a modular type scale?

It is a set of font sizes derived by repeatedly multiplying a base size by a fixed ratio, giving harmonious heading and body sizes across a design.

Which ratio should I use?

Smaller ratios like 1.125 or 1.2 suit dense interfaces, while larger ones like 1.333 or the golden ratio (1.618) create dramatic contrast for marketing pages.

Are the sizes generated locally?

Yes — the whole scale and its CSS are computed in your browser with no network calls.

How are the rem values calculated?

Each step's pixel size is divided by 16, the conventional root font size, so a 20px step becomes 1.25rem. Using rem keeps text scalable with the user's browser settings.

How many steps does it generate?

Six steps from 0 (the base) up to 5, each one ratio larger than the last, covering body text through to large display headings.

What is the difference between major third and perfect fourth?

They are common modular ratios — major third is 1.25 and perfect fourth is 1.333. The larger the ratio, the bigger the jump between each heading level.

Can I use the output directly in my stylesheet?

Yes. The tool outputs CSS custom properties like --step-3, which you paste into :root and reference with var(--step-3) on your headings and text.

Type Scale Generator

Type scale generator

This tool builds a modular typographic scale — a harmonious set of font sizes — from a base size and a ratio, and gives you copy-ready CSS. It is for designers and front-end developers who want consistent, mathematically related heading and body sizes instead of arbitrary values.

How it works

Starting from your base size (typically 16px) and a chosen ratio, the tool raises the ratio to each step’s power and multiplies by the base. It generates six steps, from 0 (the base) up to 5, and expresses each in both pixels and rem (dividing px by 16, the conventional root size):

size at step n = base × ratio^n
rem            = px ÷ 16

Ratios are the classic modular intervals — minor second (1.067) through to the golden ratio (1.618). The output is a set of CSS custom properties you paste into :root.

Example

With a base of 16px and the major third (1.25) ratio:

Step	px	rem
0	16	1.0
1	20	1.25
2	25	1.563
3	31.25	1.953

Step 1 is 16 × 1.25 = 20px (1.25rem); step 2 is 16 × 1.25² = 25px. The generated CSS reads --step-1: 1.25rem; /* 20px */ and so on, ready to drop in.

A consistent scale keeps headings, body text and captions visually balanced — generated instantly and privately in your browser.