px / rem / em Converter
NewConvert a CSS length between pixels, rem, and em given a configurable root and parent font size, plus batch-convert a list of px values to rem.
Batch convert a CSS value list (px → rem)
—
rem is always relative to the root (<html>) font size, so it stays consistent no matter how deeply an element is nested. em is relative to the current element's own font size (approximated here by the "parent font size" field), which means it compounds when font sizes are nested — this is the classic reason rem is usually preferred for spacing/sizing.
Frequently Asked Questions
How is this different from the general Unit Converter tool?
The Unit Converter handles physical/absolute units like inches, centimeters, and points; rem and em are CSS-relative units whose actual pixel value depends on a font size (the root element's for rem, the current element's for em) — this tool is built specifically around that font-size-relative relationship, including a separate "parent font size" field for em.
Why does rem use the "root font size" but em uses a different field?
By definition, 1rem always equals the root (`<html>`) element's font size, no matter how deeply nested the element is — but 1em equals the *current* element's own font size, which is often inherited from a parent and can differ from the root, so em needs its own separate reference value to convert correctly.
Why is rem usually recommended over em for sizing and spacing?
Because em is relative to the current element, em-based sizes compound when font sizes are nested inside each other (e.g. a 1.2em heading inside a 1.2em container ends up larger than expected) — rem avoids this compounding entirely since it always refers back to one fixed root value.
What does the batch converter do?
Paste a list of CSS values like "8px 16px 24px 32px" and it converts each one to rem using your configured root font size, which is handy when migrating an entire stylesheet's hardcoded pixel values to rem at once.
What's the default root font size, and why?
16px, which is the default browser font size for the `<html>` element in virtually all browsers unless a site explicitly overrides it — so 1rem = 16px is the correct assumption for most real-world sites unless you know otherwise.