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.
Ad
Tarot MagicDiscover the ancient wisdom of the Tarot cardsStart Reading ✦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.