X Xerobit
Frontend & Design

REM, PX, EM Units Explained — CSS Length Units Comparison

CSS has absolute units (px) and relative units (rem, em, %). Here's how rem, px, and em differ, when to use each, and how rem helps build accessible, scalable typography and...

Mian Ali Khalid · · 5 min read
Use the tool
Pixel to REM Converter
Convert px to rem, em, and percent — and vice versa. Configurable root font size. Bulk conversion mode for entire stylesheets.
Open Pixel to REM Converter →

CSS offers absolute units (px) and relative units (rem, em, %). The choice affects accessibility, scalability, and maintainability. rem is relative to the root font size, em is relative to the current element’s font size, and px is a fixed device-independent pixel. Knowing when to use each prevents the common mistake of building layouts that break when users change their browser font size.

Use the PX to REM Converter to convert pixel values to rem units.

The units

px (pixels)

A CSS pixel is not a physical screen pixel — it’s a device-independent unit standardized to 1/96th of an inch at normal density.

.box {
  width: 200px;   /* Always 200px regardless of font size */
  font-size: 16px; /* Fixed 16px — won't respect user's browser font size */
}

When px is appropriate:

  • Border widths (border: 1px solid)
  • Box shadows (box-shadow: 0 2px 8px rgba(0,0,0,0.1))
  • Fixed-dimension decorative elements
  • Media query breakpoints (debated — see below)

rem (root em)

1rem = the root element’s (<html>) font size. Default browser font size is 16px, so 1rem = 16px by default.

html { font-size: 16px; }  /* Default — usually don't set this */

h1 { font-size: 2rem; }    /* 32px at default, scales with user preference */
p  { font-size: 1rem; }    /* 16px at default */
.card { padding: 1.5rem; } /* 24px at default */

Key property: If a user sets their browser font size to 20px (accessibility need), all rem-based values scale proportionally. 2rem becomes 40px instead of 32px.

em (element em)

1em = the current element’s computed font size.

.parent { font-size: 20px; }

.child {
  font-size: 0.8em;    /* 16px (0.8 × 20px parent) */
  padding: 1em;        /* 16px (1 × child's own 16px font-size) */
  margin-bottom: 0.5em; /* 8px */
}

The compounding problem:

<div style="font-size: 1.2em">  <!-- 1.2 × 16 = 19.2px -->
  <div style="font-size: 1.2em">  <!-- 1.2 × 19.2 = 23px -->
    <div style="font-size: 1.2em">  <!-- 1.2 × 23 = 27.6px -->
      Text gets progressively larger
    </div>
  </div>
</div>

Nested elements with em font sizes compound. rem doesn’t have this problem — it always refers to the root.

% (percentage)

For font sizes, % is equivalent to em. For widths, it’s relative to the parent’s width:

.parent { width: 600px; }
.child { width: 50%; }     /* 300px (50% of parent's width) */
.text  { font-size: 120%; } /* 1.2em — relative to parent's font-size */

Other units

.header { height: 100vh; }    /* vh: viewport height */
.sidebar { width: 25vw; }      /* vw: viewport width */
.element { font-size: 1.5ch; } /* ch: width of "0" character */
.container { max-width: 60ch; }/* Common for readable line length */

The rem base calculation

Default: 1rem = 16px. To convert:

px to rem:  rem = px ÷ 16
rem to px:  px = rem × 16

Examples:

16px → 1rem
24px → 1.5rem
32px → 2rem
14px → 0.875rem
12px → 0.75rem

The 62.5% trick (avoids tedious calculation):

html { font-size: 62.5%; }  /* 62.5% of 16px = 10px */

/* Now 1rem = 10px: */
h1    { font-size: 3.2rem; }  /* 32px */
p     { font-size: 1.6rem; }  /* 16px */
.card { padding: 2.4rem; }    /* 24px */

Caveat: Setting html font-size to a percentage means users who change their browser default font size still get the override behavior — it just makes mental math easier.

Accessibility: why rem matters

Users can set a larger default font size in browser settings. This is a common accessibility accommodation for users with visual impairments.

/* PROBLEMATIC: px ignores user's font size preference */
body { font-size: 16px; }  /* Fixed at 16px always */

/* BETTER: rem respects user's preference */
body { font-size: 1rem; }  /* 16px default, scales with user's choice */

If a user sets their browser font to 20px, 1rem becomes 20px. All rem-based spacing and font sizes scale proportionally — the layout stays intact while meeting the user’s accessibility needs.

This is why WCAG (Web Content Accessibility Guidelines) recommends using relative units for font sizes.

Practical guidelines

/* Typography: always use rem */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p  { font-size: 1rem; }
small { font-size: 0.875rem; }

/* Spacing: rem (scales with font size) */
section { margin-bottom: 2rem; }
.card   { padding: 1.5rem; }

/* Borders: px (no reason to scale) */
.border { border: 1px solid #ccc; }
.shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Component-internal spacing: em (scales with component font size) */
.button {
  font-size: 1rem;
  padding: 0.5em 1em;  /* Proportional to button text size */
}

/* Large button variant: */
.button-lg {
  font-size: 1.25rem;
  padding: 0.5em 1em;  /* Same em values, automatically larger px */
}

/* Media queries: can use either */
@media (min-width: 48rem) { /* 768px equivalent */ }
@media (min-width: 768px) { /* More obvious breakpoint */ }

Converting an existing px-based codebase

// Script to find all px values in CSS and convert to rem:
const css = `
  font-size: 16px;
  margin: 24px;
  padding: 8px 16px;
  border: 1px solid #ccc;  /* Should stay as px */
  border-radius: 4px;       /* Should stay as px */
`;

const BASE = 16;
const converted = css.replace(/(\d+(?:\.\d+)?)px/g, (match, val) => {
  const px = parseFloat(val);
  if (px < 4) return match;  // Keep small px values (borders, etc.)
  return `${(px / BASE).toFixed(4).replace(/\.?0+$/, '')}rem`;
});

console.log(converted);

Related posts

Related tool

Pixel to REM Converter

Convert px to rem, em, and percent — and vice versa. Configurable root font size. Bulk conversion mode for entire stylesheets.

Written by Mian Ali Khalid. Part of the Frontend & Design pillar.