Convert EM to REM
Migrating a stylesheet from em to rem removes the compounding surprises that nested em values cause. This converter gives the rem equivalent at a shared base font size, so you can swap units without changing the rendered result at the root.
0.5em 1em 1.5em 2em
0.5rem 1rem 1.5rem 2rem
Try it with your own data
How to convert EM to REM
- Take the em value from your existing styles.
- At a matching base font size, the numeric rem value is the same.
- Replace em with rem to stop values compounding through nesting.
Frequently asked questions
Why migrate from em to rem?
Em compounds: nested elements multiply each other's font sizes, which can make spacing balloon unexpectedly. Rem always references the root, giving consistent, predictable sizing.
Will the conversion change how my page looks?
Not at the root level — at a shared base the values are equal. Differences only appear where elements had overridden font sizes that em was depending on.
What is the difference between REM and EM?
rem (Root EM) is relative to the root element (usually the <html> element) font size. em is relative to the font size of its nearest parent element.
Why use REM instead of pixels?
Using rem units is crucial for accessibility. If a user changes their browser's default font size, your entire layout scales proportionally — something static pixel units can't do.