PX to REM Converter

The PX to REM Converter turns pixel values into rem or em units — and back again — using whatever root font-size your project actually uses. Paste a single value or a whole type scale, and you get the converted numbers, a copy-ready CSS block with the original pixels preserved as comments, a ruler that renders each size at true scale, and a preview of how your rem values respond when a visitor increases their browser font size.

PX to REM Formula

Converting between pixels and rem is a single division — the only thing you need to know is the root font-size of the document.

With the browser default root of 16 px, that gives 24px ÷ 16 = 1.5rem and 1.5rem × 16 = 24px. If your stylesheet sets html { font-size: 62.5%; } the root becomes 10 px and the same 24 px is 2.4rem.

PX to REM Conversion Table (16px root)

rem vs em: Why Nesting Changes Everything

rem is measured against the root element (html), so it means the same thing everywhere in the document. em is measured against the parent element's computed font-size, so identical em values compound as you nest them. This diagram shows the same 1.5 multiplier applied three levels deep, starting from a 16 px root:

The practical rule most teams land on: use rem for font sizes, layout spacing and breakpoints; use em deliberately for things that should scale with their own component, such as the padding inside a button or the size of an icon sitting next to text.

Why Use rem Instead of px?

• Accessibility. A visitor who sets their browser's default font size to 20 px sees every rem-based size grow proportionally. Sizes hard-coded in px ignore that preference completely.
• One knob for global scaling. Change the root font-size in a media query and your whole type scale and spacing rhythm shift together — no per-component overrides.
• Consistent spacing rhythm. Expressing padding and margins in rem keeps the vertical rhythm tied to the type scale instead of drifting apart.
• Design-token friendly. Modern design systems (and Tailwind's default scale) publish sizes in rem, so converting your existing px values makes handoff easier.

The 62.5% Root Font-Size Trick

Many teams add this rule so that 1rem equals a clean 10 px, which makes mental conversion trivial:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* back to a readable 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Because 62.5% is a percentage of the browser default rather than a fixed pixel value, it still honours the visitor's font-size preference. The one thing to remember is to reset body back to roughly 1.6rem, otherwise your default text ships at 10 px. Set the root font-size field above to 10 to convert against this setup.

rem in Media Queries

Inside a media query, rem is resolved against the browser's initial root font-size — not the html font-size you set in CSS. So @media (min-width: 48rem) is always 768 px, even if your stylesheet declares html { font-size: 10px }. That makes rem breakpoints safe and predictable, and it is one of the few places where em and rem behave identically.

When You Should Still Use px

• Hairline borders and dividers — a 1 px border should stay 1 px; scaling it produces blurry sub-pixel lines.
• Fixed-size assets — sprite offsets, precise shadow offsets, and images with a known intrinsic size.
• Canvas and print output — where a physical or device-pixel measurement is genuinely what you mean.

How to Use This Converter

1. Pick a direction: px → rem, rem → px, px → em or em → px.
2. Enter your values: one number, or a whole scale separated by commas or spaces (up to 20 at a time). Trailing units such as 24px are accepted and ignored.
3. Set the root font-size: keep 16 for browser defaults, or tap a preset chip for 10 (62.5% trick), 12, 14, 18 or 20.
4. Click Convert: read the results table, the true-scale size ruler, the accessibility preview and the CSS block.
5. Copy the CSS: one button copies every font-size declaration with the source pixel value kept in a comment.

Frequently Asked Questions

How do I convert px to rem?

Divide the pixel value by the root font-size. With the browser default root of 16 px, 24 px ÷ 16 = 1.5rem. To go the other way, multiply the rem value by the root font-size: 1.5rem × 16 = 24 px.

How many px is 1rem?

1rem equals the root font-size of the page. In every major browser that defaults to 16 px, so 1rem is 16 px unless the html element or the visitor's browser settings change it.

What is the difference between rem and em?

rem is always relative to the root font-size on the html element, so 1.5rem is the same size anywhere in the document. em is relative to the font-size of the element's own parent, so nested elements compound: 1.5em inside another 1.5em renders at 2.25 times the base size.

What is the 62.5 percent root font-size trick?

Setting html { font-size: 62.5%; } makes the root 10 px instead of 16 px, so 1rem equals 10 px and the mental maths becomes trivial: 24 px is 2.4rem. It still scales with the visitor's browser font-size preference because 62.5% is relative, not an absolute pixel value.

Should I use px or rem for font sizes?

Use rem for font sizes, spacing and media queries so the layout grows when a visitor raises their default browser font size. Reserve px for values that must not scale, such as hairline borders, one-pixel dividers and some shadow offsets.

Do rem values need to be round numbers?

No. Browsers handle fractional rem values fine and compute sub-pixel sizes internally. If you prefer clean numbers, pick a root font-size that divides your scale evenly, such as 10 px or 8 px, or use this converter's decimal precision option.

Does rem work for padding, margin and media queries?

Yes. rem is valid anywhere CSS accepts a length, including padding, margin, width, gap and border-radius. In media queries rem is resolved against the initial 16 px root rather than your custom html font-size, so a 48rem breakpoint is always 768 px.

Additional Resources

• CSS length units - MDN
• Font-relative lengths - W3C CSS Values