SuperDevTools
EN

PX to REM Converter (and REM to PX)

Base font size

Presets:

16 px is the default font size in browsers. Only change it if your stylesheet changes the size of html (for example html { font-size: 62.5% } gives a 10 px base).

Convert px ↔ rem

Convert px ↔ em

An em depends on the font size of the parent element, not on the page base.

Convert CSS in bulk

Selectors, @media conditions, comments, strings and url() are left untouched.

px → rem table, base 16 px

Click a value to copy it.

pxrem

Everything is calculated in your browser: nothing is sent. The base and options stay on this device.

Convert pixels to rem without doing the math

This px to rem converter turns a pixel size into rem, and rem back into pixels, based on the root font size of your page. It also works out em values from a parent size, converts a whole block of CSS in one go and shows a reference table from 1 to 96 px. Everything runs in your browser and nothing is sent anywhere.

How to use it

  1. Under "Base font size", keep 16 or pick a preset: 10, 14, 16, 18 or 20 px.
  2. In "Convert px ↔ rem", type in "Pixels (px)" or in "rem". The other field updates as you type and the formula appears below. "Copy" puts the value with its unit on your clipboard.
  3. For em, set the "Parent font size (px)", then type a pixel or em value.
  4. For a full stylesheet, paste it into "CSS to convert". Choose "Ignore 1px", "Ignore borders (border, outline)", "Decimal places" and "Keep px in a comment", then click "Copy CSS".
  5. In the table, click any value to copy it.

Your base and options are remembered on this device.

px vs rem vs em

A px is a fixed size. A rem equals the font size of the root html element, which is 16px unless you change it. An em equals the font size of the parent element, and it compounds: text set to 1.2em inside a box set to 1.2em ends up 1.44 times the base, or 23.04px on a 16px base.

The formula is rem = px ÷ base, and back again px = rem × base. On a 16px base, 24px is 1.5rem, 18px is 1.125rem and 1.25rem is 20px. That is the conversion you need when a design file gives you every size in pixels and your codebase uses rem.

Why rem matters for accessibility

Many people with low vision raise the default font size in their browser settings, say from 16px to 20px. A heading written as 24px stays at 24px and ignores that choice. Written as 1.5rem, it grows to 30px. Rem units respect the size the user picked, which is what WCAG text resizing guidance is about and what accessibility reviews in the US and UK look for.

When to use rem or em

  • rem for font sizes, margins and layout spacing, so the whole page scales from one value.
  • em for things that should follow the text of their own component, like the padding of a button. With a 20px parent, 30px is 1.5em.
  • px for hairline borders and shadows, hence the "Ignore borders (border, outline)" option.

Bulk conversion example

With a 16px base and borders ignored, padding: 16px 24px; border: 1px solid; font-size: 18px becomes padding: 1rem 1.5rem; border: 1px solid; font-size: 1.125rem. Selectors, @media conditions, comments, strings and url() values are left as they are.

Frequently asked questions

How many pixels is 1rem?

1rem equals the base of the page, so 16px if you have not changed the size of html. With html { font-size: 62.5% }, 1rem is 10px and 14px becomes 1.4rem.

Should I change the base if my site uses 16px?

No. Only change it when your stylesheet sets a different font size on html, otherwise every result will be off.

Why leave 1px borders in px?

A 1px line converted to 0.0625rem can render blurry or vanish on some screens. "Ignore 1px" keeps it as it is.

How many decimal places should I use?

Four is plenty: 1px is 0.0625rem on a 16px base. On a 14px base, 10px gives 0.7143rem with four decimals and 0.71rem with two, which is 9.94px, a difference nobody will see.