REM to EM Converter
Convert between rem and em units. Requires both root and parent font-size values for accurate conversion.
REM to EM Conversion Table
Complete reference: rem 1–100 converted to em.
| rem | em |
|---|
How to Convert REM to EM
Since rem and em reference different base values, conversion requires both the root and parent font sizes:
em = rem × (root-font-size ÷ parent-font-size)When the root and parent font sizes are both 16px (the common case), 1rem = 1em. But when they differ, the conversion matters. For example, with root: 16px and parent: 20px, 1rem = 0.8em (because 16 ÷ 20 = 0.8).
This conversion goes through pixels as an intermediate step: first convert rem to px (rem × root-font-size), then convert px to em (px ÷ parent-font-size). The converter above handles this automatically.
When to Convert Between REM and EM
This conversion comes up in several real-world scenarios:
- Refactoring legacy CSS: Older codebases often use em throughout. Migrating to rem for global sizing while keeping em for component-internal spacing requires knowing the equivalents.
- Component isolation: When extracting a component from a rem-based system into a context where the parent font-size differs, you need to recalculate em values.
- Design token translation: Some design systems define tokens in rem but individual components need em-based values for internal proportional scaling.
- Debugging nested styles: When rem and em are mixed in a stylesheet, understanding their relationship helps debug unexpected sizing.
When REM and EM Differ
REM and EM produce different results whenever the parent font-size doesn't match the root font-size. This commonly occurs in:
- Components with explicitly set font sizes (e.g., a sidebar with smaller text)
- Nested elements where em-based font-sizes have compounded
- Third-party widgets with their own font-size declarations
- Elements inheriting from a parent that overrides the default size
A recommended approach: use rem for all font sizes to avoid compounding, and use em for padding/margins within components that should scale with the component's own text size.
/* Best practice: rem for font-size, em for internal spacing */
.card {
font-size: 1rem; /* anchored to root */
padding: 1.5em 2em; /* scales with card font-size */
}
.card--compact {
font-size: 0.875rem; /* smaller card */
/* padding auto-shrinks proportionally */
}Frequently Asked Questions
Is 1rem always equal to 1em?
Only when the parent element's font-size equals the root font-size (typically 16px). If the parent has a different font-size, 1rem and 1em will represent different pixel values.
Which should I use: rem or em?
Use rem for font-size and global spacing to avoid the compounding problem. Use em for component-internal properties (padding, margin, border-radius) that should scale with the component's own text size.
How does nesting affect rem vs em?
Rem is unaffected by nesting — it always references the root font-size. Em compounds with each nested level. This is the key reason rem is preferred for font-size declarations.
Can I mix rem and em in the same project?
Absolutely. A common pattern is rem for font-size (predictable, no compounding) and em for padding/margins within components (proportional to the component's text size). This gives you both consistency and flexibility.