Skip to content
Toolspire

CSS Tools

Modular Type Scale

Modular Type Scale is part of Toolspire and is ready as soon as this page loads. Step 0 is the base. A negative step divides. 1.25 is a major third in type-scale jargon. The page does not pick a ratio for you.

Runs in this tabFreeNo account

On this page

What you can do here

The exponent is the step

Two steps is the ratio squared, not the ratio times two.

Negative steps go down

Step −1 of 16 at 1.25 is 12.8.

You name the ratio

1.25 is the sample major third. 1.5 is a perfect fifth. Neither is required.

The sequence

How to use the Modular Type Scale

  1. 1

    Set the body size as the base

    16 is the usual root.

  2. 2

    Check 25

    Step 2 at 1.25.

  3. 3

    Use step 0 to confirm the base

    The result should be 16, not 16 times the ratio.

Worth knowing

  • Modular Type Scale on Toolspire: size = base × ratio^step.
  • 16 × 1.25² = 25.
  • Step 0 returns the base. Step 1 is 16 × 1.25 = 20.
  • A ratio of 1 never moves. Every step is the base.

Each step multiplies once more

A modular scale picks sizes by multiplying a base by the same ratio again and again. From 16, one major-third step is 20, and the next is 25. That is 16 × 1.25 × 1.25, which is the ratio to the power of the step. Step zero is the size you typed. A heading and a caption are just different steps, not a new formula.

FAQ

Questions about Modular Type Scale

Where does Modular Type Scale run?

Modular Type Scale runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What is step 2 of 16 px at ratio 1.25?

25 px.

What is step 0?

The base. Here, 16.

What is step 1?

20 px. One multiplication by 1.25.

What ratio should I use?

The page will not choose. 1.25 is a major third. 1.333 is a perfect fourth. Type the one your scale uses.

Keep going

Related tools

Rem to Px ConverterNewRem to Px Converter on Toolspire. Multiply a rem value by the root font size. 1.5 rem at a 16 px root is 24 px. The px-to-rem page divides.CSS ToolsCSS Clamp CalculatorNewBuild a CSS clamp() for a size that scales between two viewports, with a minimum and a maximum in pixels. The maths stays on your device.CSS ToolsPX to REM ConverterNewPX to REM Converter on Toolspire. Convert pixels to rem and rem back to pixels using your root font size. No account is required.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature