Free tool · runs in your browser
PX to REM Converter
Enter a value, choose its unit, and set the root and parent font sizes. The converter shows the equivalent px, rem and em values and a table of common sizes.
Why the root size matters
rem is defined against the root element font size, which is 16px by default but follows the user's browser setting. The converter uses the root size you enter, so a design that assumes 16px can be checked against a user who reads at 20px. A pixel value never changes with that setting.
The table of common sizes shows the same values at the current root size. It is there to catch a scale that looks right at 16px but collapses or explodes when the root changes.
em depends on the parent
em resolves against the element's own font size, and for the font-size property that reference is the parent. The converter treats the parent size as the reference, which matches the common case of setting a child's font size. Padding or margin in em on the same element would use the child's computed size instead, so nested values can compound.
For a stable global scale, use rem. For component-local spacing that should follow the label size, em is the better fit.
Frequently asked questions
What root size should I use?
Use the actual root font size of your page. If you have not changed it, 16px is the browser default.
Why are the px and rem values not a simple ratio?
They are a ratio, but the ratio is the root font size. Changing it changes every rem value at once.
Does em use the same reference as rem?
No. rem always uses the root; em uses the element or its parent depending on the property.