PX to REM Converter

Modern CSS is written in relative units — rem and em scale with the user’s font settings, which is why accessible, responsive designs prefer them — but design tools still speak pixels. This converter bridges the two: enter a pixel value and your root font size (16px by default), and it returns the exact rem and em equivalents, plus the percentage form some techniques use. A reference table for the sizes designers reach for most (8 to 72px) sits below for one-glance answers while you work. Whether you are translating a Figma file into a stylesheet, auditing an old fixed-pixel layout, or learning why 24px becomes 1.5rem, the arithmetic is instant and always right.

Quick Answer: Enter pixels and a base size to get rem, em and percentage equivalents instantly, with a reference table for common design sizes.

Free Online Tool

Design-tool pixels in, stylesheet-ready units out.

Base font size (px)

Pixels (px)

REM

1.5emEM equivalent

150%Percentage

Reference table (at current base)

How to Use the PX to REM Converter

Enter the pixel value you are converting.
Set the base (root) font size — 16 is the browser standard; change it if your html element sets another.
Read the rem and em values, calculated to sensible precision.
Copy the value you need straight into your stylesheet.
Use the reference table for quick conversions of standard sizes without typing.

Key Features

Instant px to rem, em and percentage conversion.
Adjustable base font size for projects with non-standard roots.
Reference table for the sizes from 8px to 72px at the current base.
Reverse direction too: enter rem to get pixels.
Runs locally; no sign-up and no distractions while you design.

Best Practices and Tips

rem is relative to the root (html) font size; em is relative to the element’s parent — for predictable layouts, rem is the safer default in most codebases.
Users can change their browser’s default font size; rem-based layouts respect that choice, fixed pixels override it — an accessibility argument, not just a style one.
Keep precision sane: three decimal places (1.063rem) is plenty; browsers do not need more.
Spacing systems often standardise on 0.25rem (4px) steps — the table makes spotting off-system values easy.
When converting a whole legacy stylesheet, convert font sizes and spacing first; borders and hairlines often legitimately stay at 1px.

Common Mistakes to Avoid

Converting with the wrong base because the project sets html { font-size: 62.5% } (making 1rem = 10px) while the converter assumed 16.
Using em for nested components without realising it compounds: a 1.2em inside a 1.2em is 1.44 times the root, not 1.2.
Converting media-query breakpoints thoughtlessly; many teams keep breakpoints in px or em deliberately — know your project’s convention.
Typing percentage equivalents as font sizes without understanding they refer to the parent’s size, not the root.

Frequently Asked Questions

What is the difference between rem and em?

An em equals the font size of the element’s parent context, so ems compound through nesting. A rem always equals the root element’s font size, so 1.5rem means the same everywhere in the document. That predictability is why rem became the default for most responsive design systems.

Why is 16 the default base?

Browsers ship with a default root font size of 16px, and most design systems build on it. If your project changes the root (a common trick sets it to 10px for easy maths), set the base here to match before converting.

How do I convert rem back to pixels?

Use the reverse field: enter the rem value and multiply by the base — 1.5rem at base 16 is 24px. The converter does it in the same panel so you can work in whichever direction the task demands.

Should everything be in rem?

Text sizes and layout spacing benefit most. Hairline borders (1px), some shadows and fixed UI chrome often remain in pixels by design. The goal is scalable typography and spacing, not a religious ban on the px unit.

What precision should I use?

Three decimal places covers every realistic case — 0.063rem steps correspond to single pixels at base 16. More decimals add noise, not accuracy, since screens ultimately render in whole device pixels.