REM to EM Converter

Convert REM to EM effortlessly with our REM to EM converter. Simplify your CSS font size adjustments for responsive design with accurate conversions.

REM to EM Manual Table Conversion

We’re assuming the standard default browser font-size of 16px

EM to REM

A REM to EM converter is a CSS unit calculation tool that translates a rem value into its equivalent em value, using the root font-size and, where relevant, a parent element’s font-size. Front-end developers and designers reach for one whenever a specification arrives in rem but a component library, media query, or design system token expects em instead.

The unit itself is not a recent addition: the W3C formalized rem inside the CSS Values and Units Module Level 3 as a Candidate Recommendation in 2012, defining it as a font-relative length that always resolves against the root html element rather than a parent.

What Is a REM to EM Converter?

A REM to EM converter is a CSS unit calculation tool that turns a rem value into its matching em value, based on the root font-size and, when needed, the font-size of a parent element.

It solves a math problem developers run into constantly. Rem and em look almost identical on the page, yet they scale against completely different reference points.

Supported unit pairs:

• rem to em
• em to rem
• rem to px
• em to px

A smaller group of tools stretch into pt or percentage values too, though those pairings show up far less often in day-to-day CSS work.

Jonathan Snook’s early write-up on font-sizing with rem is still referenced in discussions around the CSS Values and Units specification, and it’s part of why so many teams reached for rem in the first place instead of sticking with plain pixels.

REM vs EM: What Is the Difference?

The core difference sits in what each unit measures against. Rem always points to the root html element, while em always points to its own parent element.

A rem value stays fixed to that single reference point across the whole page. That behavior is explained in more depth in this breakdown of what a rem actually measures in CSS.

An em value works the opposite way. It multiplies against the font-size of its nearest parent, a mechanic covered separately in this explanation of what em means in CSS.

Set the root font-size to 16px and give a nested element a value of 1.5rem, and the text renders at 24px no matter how deep it sits in the markup.

Give that same element 1.5em instead, and the rendered size depends entirely on the parent’s own font-size, not on anything set at the root.

How Does a REM to EM Converter Calculate the Value?

A REM to EM converter runs one formula. Em equals rem multiplied by the root font-size, divided by the parent font-size.

The relationship is formalized in the CSS Values and Units Module, maintained by the W3C’s CSS Working Group.

Take a rem value of 1.25, a root font-size of 16px, and a parent font-size of 20px. The math resolves to 1em, computed as 1.25 times 16, divided by 20.

Three numbers feed the formula:

• the rem value being converted
• the root font-size
• the font-size of the parent element receiving the em value

Most converters round the output to two or three decimal places. Browsers already round sub-pixel values internally, so extra digits rarely change how the text actually renders.

Default Root Font-Size in Browsers

Chrome, Firefox, Safari, and Edge all ship with a default root font-size of 16px, according to MDN Web Docs’ font-size reference.

Firefox has supported the rem unit since version 3.6, Safari since version 5, Chrome since version 4, and Edge since version 12, per web-platform-dx browser compatibility data.

That kind of cross-browser compatibility is why rem became the safer default for teams that need consistent scaling. Setting a custom rule on the root element changes every rem and em calculation that follows it, so the 16px default only holds until someone overrides it.

How Does EM Scale Differently Across Nested Elements?

Em compounds. Every nested element with its own em-based font-size multiplies against the size it inherits from its parent, and the effect stacks the deeper the markup goes.

Rem skips this entirely. It always reads from the root element, regardless of how many containers wrap around it.

Nest three span elements inside each other, each set to 1.5em, starting from a 16px root. The outer span renders at 24px, the middle at 36px, and the inner reaches 54px, even though every element uses the identical 1.5em declaration.

The same compounding logic applies wherever em drives line-height or letter-spacing, not only font-size, so the drift is not limited to text sizing alone.

Role of the Parent Element

What counts as “parent” in an em calculation:

• the nearest ancestor with an explicitly set font-size
• the inherited body or html font-size, if no ancestor sets one directly
• never the root element specifically, unless the parent happens to be the root itself

Rem ignores every one of these layers by design. That single distinction is why developers reach for a REM to EM converter instead of doing the math by hand once nesting runs more than two or three levels deep.

Should You Use REM or EM for Font-Size?

Rem and em solve different problems, so the right choice depends on what needs to stay fixed and what needs to flex.

Rem works best when a value should hold steady no matter where it sits in the page structure. Em works best when a value should scale with whatever container surrounds it.

REM strengths:

• predictable sizing across the entire document
• no compounding, so nested components never drift
• easier to reason about in large codebases with many contributors

