Open menu

px to rem Converter

Convert pixel values to rem and em, or rem back to pixels, using your own root and parent font sizes. Paste a list of values to get a conversion table, or paste a whole stylesheet and convert every px length to rem in one go. The converter can keep 1px borders as they are, turns media query breakpoints into em, and exports CSS custom properties, CSV or a small SCSS rem() function.

Preset gallery
pxremem (parent 16px)
40.250.25
80.50.5
120.750.75
140.8750.875
1611
181.1251.125
201.251.25
241.51.5
3222
402.52.5
4833
6444

Accessibility checks

  • Pass Browsers default to a 16px root size; rem values respect each visitor's own setting.
  • Pass Sizes in rem scale with the visitor's browser text size, which helps people who need larger text.

Export code

:root {
  --size-4: 0.25rem; /* 4px */
  --size-8: 0.5rem; /* 8px */
  --size-12: 0.75rem; /* 12px */
  --size-14: 0.875rem; /* 14px */
  --size-16: 1rem; /* 16px */
  --size-18: 1.125rem; /* 18px */
  --size-20: 1.25rem; /* 20px */
  --size-24: 1.5rem; /* 24px */
  --size-32: 2rem; /* 32px */
  --size-40: 2.5rem; /* 40px */
  --size-48: 3rem; /* 48px */
  --size-64: 4rem; /* 64px */
}
Favourites on this device (0)

No favourites yet.

Convert
Mode
Settings

How to use the px to rem converter

  1. Choose a mode: px → rem, rem → px or Whole stylesheet.
  2. Enter values separated by spaces or commas, or paste your CSS.
  3. Set the root font size (16px in every browser by default) and, for em, the parent’s font size.
  4. Choose the decimal places, and whether to keep 1px borders in pixels.
  5. Export the table as CSS custom properties or CSV, the converted stylesheet, or an SCSS rem() helper.

The formula

rem = px ÷ root font size
em  = px ÷ parent font size

With the default 16px root: 24px = 1.5rem, 14px = 0.875rem, 40px = 2.5rem.

Worked examples

Example 1: a spacing scale

Load Spacing scale to convert 2–128px into rem. Paste the CSS variables into your :root and use them everywhere: padding: var(--size-24).

Example 2: converting a legacy component

Load Card CSS. Padding, margins, font sizes and radius become rem, while the 1px border stays crisp in pixels. The box-shadow offsets convert too, which keeps shadows proportional when text is enlarged.

Example 3: breakpoints

Load Breakpoints: 768px becomes 48em and 1024px becomes 64em. In stylesheet mode, breakpoints inside @media are converted to em automatically.

When to keep pixels

  • Hairline borders (1px) should stay sharp.
  • Shadows and outlines can go either way; rem keeps them proportional.
  • Images and icons with fixed artwork sizes often stay in px.

Common mistakes

  • Mixing em in nested components. Nested em values multiply; use rem unless you want that.
  • Converting line-height values. Unitless line heights (1.5) are best left unitless.
  • Hard-coding the root in px. It overrides the visitor’s setting; use a percentage if you must change it.

Testing your converted CSS

After converting, change your browser’s default text size to large in its settings and reload the page. Text and spacing should grow together without overlapping or clipping. Also zoom to 200% and check that nothing needs horizontal scrolling on a normal-width window.

Frequently asked questions

What's the difference between rem and em?

rem is relative to the root element's font size (usually 16px), so 1rem is the same everywhere on the page. em is relative to the current element's font size, so it compounds when elements are nested. Use rem for most sizes and em for things that should scale with their own text, such as padding inside a button.

Why use rem instead of px?

Browsers let people choose a larger default text size. Sizes in rem follow that setting, while px sizes ignore it. Using rem for font sizes and spacing makes your layout respect people who need bigger text.

Should I set html { font-size: 62.5% }?

It makes 1rem equal 10px, which simplifies math, but you then have to restore body text size and it can surprise other developers. If you do it, use a percentage (not a pixel value) so user settings still apply. This converter handles any root size either way.

Why are media queries converted to em?

In media queries, rem and em are both based on the browser's default font size, not your root rule. em breakpoints behave most consistently across browsers when people zoom text.

What base font size should I use?

Use 16px, the browser default, unless you know your root font size is different. The converter lets you change the base if your project sets another value.

Sources