px to rem / em Converter
Convert between px, rem and em using your root and parent font sizes. Nothing is uploaded — the conversion is local.
px to rem / em
CSS has several length units. rem is relative to the root element's font size, and em is relative to the parent element's font size. Converting a design in pixels to relative units is a common accessibility and theming step, and it is easy to get the em case wrong because it depends on context.
The rules it follows
- px ↔ rem uses the root font size (default 16px).
- px ↔ em uses the parent font size.
- A root size of 0 is rejected to avoid dividing by zero.
Frequently asked questions
What is the difference between rem and em?
rem is relative to the root element's font size; em is relative to the parent element's font size. The tool shows both.
What is the default root font size?
16px, which is the usual browser default. You can change it if your page sets a different root size.
Can I convert rem back to px?
Yes. Choose the source unit and the tool converts between px, rem and em in both directions.
Why does the em result change with the parent size?
Because em depends on the parent element's font size, whereas rem does not.
What if I enter a root font size of 0?
It is rejected, since converting would divide by zero.
Did this convert my units by contacting a server?
No. The conversion is a local calculation in your browser.
Related: the text case converter and word counter, or browse every browser-only tool on the all tools page.