px to rem to em Converter
Convert CSS pixel values to rem and em instantly, with custom base font sizes.
This free converter helps front-end developers translate pixel values into rem and em units for responsive, accessible CSS. Enter a value in px, rem or em and the other two update instantly, based on a root font-size (used for rem) and a parent font-size (used for em) that you can customize — both default to the browser standard of 16px.
Using rem and em instead of fixed pixel values lets text and spacing scale properly when a user changes their browser's font-size setting, which is important for accessibility. rem is generally preferred for most layout work since it always scales from a single root value, while em is useful for spacing that should scale with a specific component's own font size.
Frequently Asked Questions
What is the difference between px, rem and em?
px is an absolute pixel unit. rem is relative to the root (html) element's font-size. em is relative to the font-size of the current element's parent, so its actual pixel value can change depending on where it is used in the page.
How do I convert px to rem?
Divide the pixel value by the root font-size (usually 16px). For example, 24px ÷ 16px = 1.5rem.
How do I convert rem to px?
Multiply the rem value by the root font-size. For example, 1.5rem × 16px = 24px.
Why is 16px the default base size?
Most browsers use 16px as the default font-size for the html element, so 1rem equals 16px unless the developer or user explicitly changes it.
Why does em give a different result than rem sometimes?
em is calculated relative to the font-size of the parent element, not the root. If a component has a parent with a different font-size than the root, converting the same pixel value to em produces a different number than converting it to rem.
Should I use rem or em for font sizes?
rem is usually recommended for font sizes because it stays predictable regardless of nesting — every rem value always refers back to the same root font-size, avoiding compounding effects.
When is em more useful than rem?
em can be useful for values that should scale with a specific component's own font size, such as padding inside a button that should grow proportionally if the button's text size changes.
Does changing the root font-size affect all rem values on a page?
Yes. Since every rem unit is relative to the root font-size, changing that single value rescales every rem-based measurement on the page proportionally.
Why should I avoid fixed pixel values for text?
Fixed pixel text does not scale when a user increases their browser's default font-size for accessibility reasons, which can make a site harder to read for people who rely on larger text.
Can I use this calculator for non-16px base sizes?
Yes. Change the root font-size and parent font-size fields to match your project's actual CSS setup, and the conversions will update accordingly.