About REM to EM Conversion
REM (Root EM) and EM are both relative CSS units, but they scale differently. REM is relative to the root (html) element's font size, while EM is relative to its parent element's font size.
How to Use This Tool
- Enter the REM value you want to convert
- Specify the parent element's font size in pixels
- Specify the root element's font size in pixels
- Click "Convert to EM" to get the equivalent EM value
- Copy the result and use it in your CSS
The Conversion Formula
The formula to convert REM to EM is:
em = (rem × root-font-size) / parent-font-size
For example, to convert 1.5rem to em when root is 16px and parent is 14px:
(1.5 × 16) / 14 = 1.714em
Why Convert Between REM and EM?
- Component Development: When creating reusable components that need to adapt to different contexts
- Legacy Code: When working with existing code that uses mixed units
- Design Systems: To maintain consistency across different implementations
- Responsive Adjustments: When you need elements to scale with their immediate container
Key Differences Between REM and EM
- REM is always relative to the root (html) element's font size
- EM is relative to the parent element's font size
- REM provides consistent sizing throughout the document
- EM allows for contextual scaling within components
- Nested EM values compound, while REM values remain consistent
Best Practices
- Use REM for global sizing (fonts, spacing, layouts)
- Use EM for component-level sizing that should scale with context
- Be mindful of compounding effects with nested EM values
- Document your unit strategy for team consistency
- Test your conversions at different viewport sizes