How do I convert PX to REM?

Divide the pixel value by the base font size. With the default 16px base: 24px ÷ 16 = 1.5rem. Enter the PX value in the input field and the REM equivalent appears instantly.

Why use REM instead of PX?

REM values scale when users change their browser's default font size in accessibility settings. PX values stay fixed regardless of user preferences. For accessible, user-friendly designs, REM is preferred for typography and spacing.

What is the difference between REM and EM?

REM (root em) is always relative to the root element's font size. EM is relative to the nearest parent element's font size and compounds with nesting. REM is more predictable and doesn't have the cascading multiplication problem that EM has.

How do I convert multiple PX values at once?

Switch to Bulk mode and enter your values one per line or comma-separated. The tool converts all of them simultaneously and shows a results table you can copy.

PX to REM Converter — Convert CSS Units Online Free

PX	REM	CSS value
4px	0.25rem	0.25rem
8px	0.5rem	0.5rem
10px	0.625rem	0.625rem
12px	0.75rem	0.75rem
14px	0.875rem	0.875rem
16px	1rem	1rem
18px	1.125rem	1.125rem
20px	1.25rem	1.25rem
24px	1.5rem	1.5rem
28px	1.75rem	1.75rem
32px	2rem	2rem
36px	2.25rem	2.25rem
40px	2.5rem	2.5rem
48px	3rem	3rem
56px	3.5rem	3.5rem
64px	4rem	4rem
72px	4.5rem	4.5rem
80px	5rem	5rem
96px	6rem	6rem
112px	7rem	7rem
128px	8rem	8rem
160px	10rem	10rem
192px	12rem	12rem
256px	16rem	16rem
320px	20rem	20rem
400px	25rem	25rem
512px	32rem	32rem

Your designer’s Figma spec says font-size: 14px, padding: 24px, margin-bottom: 32px. Your CSS needs rem values for accessibility (so the layout scales when users change their browser font size). With a 16px base, 14px = 0.875rem, 24px = 1.5rem, 32px = 2rem. You can do the division in your head for simple numbers, but 13px and 22px need a calculator.

Why This Converter (Not the Responsive Font Size Calculator)

PureDevTools has a Responsive Font Size Calculator for generating CSS clamp() formulas with fluid scaling. This tool is a simple px↔rem converter — enter pixel values, get rem equivalents (or vice versa), with a configurable base font size, bulk conversion mode, and a quick-reference table for common values. Use this for unit conversion; use the calculator for fluid typography.

What Is the Difference Between PX and REM?

PX (pixels) is an absolute CSS unit. A value of 16px is always 16 device-independent pixels regardless of any parent or root font size setting. Pixels are easy to reason about, but they don’t scale when users change their browser’s default font size — which is an accessibility concern.

REM (root em) is a relative CSS unit. 1rem equals the font size of the root element (<html>). The browser’s default root font size is 16px, so by default 1rem = 16px. When users zoom their browser or change their default font size in accessibility settings, rem values scale proportionally — making rem the preferred unit for accessible, responsive typography and spacing.

Why Use REM Over PX?

Accessibility: Users who increase their browser’s default font size get proportionally larger text when you use rem. PX values ignore this setting.
Responsive typography: Changing one root font size value in CSS scales your entire design proportionally.
Predictable scaling: Unlike em, which is relative to the nearest parent’s font size (causing compounding), rem is always relative to the root — no cascade surprises.
Design systems: Most modern design systems (Tailwind CSS, Material Design, etc.) define spacing and typography in rem.

How to Convert PX to REM

The formula is simple:

REM = PX ÷ Base Font Size

With the default base font size of 16px:

16px ÷ 16 = 1rem
24px ÷ 16 = 1.5rem
32px ÷ 16 = 2rem

To convert back (REM → PX):

PX = REM × Base Font Size

Setting the Base Font Size

The base font size is the font size set on the <html> element in your CSS. The browser default is 16px. If your project uses a different base — for example, some designs use 10px as the root to make math easier (1rem = 10px) — enter that value in the Base font size field and all conversions will update instantly.

Common base font size setups:

Setup	Root CSS	1rem equals
Browser default	(none set)	16px
62.5% trick	`html { font-size: 62.5%; }`	10px
Custom 18px	`html { font-size: 18px; }`	18px
Fluid clamp	`html { font-size: clamp(...) }`	varies

Note on the 62.5% trick: Setting html { font-size: 62.5%; } makes 1rem = 10px, which simplifies mental math. However, this also overrides the user’s browser font-size accessibility setting, so use it with caution.

Quick Reference: Common PX to REM Values (Base 16px)