REM trade-offs:

• less responsive to a specific component’s local context
• a single root-level change affects every rem value at once, which carries real risk on large sites

EM strengths:

• scales naturally with a component’s own font-size
• useful for padding, margin, or icon sizing that should shrink or grow alongside text

EM trade-offs:

• compounds across nested elements, which can produce unexpected sizes
• harder to predict once a component gets reused inside different containers

Many teams settle on a simple split. Rem drives the site-wide typography scale, and responsive design decisions lean on it for that reason, while em handles component-level nudges that should track a container’s own font-size.

The decision gets simpler once px is compared against rem directly. Fixed pixel values ignore a person’s font-size preferences entirely, which rules px out for most text sizing regardless of how the rem-versus-em debate settles.

When Should You Convert REM to EM Instead of Using REM Directly?

Converting rem into em makes sense the moment a value needs to track something other than the document root, most often a component’s own container.

Component-level scaling is the clearest case. A button’s padding set in em grows and shrinks alongside that button’s own font-size, without needing a separate rem-based override for every size variant.

Two situations call for it most often:

• media query breakpoints, where em has historically produced more consistent results across zoom levels than rem or px
• design system handoffs, where a spec arrives measured in rem but the component library standard runs on em

That first case ties directly back to how media queries calculate their breakpoint thresholds, since some browsers historically read em-based breakpoints differently than rem-based ones once a person changes their zoom level.

The second case shows up constantly once a project pulls typography tokens from a documented design system. The U.S. Web Design System, for one, bases its typesetting scale on rem by default, so any em-based component library needs a conversion step before the numbers line up.

How Does Unit Choice Affect Accessibility and Text Resizing?

Font-size units decide whether a page respects a person’s own text-size preferences or overrides them outright.

Rem and em both respond correctly when someone increases their browser’s default font-size, since both are relative to a font-size value the browser controls. Fixed pixel values do not, because px is defined as an absolute length rather than one tied to a person’s font-size setting.

That distinction sits at the center of web accessibility work, not just a nice-to-have for people who care about typography.

Key figures behind the accessibility case for rem and em:

• 200%, the minimum text-resize level a page must support without loss of content or function, under WCAG Success Criterion 1.4.4 (W3C)
• 2018, the year the rem unit reached Baseline Widely Available status across major browsers, according to web-platform-dx browser compatibility data
• 17px, the effective base font-size GOV.UK Frontend’s engineering team found itself working against once iOS Dynamic Type entered their rem calculations, instead of the usual 16px assumption

GOV.UK Frontend’s own team ran into that gap directly. Form inputs and select boxes originally used fixed pixel heights, which stopped scaling once a person resized their text, so the team rewrote those measurements in rem to keep the components usable at 200% zoom.

The same logic applies to body copy. Guidance on accessible typography consistently favors relative units over fixed pixel sizes for exactly this reason.

How Do Bootstrap and Tailwind CSS Configure REM and EM?

Bootstrap and Tailwind CSS both default to rem for typography, though they reach that default through different mechanisms.

Bootstrap sets its $font-size-base Sass variable to 1rem, then derives every heading size from that one variable.

Bootstrap layers a Responsive Font Sizes engine on top of that rem-based scale. It shrinks heading sizes automatically on narrower viewports, tying directly into the framework’s mobile-first design approach without extra media query rules.

Tailwind CSS takes a flatter approach. Its default theme ships ten font-size utilities, from text-xs to text-9xl, and every one resolves to a plain rem value with a matched line-height.

A few of Tailwind’s default steps:

• text-sm: 0.875rem
• text-base: 1rem, 1.5rem line-height
• text-lg: 1.125rem

Both frameworks assume a 16px root by default. Overriding the root font-size on either one shifts every utility class or Sass variable built on top of it.

When Does a REM to EM Converter Give Misleading Results?

A REM to EM converter only knows the numbers fed into it. The moment the real parent font-size differs from what was entered, the output stops matching what actually renders.

Bootstrap ran into a version of this problem directly. An em-based breakpoint tuned against an older Bootstrap 3 configuration with a 14px root produced a viewport gap between 476px and 533px once projects moved to the browser’s standard 16px root.

This lines up with why teams generally favor em over rem for breakpoint math in the first place, since rem drags the root font-size into a calculation where it doesn’t belong.

Three situations break the math:

• the parent element’s font-size gets set by JavaScript after the page loads, so the converter never sees the real value
• a browser-level user override changes the root font-size after the conversion was already calculated
• the em value gets reused on padding or margin, where the compounding reference point shifts to a different parent than the one used in the original calculation

