Live & Bidirectional
Type into PX, REM, or EM — the other two update instantly. No convert button, no page reload.
Developer Tool
Pixel to REM Converter
Convert PX to REM (and EM) instantly with a custom root font size — live, bidirectional, and ready-to-paste as CSS. Convert one value or a whole list at once.
- Live Bidirectional
- Custom Base Size
- Bulk Convert
- CSS Snippet Ready
- 100% Private
Convert PX ⇄ REM ⇄ EM
Pixels
px
REM
rem
EM
em
Enter a value to see the formula.
font-size: 1rem; /* 16px */
| PX | REM | EM | |
|---|---|---|---|
| Paste one or more pixel values above to convert them all at once. | |||
Click any row to load that value into the Convert tab.
| PX | REM | EM |
|---|
Features
Built for Real CSS Workflows
Everything the other converters have, plus the parts they're missing.
Custom Root Font Size
Defaults to the browser standard 16px, but adjusts for sites using a different root — including the 62.5% (10px) trick.
Bulk Convert
Paste an entire design spec's worth of pixel values and get every REM/EM equivalent at once.
CSS-Ready Output
Pick a CSS property and copy a complete, ready-to-paste declaration — or export a whole list as CSS custom properties.
Full Reference Table
A complete px-to-rem chart from 2px to 128px, recalculated live for your chosen base — click any row to load it.
100% Private
Every calculation runs in your browser. Nothing you type is ever sent to a server.
How It Works
Convert in Seconds
- 1
Set the Root Font Size
Leave it at 16px (the browser default) or match your project's actual root size.
- 2
Type a Value
Enter pixels, rem, or em — or paste a whole list into Bulk Convert.
- 3
Copy the Result
Copy the raw value, or a ready-to-paste CSS declaration for any property.
FAQ
Frequently Asked Questions
rem = pixels ÷ root font size. The root font size defaults to 16px in every major browser, so 24px ÷ 16 = 1.5rem. This tool lets you change the base if your site sets a different root size.
rem is always relative to the root (<html>) font size, so it stays consistent everywhere on the page. em is relative to the current element's parent font size, so it can compound when elements are nested inside each other with different font sizes.
16px is the default font-size every major browser applies to the <html> element unless a stylesheet overrides it. That's why 16px is the standard base for px-to-rem conversion.
Accessibility. If a user increases their browser's default font size for readability, values in rem scale proportionally with that setting, while values in px stay fixed and can break a resized layout. This is also part of WCAG 1.4.4 (Resize Text).
No — the base font size field here only affects the calculation shown on this page. To change your site's actual root size, set font-size on the html selector in your own CSS.
Usually not. Hairline details like 1px borders are typically kept in raw px since they don't need to scale with the user's text-size preference. rem and em are best reserved for typography, spacing, and layout dimensions.
Yes — this converter is fully bidirectional. Type into the REM or EM field and the PX field updates instantly using px = rem × base font size.
Yes — switch to the Bulk Convert tab, paste a list of pixel values separated by commas, spaces, or line breaks, and get every rem and em equivalent instantly, with a one-click copy as a plain list or as CSS custom properties.
PX to REM Conversion Chart (16px Base)
| Pixels | REM | EM |
|---|---|---|
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
Need a different base, or a value that isn't in this chart? Use the Reference Table tab in the converter above — it covers 2px to 128px and recalculates live for any root font size, including the 62.5% "10px" trick some design systems use.
PX vs. REM vs. EM — What's the Difference?
| Unit | Relative To | Scales With Browser Text Size? | Best For |
|---|---|---|---|
px | Absolute (fixed) | No | Borders, hairlines, fixed icon sizes |
rem | Root (<html>) font size | Yes | Typography, spacing, layout dimensions |
em | Parent element's font size | Yes | Sizing relative to a specific component (e.g. icon next to text) |
px is an absolute CSS unit — 16px is 16px everywhere, regardless of any font-size setting. rem ("root em") is always relative to the root <html> element's font-size, so a value like 1.5rem means the same thing no matter where it's used in the page. em is relative to the current element's own (inherited) font-size, which makes it compound inside deeply nested elements — useful for scaling something relative to its immediate container, but easy to lose track of in complex layouts. For a deeper walkthrough, read our full guide to px vs. rem vs. em in CSS.
When Should You Use REM Instead of PX?
Use rem for anything that should respect the user's accessibility preferences — font sizes, margins, padding, and layout widths. When someone increases their browser's default text size (common among users with low vision), every rem value on the page scales proportionally, while px values stay exactly the same size and can start to look cramped or misaligned next to the now-larger text. This is part of why WCAG 1.4.4 (Resize Text) recommends against text sizing methods that prevent this kind of scaling. Reserve px for details that genuinely shouldn't scale, like a 1px hairline border.
A Note on Non-Standard Root Font Sizes
Most frameworks — including Tailwind CSS and Bootstrap — assume the browser's default 16px root font size when defining their rem-based spacing and type scales. Some older design systems instead set html { font-size: 62.5%; }, which makes the root exactly 10px — a trick that turns rem math into simple mental division by 10 (16px becomes 1.6rem, 24px becomes 2.4rem). If you're auditing or migrating a codebase, always confirm the actual root font-size in its global stylesheet before trusting a 16px assumption; the base font size field in the converter above lets you match either convention exactly.