EM  to  REM Converter

Conversion Guide

Since both em and rem are relative units, the conversion is 1:1. However, remember that em is relative to parent element while rem is relative to root font size.

Conversion Settings
While the numerical conversion is 1:1, the actual rendered size may differ since em and rem have different reference points.
EM to REM Conversion Table
EMREMActions
0.250.25
0.50.5
0.750.75
11
1.251.25
1.51.5
22
2.52.5
33
44
55

Frequently Asked Questions

Basics

What is EM?

The em unit creates sizes that adapt to their parent element's font size - like a family inheritance system for measurements. When you use 1em, you're saying 'make this the same size as my parent's font'. Using 2em means 'make this twice my parent's font size'. This makes em units perfect for creating harmonious, scalable designs.

Understanding the EM Unit in CSSParent Elementfont-size: 16px (browser default)1em= 16px1.5em= 24px(16px × 1.5)0.5em= 8px(16px × 0.5)EM units are relative to the parent element's font size
I set my element to 1.5em but it's bigger than expected. What's happening?
Em units cascade - if your parent element is already 1.2em, then 1.5em will actually be 1.5 times that increased size. This compound effect is both powerful and sometimes tricky to manage.
Should I use em for padding and margins too?
Yes! Using em for padding and margins helps maintain proportional spacing as font sizes change. For example, button padding of 1em will grow naturally with the button's text size.
My nested elements keep getting bigger and bigger with em. Help!
This is the cascading effect of em units. Each nested element multiplies the parent's size. Consider using rem for deeper nested elements or reset sizes at specific levels if this isn't desired.
When should I use em vs rem vs px?
Use em when you want elements to scale with their parent's font size (like component internals), rem when you want scaling based on root font size (like headers), and px for truly fixed sizes (like borders).

What is REM?

The rem (root em) unit is a relative unit that's always based on the font-size of the root element (html). This makes it powerful for creating consistent, scalable layouts that respect user preferences. Unlike em units which compound in nested elements, rem always refers back to the root font-size.

Root Element (html)font-size: 16px (default)1rem = 16px"Normal text size"2rem = 32px"Twice the root size"0.5rem = 8px"Half the root size"
Why should I use rem instead of pixels?
REM units provide better accessibility by respecting user font size preferences, maintain consistent scaling across the site, and simplify responsive design. Unlike pixels, rem units scale proportionally when users change their browser's font size settings.
How do I calculate rem values from pixels?
To convert pixels to rem, divide the desired pixel value by the root font size (typically 16px). For example: 32px ÷ 16px = 2rem. Many code editors and dev tools can do this calculation automatically.
What's the difference between rem and em units?
While both are relative units, em is relative to the font-size of the current element or its closest parent with a defined font-size. rem is always relative to the root element, making it more predictable for layout and preventing compound scaling issues.
When should I use rem vs em units?
Use rem for consistent spacing, layout and general typography. Use em when you want elements to scale relative to their parent's font size, like padding in buttons or line-height in paragraphs.
How can I debug rem calculations?
Most browser dev tools can show both rem and pixel values. You can also set a more convenient root font-size (like 10px) to make calculations easier: html { font-size: 62.5%; } (making 1rem = 10px)

Conversion

How to convert EM to REM?

To convert EM to REM, use the following formula:

em * (parent font size / root font size)