PX to REM: The Complete CSS Conversion Guide (2026)

Every time you type a pixel value in CSS, you're locking that size in place — it won't change if a user bumps their browser font size up for readability, and it won't scale elegantly across your design system. REM units solve both problems with one formula.

This guide covers the formula, a full conversion reference table, when to use REM over pixels, and how to convert entire CSS files in one step.

Key Takeaways

• The px to rem formula is rem = px ÷ root font size. At the browser default of 16px: 24px = 1.5rem.
• REM units respond to the user's browser accessibility font-size setting — pixels do not.
• 1rem = 16px in Chrome, Firefox, Safari, and Edge unless overridden by a custom html { font-size }.
• A free PX to REM Converter handles individual values, bulk CSS files, and Tailwind scale export — all in your browser.

What is the difference between px and rem in CSS?

Pixels are fixed units — 16px is always 16px, regardless of user preferences or the device. REM (Root EM) is a relative unit tied to the font-size of the html element. Every major browser defaults that root size to 16px, so out of the box: 1rem = 16px.

The key difference shows up when a user changes their browser's default font size. With pixels, nothing moves. With REM, your entire layout scales proportionally — because every REM value multiplies from that same root. This is why REM is the standard recommendation for accessible, scalable CSS typography and spacing.

How do you convert px to rem?

Divide the pixel value by the base font size. At the standard 16px browser default:

rem = px ÷ base font size

/* Examples at base 16px */
16px ÷ 16 = 1rem
24px ÷ 16 = 1.5rem
12px ÷ 16 = 0.75rem
 8px ÷ 16 = 0.5rem
32px ÷ 16 = 2rem

If your project uses a custom root font size — for example, some teams set html { font-size: 10px } or html { font-size: 62.5% } to make the math easier — replace 16 with your actual base value.

The 62.5% base trick

Setting html { font-size: 62.5%; } changes the root to 10px (62.5% of 16px). This makes mental math trivial: 24px becomes 2.4rem, 16px becomes 1.6rem. Just remember to reset body { font-size: 1.6rem; } so your body text stays at 16px. It's a common pattern in older Sass-heavy codebases, but modern design tokens and tooling have made it less necessary.

PX to REM conversion table (base 16px)

The table below covers the most common pixel values and their REM equivalents at the 16px browser default. These are the exact values most frequently used for font-sizes, spacing, and layout in CSS.

Pixels	REM	Common use
1px	0.0625rem	Fine borders
2px	0.125rem	Borders, dividers
4px	0.25rem	Micro spacing
6px	0.375rem	Tight padding
8px	0.5rem	Small padding
10px	0.625rem	Small text, captions
12px	0.75rem	Labels, small UI text
14px	0.875rem	Secondary text
16px	1rem	Body text baseline
18px	1.125rem	Comfortable body text
20px	1.25rem	Large body, intro text
24px	1.5rem	H4, card titles
28px	1.75rem	H3 headings
32px	2rem	H2 headings
36px	2.25rem	Large H2
40px	2.5rem	H1 headings
48px	3rem	Display headings
56px	3.5rem	Hero text
64px	4rem	Large hero text
80px	5rem	XL display
96px	6rem	Jumbo display

For values outside this table, use the PX to REM Converter — type any value and the result appears instantly.

Why should you use rem instead of px in CSS?

Three reasons: accessibility, scalability, and predictability.

Accessibility. Browsers allow users to set a preferred default font size in settings (common for people with low vision or reading difficulties). CSS px values bypass this preference entirely. REM values scale with the root, so a user who bumps their browser font to 20px will see your REM-based layout expand proportionally. Pixel-based text stays frozen. WCAG 2.1 Success Criterion 1.4.4 (Resize Text) requires text to be resizable to 200% without loss of content — using px for font-sizes makes that harder to achieve.

Scalability. Want to tighten your entire layout for mobile? One rule — :root { font-size: 14px } inside a media query — reflows every REM value across your entire stylesheet at once. That's the kind of global control that saves hours on large codebases.

Predictability. Unlike EM, REM never compounds. A nested element with font-size: 1.5rem is always 24px relative to root — not 1.5× the parent, which may itself be 1.5× a grandparent. You always know what you're getting.

EM vs REM — what is the difference?

Both are relative units, but they reference different things:

Unit	Relative to	Compounds?	Best for
em	Parent element font-size	Yes — stacks in nested elements	Component-level padding, margins that should scale with local font-size
rem	Root html font-size	No — always one level	Global typography, spacing scales, layout

In practice: use rem for font-size and global spacing (padding, margin, gap). Use em selectively when you want an element's spacing to scale with its own font-size, like padding inside a button that should grow if the button text grows.

How to bulk convert px to rem in a CSS file

Migrating an existing stylesheet from pixels to REM by hand is tedious — a typical CSS file has hundreds of pixel values. There are two practical ways to handle it:

Option 1: Paste CSS into a bulk converter. The ZerofyTools PX to REM Converter includes a Bulk CSS Replacer panel. Paste any CSS block, click Convert All, and every px value is replaced with its rem equivalent at your chosen base — no installs, no command line, nothing uploaded to a server.

Option 2: PostCSS plugin (for large projects). If you're working with a build pipeline, the postcss-pxtorem package automates the conversion at build time. You write px in your source, the plugin converts to rem in the output. Useful for large design systems where you don't want to change how designers hand off specs.

Option 3: Generate a spacing scale. The Scale Export panel in the converter generates a ready-to-paste Tailwind config or CSS custom properties block — a complete spacing scale from 1px to 128px in rem at your chosen base. Drop it straight into your project.

Frequently Asked Questions

What is 16px in rem?

16px equals 1rem at the default browser base of 16px. This is the most common conversion: 16 ÷ 16 = 1. It's also why 1rem is a natural starting point for body text.

What is 1rem in pixels?

1rem = 16px in all major browsers by default (Chrome, Firefox, Safari, Edge). This only changes if the html element has a custom font-size set in CSS. If you're inheriting a project and conversions seem off, check the root font-size first.

What is 24px in rem?

24px ÷ 16 = 1.5rem at the standard 16px base. This is one of the most common heading or card-title font sizes in web design.

Can I use rem for properties other than font-size?

Yes — and you should. REM works for any CSS length value: padding, margin, gap, width, border-radius, and more. Using rem consistently means your entire layout responds to the root font-size, keeping proportions intact if the base ever changes.

What is the difference between em and rem?

EM is relative to the parent element's font-size; REM is relative to the root html element's font-size. EM compounds in nested elements (1.5em inside 1.5em = 2.25× the root), which makes it unpredictable for global layout. REM never compounds — it's always one calculation from the root.