PX	REM	Common use case
4px	0.25rem	Tight gap, micro-spacing
8px	0.5rem	Small gap, icon padding
12px	0.75rem	Small / caption text
14px	0.875rem	Body text (compact)
16px	1rem	Base body text
18px	1.125rem	Slightly larger body text
20px	1.25rem	Large body / small heading
24px	1.5rem	H3 / section heading
32px	2rem	H2 / page section title
48px	3rem	H1 / hero heading
64px	4rem	Display heading

Migrating a Legacy Stylesheet from PX to REM

If you’re converting an existing project, here’s a systematic workflow:

Step 1: Audit your current px values

# Find all px values in your CSS
grep -r '[0-9]\+px' src/styles/ --include="*.css"

Step 2: Set your base font size

/* Add to your root CSS — choose one approach */

/* Option A: Keep browser default (recommended for accessibility) */
/* Don't set html font-size at all — 1rem = 16px */

/* Option B: 62.5% trick for easier math */
html { font-size: 62.5%; }  /* 1rem = 10px */
body { font-size: 1.6rem; } /* Restore body to 16px */

Step 3: Convert systematically

/* Before */
.card {
  padding: 24px;
  margin-bottom: 16px;
  font-size: 14px;
  border-radius: 8px;
}

/* After (base 16px) */
.card {
  padding: 1.5rem;    /* 24 ÷ 16 */
  margin-bottom: 1rem; /* 16 ÷ 16 */
  font-size: 0.875rem; /* 14 ÷ 16 */
  border-radius: 0.5rem; /* 8 ÷ 16 */
}

Step 4: Keep px for things that should NOT scale

/* These should stay in px — they don't relate to text size */
border: 1px solid #e2e8f0;  /* hairline borders */
outline: 2px solid blue;     /* focus rings */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* shadows */

REM in Tailwind CSS

Tailwind CSS uses rem for all spacing and typography utilities by default. The Tailwind spacing scale maps to rem values based on a 16px root:

// tailwind.config.js — default spacing scale (excerpt)
// spacing[4] = 1rem = 16px
// spacing[6] = 1.5rem = 24px
// spacing[8] = 2rem = 32px

// Custom base font size
module.exports = {
  theme: {
    fontSize: {
      sm: ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
      base: ['1rem', { lineHeight: '1.5rem' }],      // 16px
      lg: ['1.125rem', { lineHeight: '1.75rem' }],   // 18px
      xl: ['1.25rem', { lineHeight: '1.75rem' }],    // 20px
      '2xl': ['1.5rem', { lineHeight: '2rem' }],     // 24px
    }
  }
}

CSS Units Comparison: REM vs EM vs VW vs PX

Unit	Relative To	Scales With User Zoom	Scales With Viewport	Use Case
`px`	Screen pixels	No	No	Borders, shadows
`rem`	Root font size	Yes	No	Typography, spacing
`em`	Parent font size	Yes	No	Component-relative sizing
`vw`	Viewport width	No	Yes	Full-width layouts
`vh`	Viewport height	No	Yes	Full-height sections
`clamp()`	Min/preferred/max	Partial	Yes	Fluid typography

Fluid typography with clamp():

/* Font size scales from 16px at 320px viewport to 20px at 1200px viewport */
html {
  font-size: clamp(1rem, 0.875rem + 0.625vw, 1.25rem);
}

Bulk Conversion Mode

Use Bulk mode to convert multiple values at once. Enter one value per line (or comma-separated). The tool parses numeric values and optional unit suffixes like 24px or 1.5rem. Results appear as a table you can copy.

This is useful when migrating a legacy stylesheet from pixels to rem — paste all your px values and get the converted rem values in one step.

Frequently Asked Questions

What base font size should I use? Use the font size you have set on the <html> element in your CSS. If you haven’t set one, the browser default is 16px. Check your CSS for html { font-size: ... } or :root { font-size: ... }.

Does rem inherit from parent elements? No. That’s the key difference from em. REM always refers to the root (<html>) font size, not the nearest parent. EM compounds with nested parents; REM does not.

Can I use rem for spacing, not just font sizes? Yes. REM is widely used for padding, margins, gap, width, and height — not just typography. This ensures spacing scales proportionally with font size changes.

What happens if the user changes their browser font size? When you use rem, the layout scales proportionally. If a user sets their browser default to 20px, your 1rem values become 20px, your 2rem values become 40px, and so on — exactly as expected. PX values stay fixed and won’t respond.

Should I convert border widths and shadows to rem? No. Borders (1px), outlines, and box shadows should stay in pixels. These are decorative elements that should remain crisp regardless of font size. Only convert typography and spacing to rem.

Is this tool private? Yes. All conversions are calculated in your browser using JavaScript. No values are sent to any server.

PX to REM Converter

Quick Reference — Common Values