Home / CSS tools / REM calculator

REM Calculator

Convert rem and px both ways, then generate a spacing scale or a type scale in rem, ready to paste as CSS variables.

Convert rem and px

Spacing scale

Type scale

More than a converter

The first panel converts in both directions: edit rem or px and the other updates. The next two panels go further and build whole scales in rem, so you can turn a design system into CSS variables in one step.

Spacing scale

Spacing systems usually follow a grid, such as 4px or 8px. Enter the grid size and how many steps you want, and you get a table with each step in px and rem plus CSS custom properties. On a 4px grid with a 16px root, step 1 is 0.25rem, step 2 is 0.5rem, and step 4 is 1rem.

Type scale

A modular scale multiplies the size by a fixed ratio at every step. Choose a base size and a ratio, such as 1.25 (major third) or 1.5 (perfect fifth), and the calculator lists sizes from two steps below the base to six above. With a 16px base and a ratio of 1.25, the steps are 16, 20, 25, 31.25 and 39.0625px, or 1, 1.25, 1.5625, 1.9531 and 2.4414rem.

Using the output

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
}
.card { padding: var(--space-4); }

For one-off conversions, use the rem to px or px to rem converter. For sizes that grow with the screen, the clamp calculator builds fluid values. See rem vs em to decide which unit fits each part of your design.

Frequently asked questions

What is a modular scale?

A set of sizes where each step is the previous one multiplied by a fixed ratio, which gives a consistent visual rhythm.

Which ratio should I choose?

Smaller ratios such as 1.125 or 1.2 suit dense interfaces. Larger ones such as 1.5 give strong contrast between headings and body text.

Why use a spacing scale?

A fixed set of spacing values keeps layouts consistent and makes design and code easier to match.

Can I change the root size?

Yes. The root size box applies to every panel on the page.