REM to EM Converter

REM → EM Converter

The value you want to express in em.
Note: For font-size, em is relative to the parent font-size. For other properties, it’s relative to the element’s own font-size.
Use Parent for font-size conversion. Use Element for other properties (em relative to element).
Optional: Fluid Root Font Size (clamp)
If Min Root = Max Root, root size is fixed (no fluid scaling).
Pixels (1rem in px at current root): —
Value in EM: —
CSS Snippet:
.element { font-size: 1em; }
💡 Quick Presets:
📊 At Different Viewports (pixel outcome of your REM):
📱 Mobile (375px): —
📱 Tablet (768px): —
💻 Desktop (1440px): —
If fluid root is enabled, 1rem changes with viewport; the computed em value stays constant.
Live Preview
Parent font-size context
This area applies the computed em to font-size.
Current window width: —

REM to EM Converter 

  • REM (Root EM): Always relative to the root <html> font size. By default, most browsers set it to 16px.
    • Example: 1rem = 16px if the root font size is 16px.
  • EM: Relative to the parent element’s font size, which makes it flexible but sometimes unpredictable if multiple nested elements scale differently.
    • Example: If a parent is 20px, then 1em = 20px.

Why Use a REM to EM Converter?

Converting between REM and EM can be tricky since one is root-based and the other is parent-based. A converter helps you:

  • Understand the relationship between global and local scaling.
  • Build responsive typography systems.
  • Avoid inconsistencies caused by nested em values.
  • Save time compared to manual calculations.

How to Use the Converter

  1. Enter your REM value.
  2. Input the root font size (default 16px).
  3. Input the parent element’s font size (default often 16px but can vary).
  4. The calculator shows the equivalent EM value.

Example:

  • Root font size = 16px
  • Parent font size = 20px
  • 1rem = 16px → 16px ÷ 20px = 0.8em

CSS output:

p {

  font-size: 1rem; /* equal to 0.8em if parent is 20px */

}

REM to EM Conversion Chart

(assuming root = 16px, parent = 16px)

REMEM EquivalentPixel Value
0.75rem0.75em12px
1rem1em16px
1.25rem1.25em20px
1.5rem1.5em24px
2rem2em32px

(If parent font size differs from root, EM values adjust accordingly.)

Best Practices for REM vs EM

  • Use REM for global sizing (body text, base typography).
  • Use EM for component-level scaling (buttons, inputs, spacing).
  • Avoid deep nesting with EM — it can lead to compounding values.
  • Combine with clamp() for fluid responsive typography.

FAQs

What is the main difference between rem and em?

  • REM = relative to the root font size.
  • EM = relative to the parent element’s font size.

Why is rem more predictable than em?
Because REM always references the root, while EM depends on the parent, which can vary in nested elements.

Can I use both rem and em in a project?
Yes. Use REM for base typography and EM for local adjustments.

What is 1rem in em?
If the parent and root font size are the same, then 1rem = 1em. If they differ, conversion depends on the ratio between root and parent.

Is em still useful if rem exists?
Yes — EM is powerful when you want scaling relative to the parent (like padding that grows with a component’s font size).