Converter · CSS unit tool
REM to EM converter
There is no direct REM↔EM constant—you convert through pixels. First px = rem × rootFontSize, then em = px ÷ elementFontSize. The tool handles both steps so you can mix global and local scales safely.
Enter the REM value first.
Calculation bases
html font-size
Result
1.0000 em
1rem × 16px ÷ 16px = 1.0000em
CSS snippet
font-size: 1.0000em;
Keyboard tip: press Tab or Shift+Tab to switch fields.
How REM to EM works
REM is anchored to the document root; EM is anchored to the element. To translate between them you need both numbers. Example: 1.5rem at a 16px root is 24px, and inside a 12px element that is 24 ÷ 12 = 2em.
Change either anchor and the EM result changes, which is exactly why mixed systems need a converter rather than a memorized factor.
Mixed token systems
A common pattern: global type and layout in REM for predictability, but a few components use EM padding so their internals scale with the component's own font-size.
Keeping a conversion handy stops your spec sheets from drifting when one team writes REM and another writes EM for the same visual value.
Copy-ready examples
/* 1.5rem @16 root = 24px */ /* inside a 12px element → 2em */
Frequently asked questions
- Is there a fixed REM to EM ratio?
- Only when the element font-size equals the root font-size. Otherwise the ratio depends on both values, so convert through pixels.
- Should we standardize on one unit?
- Long term, converge on REM for layout and global type; reserve EM for component-local rhythm where scaling with the element is the goal.
- Is rem to em converter free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.