PX ↔ REM/EM Converter
Convert CSS pixels, rem and em units using an editable root and parent font size for responsive web design.
Convert px, rem and em units
Set the root and parent font sizes, then convert a CSS length between pixels, rem and em.
PX to REM and EM converter for CSS
Pixels are an absolute CSS reference unit, while rem and em are relative units. One rem equals the computed font size of the document root element. One em depends on context: for a font-size declaration it is relative to the inherited parent font size, while for many other properties it relates to the element's own computed font size.
Conversion formulas
rem = px ÷ root font size. For the simplified em calculation here, em = px ÷ parent/current font size. Reverse conversion multiplies the relative value by the corresponding reference size.
Why the base size matters
Many examples assume a 16px browser default, but real sites can change the root font size and users can have accessibility preferences. Treat 16px as a common example, not a universal guarantee. Use computed styles from the actual component when exact em behavior matters.
When to use relative units
Relative units are useful for scalable typography and spacing that should respond to a font-size context. Pixels can still be appropriate for hairlines, certain icons and exact design constraints. The best unit depends on the property, component and accessibility behavior you need.