Modular Type Scale Calculator

Typography looks coherent when sizes relate to each other. A modular scale makes that explicit: pick a base size and one ratio, and every other size is the base multiplied or divided by the ratio again and again. It is the same idea as musical intervals, where each note is a fixed multiple of the one before it. This calculator turns a base and a ratio into a table of sizes with a preview, and writes the CSS custom properties to use them.

How the numbers are made

Step 0 is the base size. Step 1 is the base times the ratio, step 2 is the base times the ratio squared, and so on. Negative steps divide: step −1 is the base divided by the ratio. With a base of 16 pixels and a ratio of 1.25, called the major third, step 2 is 16 × 1.25 × 1.25 = 25 pixels and step −2 is 16 ÷ 1.25 ÷ 1.25 = 10.24 pixels. There are no jumps to tune by eye, so sizes always keep the same visual relationship.

A worked example

Press Sample for base 16, ratio 1.25, two steps down and six up. The table lists step 6 at 61.04 pixels (3.815rem), step 5 at 48.83 (3.052rem), step 4 at 39.06 (2.441rem), step 3 at 31.25 (1.953rem), step 2 at 25 (1.563rem), step 1 at 20 (1.25rem), step 0 at 16 (1rem), step −1 at 12.8 (0.8rem) and step −2 at 10.24 (0.64rem). The CSS block begins :root { --step-minus-2: 0.64rem; --step-minus-1: 0.8rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; … and ends with --step-6: 3.815rem;. Each row can show a sample line at that size.

Choosing a ratio

Small ratios, 1.067 to 1.2, give subtle differences that suit dense applications and tables. Mid ratios, 1.25 and 1.333, are the usual choice for websites with clear headings. Large ratios, from the augmented fourth 1.414 up to the golden ratio 1.618, make dramatic headlines and need only a few steps. With the perfect fifth, 1.5, a base of 16 gives 24, 36, 54 and 81 pixels on the way up and 10.67 on the way down. The golden ratio gives 25.89, 41.89 and 67.77 pixels above 16.

Using the variables

Define the variables once and use them everywhere, for example h1 { font-size: var(--step-5); } and small { font-size: var(--step-minus-1); }. If you choose pixels as the unit the page writes px values instead, which ignore the reader’s font size preference, so rem is the better default. The root font size field defines how rem converts: leave it at 16 unless your site sets the root differently.

Making it responsive

A static scale gets too large on phones. The usual fix is to run two scales, a smaller ratio for narrow screens and a larger one for wide screens, and to blend between them with clamp(). Calculate the sizes of the small and large scales here, then feed each pair into the clamp calculator. Alternatively, limit the number of steps above the base to what the layout needs.

Edge cases

Rounding makes tiny differences: step 2 is exactly 25 pixels, but rem shows 1.563 (1.5625). The custom ratio field accepts values from 1.01 to 3. A scale is only a menu; you may still choose a nearby size by hand for an optical reason, such as a heading that wraps badly at the computed value. Check line heights separately, since larger text needs less relative line spacing.

Limits

The tool does not choose fonts, weights or colours, and it assumes a single scale. It does not set responsive breakpoints. Everything runs in your browser.

Related tools

• CSS Clamp Calculator makes a size fluid between two screen widths.
• Line Height Calculator sets spacing for each step.
• Golden Ratio Calculator explains the 1.618 ratio.
• CSS Unit Converter checks px, rem and em conversions.