PX to REM Converter

Pixels, rem, and em untangled

A pixel is an absolute length. A rem is relative to the root font size, usually 16px by default, so 1rem equals 16px until someone changes the root. An em is relative to the font size of the current element, which can cascade and compound. Converting between them is dividing or multiplying by the root size.

Why rem beats px for type

When a user raises their browser's default font size for readability, lengths set in px ignore that preference, while rem values scale with it. Sizing text and spacing inrem therefore respects accessibility settings. The common base is 16px, so the mental shortcut is: divide px by 16 to get rem.

Example

Root font-size: 16px

24px / 16 = 1.5rem
12px / 16 = 0.75rem
40px / 16 = 2.5rem

/* em compounds: 1.2em inside a 1.2em parent = 1.44x root */

That last line is the em trap: nested elements each multiply, so an em value deep in the tree is not what it looks like in isolation.

Pitfalls

Some teams set html { font-size: 62.5% } so 1rem equals 10px for easier math, but that quietly rescales every rem-based third-party style and can cause surprises. Prefer em only where you want sizing to follow the local font, like padding inside a button. For fluid type that interpolates between rem bounds, combine this with the clamp() generator.

FAQ

Does the 16px base ever change? It is the browser default, but any stylesheet can override the root, so confirm the base before trusting a conversion.

rem or em for media queries? Media query lengths in em are based on the browser default, not the root element, which is a subtle but documented difference.

Should I convert borders to rem? Hairline borders often look best in px so they do not scale into fuzzy fractional widths.