em to rem Calculator
Convert em to rem instantly for scalable CSS typography. Enter your base font size and em value to get accurate rem results for responsive web design.
Em
Rem
How to convert em to rem
Translate em values into rem units using the parent and root font sizes.
Set the root font size
Enter the root (html) font size in pixels, which is typically 16px in most browsers.
Enter the parent font size
Add the parent element's font size in pixels to define the em baseline context.
Input your em value
Type the em number and the converter instantly outputs the equivalent rem value.
Why use this em to rem Converter?
Eliminate manual math errors and build consistent, accessible CSS layouts.
The Mathematical Formula
rem = em × (parent font size ÷ root font size). For example, 2em with a 20px parent and 16px root equals 2.5rem.
Precise, Instant Results
Calculations happen in real time, so designers and developers can iterate quickly without opening external tools.
Better Responsive Scaling
Switching to rem units ensures text and spacing scale uniformly across breakpoints and user accessibility settings.
Quick Reference
| Em | Rem |
|---|---|
| 1 em | 1 rem |
| 2 em | 2 rem |
| 5 em | 5 rem |
| 10 em | 10 rem |
| 20 em | 20 rem |
| 50 em | 50 rem |
Practical Examples of em to rem
Real-world scenarios where this conversion is useful.
Scaling body text globally
A 1.25em paragraph inside a 20px container with a 16px root converts to 1.5625rem for predictable sizing.
Building accessible buttons
Convert 0.875em padding within a 14px parent to rem so buttons respect the user's root preferences.
Designing heading hierarchies
Translate 3em h1 values into rem units to lock heading scale regardless of nested font contexts.
Standardizing component spacing
Turn 1.5em margins inside cards into rem values for consistent spacing across the entire design system.
Frequently Asked Questions
Common queries regarding this specific conversion.
Q.What is the difference between em and rem?
em is relative to the parent element's font size, while rem is relative to the root (html) font size only.
Q.How does the base font size affect em to rem conversion?
A larger root size reduces the rem value, and a smaller parent size lowers the em equivalent, shifting the final rem output.
Q.Should I use em or rem in CSS?
Use rem for global sizing like typography and spacing, and em for component-local scaling that adapts to its container.
Q.Is converting em to rem necessary for responsive design?
It is highly recommended, because rem units scale predictably with user settings and viewport changes.
Discover Related Tools
Need to convert back? Use the reverse Rem to Em calculator. For other measurements, explore our complete suite of Typography Converters or the full Unit Converter Hub.