REM to EM Converter
Convert root-relative REM units to parent-relative EM units
REM to EM Calculator
To convert REM to EM units, you need to know both the root font size and the parent element's font size. The formula is: EM = REM x (Root Font Size ÷ Parent Font Size).
Conversion Result
Current Unit Comparison
See how different units compare with your current settings:
| Unit Type | Value | Equivalent in Pixels | Description |
|---|
Batch Converter
Convert multiple REM values at once. Enter values separated by spaces, commas, or new lines.
Batch Results
| REM | EM | CSS Code |
|---|
Common REM to EM Conversions
When root and parent font sizes are the same (16px), REM and EM values are equal. Here's how that changes with different parent font sizes:
| REM Value | 14px Parent | 16px Parent | 18px Parent | 20px Parent | 24px Parent |
|---|---|---|---|---|---|
| 0.5rem | 0.57em | 0.5em | 0.44em | 0.4em | 0.33em |
| 0.75rem | 0.86em | 0.75em | 0.67em | 0.6em | 0.5em |
| 1rem | 1.14em | 1em | 0.89em | 0.8em | 0.67em |
| 1.25rem | 1.43em | 1.25em | 1.11em | 1em | 0.83em |
| 1.5rem | 1.71em | 1.5em | 1.33em | 1.2em | 1em |
| 2rem | 2.29em | 2em | 1.78em | 1.6em | 1.33em |
| 3rem | 3.43em | 3em | 2.67em | 2.4em | 2em |
All values above assume a root font size of 16px. The formula used is: EM = REM x (Root Font Size ÷ Parent Font Size)
Frequently Asked Questions
Converting from REM to EM units can be useful in several scenarios:
- Component-Based Design - When creating self-contained components that need to scale based on their parent container's font size rather than the root font size.
- Migrating from REM to EM - When refactoring a codebase from REM units to EM units for more component-specific scaling.
- Internal Component Consistency - To ensure that elements within a component maintain proportional relationships to the component's base size.
- Hybrid Approaches - When using a mix of REM and EM units in your design system and need to match values accurately.
- Design System Integration - When integrating with existing systems or frameworks that use different unit conventions.
A common approach is to use REM for global sizing (typography, overall spacing) and EM for component-internal proportions. This gives you the best of both worlds: global consistency and component-specific adaptability.
REM and EM units have key differences in what they reference and how they behave:
REM Units:
- Reference Point: Always relative to the root element (html) font size
- Behavior: Consistent throughout the document regardless of nesting level
- Predictability: More predictable since they always reference the same base value
- Global Scaling: Change the root font size, and all REM-based measurements scale proportionally
- Use Cases: Typography, global spacing, and layout where consistency is important
EM Units:
- Reference Point: Relative to the font size of the parent element
- Behavior: Compounds in nested elements (creating a multiplying effect)
- Adaptability: Automatically adapts to the context it's used in
- Component Scaling: Elements scale with their immediate container
- Use Cases: Component-internal spacing, padding, and margins relative to component text size
In a scenario where the root and parent font sizes are the same (e.g., both 16px), 1rem and 1em would be equivalent. The difference becomes apparent when parent elements have their own font-size declarations.
To manually convert REM values to EM, follow these steps:
For example, if you have:
- Root font size = 16px
- Parent element font size = 20px
- Value to convert = 1.5rem
The calculation would be:
EM = 1.5rem x (16px ÷ 20px) = 1.5 x 0.8 = 1.2em
Some common conversion scenarios (assuming 16px root):
- With parent font size = 16px: 1rem = 1em (values are equal)
- With parent font size = 20px: 1rem = 0.8em (smaller EM value)
- With parent font size = 14px: 1rem = 1.14em (larger EM value)
When converting multiple values in a component, keep the parent font size constant for consistent scaling within that component.
Here are some best practices for effectively using both REM and EM units in your CSS:
- Use REM for Global Elements
- Typography base sizes
- Global margins and padding
- Layout spacing
- Site-wide consistent elements
- Use EM for Component-Internal Elements
- Padding within components
- Margins between elements in a component
- Icon sizing relative to text
- Component-specific spacing
- Set Component Base Font Size with REM
.card { font-size: 1rem; padding: 1.5em; }This creates a reset point for EM-based measurements within the component
- Create a Consistent System
:root { /* Global scale */ font-size: 16px; }.small-text { font-size: 0.875rem; }.button { font-size: 1rem; padding: 0.5em 1em; } - Document Your Approach - Make it clear to team members when to use each unit type
Be cautious with nesting EM-based elements, as the compounding effect can lead to unexpected sizing. Consider setting explicit font sizes at various nesting levels to create new reference points.
About REM & EM Units
Both REM and EM are relative CSS units that provide flexibility for responsive design, but they differ in what they're relative to.
REM (Root EM)
-
Root-Relative: Based on the root element font size
-
Global Consistency: Same value everywhere in the document
EM
-
Parent-Relative: Based on the parent element's font size
-
Context-Sensitive: Adapts to its immediate container
Converting between these units helps create harmonious designs that combine global consistency with component-specific adaptability.
Code Comparison Example
See how REM and EM behave differently:
/* Setup */
:root {
font-size: 16px; /* Root font size */
}
/* REM Example */
.card-rem {
font-size: 1.25rem; /* = 20px */
padding: 1rem; /* = 16px */
}
.card-rem .title {
font-size: 1.5rem; /* = 24px */
margin-bottom: 0.5rem; /* = 8px */
}
/* EM Example */
.card-em {
font-size: 1.25rem; /* = 20px */
padding: 1em; /* = 20px */
}
.card-em .title {
font-size: 1.5em; /* = 30px (1.5 × 20px) */
margin-bottom: 0.5em; /* = 15px (0.5 × 30px) */
}
/* Converted Example */
.card-converted {
font-size: 1.25rem; /* = 20px */
padding: 0.8em; /* = 16px (converted from 1rem) */
}
.card-converted .title {
font-size: 1.2em; /* = 24px (converted from 1.5rem) */
margin-bottom: 0.4em; /* = 8px (converted from 0.5rem) */
}Converting REM to EM values allows you to create components that maintain internal consistency while still fitting into your global design system.
Visual Comparison
See how REM and EM units scale with different contexts:
Root Element (16px)
Notice how REM values remain constant regardless of nesting, while EM values compound as they inherit from parent elements.