Free. No Sign-Up Required. No Limits. Read More
REM to EM Converter
Quickly convert CSS rem units to em units.
EM Value: 0.00
Note: REM is relative to the HTML root font size. EM is relative to its parent element's font size. To convert REM to EM, we first convert REM to PX using the root font size, then convert that PX value to EM using the parent font size.
Formula: EM = (REM Value * Root Font Size) / Parent Font Size
What is a REM to EM Converter?
A REM to EM converter helps web developers translate between two relative CSS length units that behave differently depending on context. While both rem and em are relative units, rem always references the root <html> element's font size, whereas em is relative to the font size of its nearest parent element. This distinction is critical when building nested components where inherited font sizes compound. For a deeper understanding of how these units interact, see the MDN Web Docs on font-size.
How REM to EM Conversion Works
Converting REM to EM requires knowing two values: the root font size and the parent element's font size. The process first resolves the REM value to pixels, then divides by the parent font size to get the EM equivalent:
EM = REM × (Root Font Size ÷ Parent Font Size)
When the root and parent font sizes are both 16px (the common default), 1rem equals exactly 1em. However, if a parent element has font-size: 20px while the root remains 16px, then 1rem = 16px converts to 16 ÷ 20 = 0.8em in that context.
REM to EM Conversion Table
| REM | EM (root=16px, parent=16px) | EM (root=16px, parent=20px) |
|---|---|---|
| 0.5rem | 0.5em | 0.4em |
| 0.75rem | 0.75em | 0.6em |
| 1rem | 1em | 0.8em |
| 1.5rem | 1.5em | 1.2em |
| 2rem | 2em | 1.6em |
| 3rem | 3em | 2.4em |
Best Practices for REM vs EM
- Use
remfor global sizing like body text, headings, and layout spacing to maintain consistency - Use
emfor component-internal spacing (padding, margins) that should scale with the component's own font size - Avoid deeply nested
emvalues as they compound — a child with1.2eminside a parent with1.2emresults in1.44×the root size - Prefer
remwhen you want predictable, root-relative sizing across your entire stylesheet - Use
emfor button padding so it automatically scales when you change the button's font size
FAQs
What is the difference between REM and EM?
REM (root em) is always calculated relative to the root <html> element's font size, making it consistent across the entire page. EM is relative to the font size of the element's direct parent, which means it can produce different pixel values depending on where it's used in the DOM tree.
When are REM and EM equal?
REM and EM produce the same pixel value when the parent element's font size matches the root font size. With default browser settings (16px root) and no custom font sizes on parent elements, 1rem and 1em both resolve to 16px.
Why do EM values compound in nested elements?
Because EM is relative to the parent's computed font size, each nesting level multiplies the effect. If a parent has font-size: 1.2em and its child also uses 1.2em, the child's computed size becomes 1.2 × 1.2 = 1.44 times the grandparent's font size. This compounding is the main reason many developers prefer REM for most sizing.
Should I always use REM over EM?
Not necessarily. EM is ideal for component-scoped sizing where you want elements to scale proportionally with their container's font size — for example, padding inside a button that should grow when the button text gets larger. REM is better for global consistency. Most modern CSS architectures use a combination of both.
Related Tools
- PX to EM Converter – Convert pixel values directly to EM units
- REM to PX Converter – Convert REM to pixel values
- REM to Percentage Converter – Convert REM to percentage-based sizing
- PX to REM Converter – Convert pixels to root-relative REM units