Rem carries its own documented quirks too. Older Chrome releases showed rem-based border widths disappearing entirely when a page was zoomed out, a bug tracked directly in caniuse’s browser compatibility notes for the unit.

A converted value is a snapshot, not a guarantee. Recheck it anytime the surrounding CSS changes, and treat any responsive typography breakpoint as a candidate for retesting after a redesign.

How Do You Convert REM to EM Manually?

Manual conversion runs the same formula a converter applies automatically, just done by hand.

• 1. Find the parent element’s computed font-size using the browser’s computed style panel in DevTools.
• 2. Find the root font-size the same way, checking the html element specifically.
• 3. Multiply the rem value by the root font-size, then divide by the parent font-size.
• 4. Round the result to two or three decimal places.
• 5. Re-check the value in DevTools to confirm it renders as expected.

Run those steps against a rem value of 0.875, a root font-size of 16px, and a parent font-size of 24px. The result comes out to roughly 0.583em.

The most common mistake is skipping step two and assuming the root font-size is always 16px. Plenty of sites override it, including ones using the well-known 62.5% trick to make rem math land on round numbers.

How Do You Convert REM to EM Using Sass?

Sass handles rem-to-em conversion at build time, before any CSS reaches the browser.

sass-rem, a widely used Sass module:

• converts px values to rem through a single function call
• defaults its baseline to 16px, matching the common browser default
• supports an optional pixel fallback for older browsers

sass-rem’s own documentation sets its baseline variable to 16px by default, with pixel fallbacks turned off unless a project explicitly enables them.

None of this touches em directly, since Sass math runs before the browser resolves any parent font-size. A mixin can output a rem or em value, but it cannot know what a real parent element’s rendered font-size will be once the page loads.

The same author behind sass-rem also maintains sass-em, which handles the equivalent conversion for em values using its own local baseline argument instead of a single global one.

Which Tools Convert REM, EM, and PX Together?

postcss-pxtorem defaults its rootValue option to 16 and its unitPrecision to 5 decimal places, per the plugin’s own documentation.

Browser DevTools stays the most reliable check of the four. It reads whatever the browser actually rendered rather than a value calculated ahead of time.

Teams building fluid type scales instead of fixed conversions often reach for a CSS clamp calculator to blend rem, viewport width, and a preferred size into one formula.

For a broader side-by-side beyond just these four tools, this comparison of em and rem walks through the full decision from scratch.

FAQ on Rem To Em Converter

What does rem stand for in CSS?

Rem stands for root em. It measures relative to the font-size set on the root html element, not the parent element em normally uses. The name distinguishes it from em, which measures against whatever font-size the nearest ancestor happens to have.

What does em stand for in CSS?

Em traces back to typography, where it referred to the width of a capital M in a given typeface. In CSS, an em unit multiplies against the font-size of its parent element, making it a relative rather than an absolute length.

What common mistakes happen when converting CSS units?

The most frequent mistake is assuming a 16px root font-size without checking for an override. Others include reusing an em value across different parent contexts, and forgetting that nested em values compound instead of staying fixed like rem.

Can you convert em back to rem, and does the formula reverse?

Yes. Rem equals em multiplied by the parent font-size, divided by the root font-size, the exact inverse of the rem-to-em formula. The math only holds if the same parent and root values from the original conversion still apply.

Is rem always equal to 16px?

No. Rem equals 16px only when the root font-size stays at the browser default. Setting a custom font-size on the html element, or a browser-level user override, changes what one rem resolves to across the entire page.

Do rem and em affect line-height and letter-spacing the same way?

Yes, the same compounding rules apply. A line-height or letter-spacing value set in em still multiplies against the parent’s font-size, while the same properties set in rem stay tied to the root, regardless of which property carries the unit.

What Should You Check Before Trusting a REM to EM Converter’s Output?

A REM to EM converter’s output only holds once someone confirms the parent font-size it assumed actually matches what the browser renders, since the tool calculates from entered numbers rather than live computed styles.

Three checks matter, in order.

• confirm the root font-size on the html element
• confirm the actual parent font-size in DevTools
• lock the resulting em value into a design token so it doesn’t drift

Rem reached Baseline Widely Available browser support in 2018, which means the 200% text-resize threshold required under WCAG Success Criterion 1.4.4 has been achievable with rem-based sizing in every major browser without a pixel fallback, a combination neither fact states on its own.

Anyone building a fluid type scale beyond fixed rem and em values eventually runs into CSS viewport units, the next layer of relative sizing worth understanding once font-size math feels solid.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026