PX to REM Chart

Common px to rem values

Almost every site converts the same dozen sizes again and again, so here they are in one place, using the browser default root of 16px. 12px is 0.75rem, 14px is 0.875rem, 16px is 1rem, 18px is 1.125rem, 20px is 1.25rem, 24px is 1.5rem, 32px is 2rem, 40px is 2.5rem, 48px is 3rem and 64px is 4rem. The full chart above runs from 1px to 200px, and the lookup box handles any other number, including decimals such as 13.5px.

If you need a one-off conversion with em, pt, percent or viewport units, or want to convert a whole stylesheet at once, use the PX to REM converter. If you are going the other direction, the REM to PX converter shows what a rem value turns into at different reader text sizes.

How the chart is calculated

The rule is a single division: rem = px / root font size. The root font size is the computed font size of the html element. Browsers ship with 16px as the default, which is why 16px equals 1rem and why every row in this chart is the pixel value divided by 16. The third column converts pixels to points for people moving between design tools and CSS, using 1pt = 1.3333px, so 16px is 12pt.

Change the root size at the top and every row recalculates. The page address updates too, so a chart for an 18px or 10px root can be bookmarked or shared with a teammate.

Why developers use rem instead of px

A rem value follows the reader's own text size preference, and a px value does not. Someone who raised their browser default from 16px to 20px because small type is tiring to read gets 1rem at 20px, so your 1.125rem paragraph becomes 22.5px. A paragraph set to 18px stays 18px and the preference is ignored. WCAG success criterion 1.4.4 asks that text can be resized up to 200 percent without losing content or function, and sizing type in rem is the simplest way to stay on the right side of it.

That does not mean everything should be rem. Hairline borders, small shadows and exact image sizes are usually better left in pixels, because a 1px line that grows to 1.25px at larger text sizes looks blurry rather than helpful.

A spacing and type scale built from the chart

A tidy scale picks values from the chart in steps that feel even. Here is a typical set based on a 16px root, ready to drop into a stylesheet:

:root {
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem;   /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem;  /* 20px */
  --text-2xl: 1.5rem;  /* 24px */
}

The "Copy as CSS variables" button builds a similar list from every multiple of 4 up to 128px, at whatever root size you have set.

What if your root is not 16px?

Some themes and frameworks set html { font-size: 62.5% } so that 1rem equals 10px and the arithmetic is easy: 14px becomes 1.4rem and 24px becomes 2.4rem. Others use a 14px or 18px root. Check the computed font size of the html element in your browser DevTools, type it into the root size box and the whole chart follows. Do not mix charts: a value copied from a 16px chart into a stylesheet with a 10px root will render at 62.5 percent of the size you wanted.

Quick mental math

• Multiples of 16 are whole numbers: 32px is 2rem, 48px is 3rem, 64px is 4rem.
• Multiples of 8 end in .5: 8px is 0.5rem, 24px is 1.5rem, 40px is 2.5rem.
• Multiples of 4 end in .25 or .75: 4px is 0.25rem, 12px is 0.75rem, 20px is 1.25rem.
• Everything else is a decimal. 15px is 0.9375rem, so many teams round to 0.9375rem or use the next step on the scale.

Related reading: our fluid type scale generator combines rem and viewport units in clamp() so headings grow smoothly between phone and desktop sizes, and the website launch checklist includes the accessibility checks worth running before launch.

Frequently asked questions