PX to REM Conversion — Formula, Table, and CSS Custom Properties

Convert pixel values to rem using the formula rem = px / base-font-size. Includes a quick reference table for common values, the 62.5% root font-size trick, and how to use CSS...

Mian Ali Khalid · 2026-05-11 · 4 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 →

The rem unit is relative to the root (<html>) font size. The default browser root font size is 16px. Converting px to rem: divide by the root font size.

Use the PX to REM Converter to convert values instantly.

The formula

rem = px ÷ root-font-size

Default root font size = 16px:
16px  ÷ 16 = 1rem
24px  ÷ 16 = 1.5rem
32px  ÷ 16 = 2rem
14px  ÷ 16 = 0.875rem
12px  ÷ 16 = 0.75rem

Common px to rem conversion table (base 16px)

px	rem
8px	0.5rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
28px	1.75rem
32px	2rem
40px	2.5rem
48px	3rem
64px	4rem
80px	5rem
96px	6rem

The 62.5% trick

Set root font size to 62.5% so 1rem = 10px — easier mental math:

html {
  font-size: 62.5%;  /* 10px = 1rem */
}

body {
  font-size: 1.6rem; /* Reset to 16px for body */
}

/* Now rem values are intuitive: */
h1 { font-size: 3.2rem; }   /* 32px */
p  { font-size: 1.6rem; }   /* 16px */
small { font-size: 1.2rem; } /* 12px */

With 62.5%:

px	rem
10px	1rem
12px	1.2rem
14px	1.4rem
16px	1.6rem
20px	2rem
24px	2.4rem
32px	3.2rem

Note: This approach still respects user browser font size preferences because 62.5% is relative to the user’s base size.

CSS custom property approach

:root {
  --base: 16;  /* Base font size in px (number only) */
  
  /* Define common sizes as rem: */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  
  --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 */
  --space-16:  4rem;       /* 64px */
}

h1 { font-size: var(--text-4xl); }
p  { font-size: var(--text-base); line-height: 1.6; }
section { padding: var(--space-8); }

SCSS function for conversion

$root-font-size: 16;

@function rem($px) {
  @return #{$px / $root-font-size}rem;
}

// Usage:
h1 { font-size: rem(32); }  // 2rem
p  { font-size: rem(16); }  // 1rem
.card { padding: rem(24) rem(32); }  // 1.5rem 2rem

// Or as mixin:
@mixin font-size($px) {
  font-size: #{$px / $root-font-size}rem;
}

CSS `calc()` for dynamic conversion

/* If you know the base and want to compute: */
/* Note: CSS can't do rem division natively without preprocessors */
/* But calc() works for combining values: */

.component {
  /* 24px + 8px = 2rem: */
  padding: calc(1.5rem + 0.5rem);
  
  /* Mix units: */
  margin: calc(2rem - 4px);
}

Accessibility: why rem beats px for fonts

/* User sets browser font to 20px (accessibility need) */

/* px ignores user preference: */
h1 { font-size: 32px; }  /* Still 32px — user preference ignored */

/* rem respects it: */
h1 { font-size: 2rem; }  /* 40px — scales with user's 20px base */

This is why WCAG recommends using relative units for font sizes.

PX to REM Converter — convert px to rem online
REM-Based Typography — type scale with rem
CSS Units Guide — px, em, rem, vw comparison

Fluid Typography with CSS clamp() — Scale Fonts Without Media Queries — CSS clamp() creates fluid typography that scales smoothly between minimum and ma…
CSS Units Guide — px, em, rem, vw, vh, and When to Use Each — CSS has absolute units (px), relative to font-size (em, rem), viewport units (vw…
CSS Design Tokens — Define Spacing, Colors, and Typography with Custom Properties — CSS design tokens store reusable values as custom properties (CSS variables). Le…
REM-Based Typography — Scalable Font Sizes with rem Units — Using rem for font sizes creates accessible, scalable typography. Text inherits …

Related tool