EM to REM Converter
Convert between em and rem units instantly. Configurable parent and root font sizes.
em is relative to the font size of the parent element. If a parent has font-size: 20px, then 1.5em equals 30px. This makes em values context-dependent - the same em value can mean different pixel sizes in different parts of your layout.
rem stands for "root em." It is always relative to the font-size of the <html> element, typically 16px by default in browsers. This makes rem predictable and consistent across your entire document.
The formula: rem = (em × parent size) ÷ root size. For example: (1.5em × 16px) ÷ 16px = 1.5rem. When parent and root are the same, em and rem are always equal.
When to use which? Use rem for global sizing (font sizes, spacing) for consistency. Use em when you want a component to scale relative to its own context, like padding on a button.
| EM | REM | PX (via em) | PX (via rem) |
|---|
What Is an EM to REM Converter?
An EM to REM converter translates between two of CSS's most important relative units. Both are essential for responsive, scalable design. But they behave differently, and confusing them leads to layouts that break in unexpected ways.
The Core Difference
em is relative to its parent element's font size. rem is relative to the root (<html>) font size. Simple in theory. In practice, em values compound through nested elements, which can cause unintended size cascades.
rem eliminates that problem. It always refers to a single, consistent reference point.
The Formula
rem = (em × parent font size) ÷ root font size
With the browser default of 16px for both parent and root, 1.5em and 1.5rem are identical. Change either size and they diverge.
When to Use Each Unit
- rem for global typography, spacing, and layout: anything that should stay consistent regardless of context.
- em for component-level sizing (padding, margins, icon sizes) that should scale with the component's own font size.
- Mixing both is valid and common. The key is being intentional.
Common Conversion Reference
At the standard 16px root size:
| EM / REM | Pixels | Use case |
|---|---|---|
0.75rem | 12px | Small labels, captions |
0.875rem | 14px | Body text (compact) |
1rem | 16px | Base body text |
1.125rem | 18px | Comfortable reading size |
1.5rem | 24px | Subheadings |
2rem | 32px | Section headings |
3rem | 48px | Display / hero text |
Why This Matters for Accessibility
Users can set a preferred font size in their browser. Layouts built with rem and em respect that preference. Pixel-based layouts do not. This is not a minor detail - it directly affects readability for users with visual impairments.
Using relative units is one of the simplest, highest-impact accessibility wins available to any front-end developer.
Further reading: MDN: CSS Values and Units · W3C CSS Values Spec
What Is the Difference Between EM and REM in CSS?
Em is relative to the font size of the parent element. Rem is relative to the font size of the root <html> element. Both are scalable CSS length units that meet web accessibility standards, unlike fixed pixel values (LogRocket, 2024).
|
Feature |
em |
rem |
|---|---|---|
|
Reference point |
Parent element font size |
Root |
|
Nesting behavior |
Compounds with each level |
Stays consistent |
|
Predictability |
Varies by context |
Fixed to one source |
|
Best use case |
Component-internal scaling |
Global typography and spacing |
How Em Inheritance Creates Compounding Values
Each nested element using em multiplies the inherited value from its parent.
A child set to 1.5em inside a parent with font-size: 1.2em resolves to 1.8em relative to the root, not 1.5rem. Add another level of nesting and the math gets messier fast.
This is the core problem with using em across a component tree. Button padding, icon sizing, line height, any property set in em inside a deeply nested component can produce unexpected sizes that are tricky to trace back without a converter.
Why REM Eliminates Inheritance Complexity
Rem always references the root, regardless of nesting depth.
Major CSS frameworks adopted rem for this reason:
-
Tailwind CSS uses rem for all spacing, sizing, and typography utilities
-
Bootstrap shifted from px to rem in version 4 for consistent scaling
-
Foundation and Bulma also rely on rem for component spacing
The Web Almanac (HTTP Archive, 2024) found em units on 9% of desktop pages (up from 6% in 2022), while rem appeared on 4%. Px still dominates at 65%. That gap shows most developers haven't fully committed to scalable units, despite the accessibility case for them.
What Is the Formula to Convert EM to REM?
The formula is: rem = em ÷ (parent font size ÷ root font size).
When parent and root font sizes match (the default case), 1em equals 1rem. The conversion only produces a different number when the parent font size differs from the root.
Base Formula and Worked Examples
Three scenarios:
-
Parent = root (16px both):
1.5em ÷ (16 ÷ 16) = 1.5rem -
Parent is 20px, root is 16px:
1.5em ÷ (20 ÷ 16) = 1.2rem -
Parent is 12px, root is 16px:
1.5em ÷ (12 ÷ 16) = 2rem
The third case surprises people. A smaller parent makes each em unit worth more in rem terms, not less.
Why Root Font Size Is the Anchor
The browser default root font size is 16px across all major browsers, including Chrome, Firefox, and Safari (MDN Web Docs).
Change the root size and every rem value on the page shifts. This is intentional. It's what allows a single CSS rule on html {} to scale an entire layout up or down. That's also why a rem-based layout respects user browser font size preferences automatically.
How Does the EM to REM Converter Work?
The converter takes 3 inputs: the em value, the parent element font size in px, and the root font size in px. It outputs the calculated rem value using the formula above.
Input fields:
-
Em value: the CSS measurement you want to convert (e.g.,
1.5) -
Parent font size: the font size of the parent element in pixels (default: 16px)
-
Root font size: the base font size set on the
<html>element (default: 16px)
Real-time output means you see the result as you type. Change the root font size from 16px to 10px (a common developer base reset) and the rem output updates immediately to reflect the new scale.
Some converter tools also support bulk input, where you paste a list of em values and get all rem equivalents at once. Useful when refactoring a large stylesheet.
Related tools for adjacent conversions: EM to PX for checking pixel output, and REM to PX for going back to absolute values.
EM to REM Conversion Table
The table below uses a default root font size of 16px and assumes parent font size matches the root. Both columns match under these conditions because em ÷ (16 ÷ 16) = em × 1.
|
Em Value |
REM Equivalent |
PX Equivalent |
|---|---|---|
|
0.25em |
0.25rem |
4px |
|
0.5em |
0.5rem |
8px |
|
0.75em |
0.75rem |
12px |
|
1em |
1rem |
16px |
|
1.25em |
1.25rem |
20px |
|
1.5em |
1.5rem |
24px |
|
1.75em |
1.75rem |
28px |
|
2em |
2rem |
32px |
|
2.5em |
2.5rem |
40px |
|
3em |
3rem |
48px |
|
4em |
4rem |
64px |
What Changes When Root Font Size Is 10px
Developers who apply html { font-size: 62.5%; } shift the root to 10px, making 1rem = 10px.
Under that base, the same em values produce different rem outputs:
-
1em (with 16px parent)becomes1.6rem -
1.5em (with 16px parent)becomes2.4rem -
2em (with 16px parent)becomes3.2rem
The 62.5% trick makes the math easier to do in your head. The tradeoff is covered in the next section.
When Should You Use REM Over EM in CSS?
Use rem for global spacing, font sizes, and layout dimensions. Use em for component-internal proportional scaling where an element should size relative to its own context.
The practical split most production codebases land on:
-
REM: body font size, heading scale, container padding, layout margins, media query breakpoints
-
EM: button padding (scales with button font size), icon size relative to surrounding text, line height within a specific component
The Accessibility Argument for REM
Rem respects the user's browser font size preference. Px does not.
When a user increases their default font size from 16px to 20px in browser settings, every rem-based value on the page scales up accordingly. Elements sized in px stay fixed. The Web Almanac (HTTP Archive, 2024) noted that px still dominates at 65% of pages, meaning most sites currently override what users have set at the browser level.
McKinsey data shows consumer companies lose $6.9 billion annually because of inaccessible websites. Rem-based font sizing is a low-effort starting point for addressing that gap.
When EM Is the Right Choice
Em makes sense inside components where proportional scaling between elements matters.
A button with font-size: 1rem and padding: 0.75em will scale its padding relative to the button text size. Increase the button font size and the padding grows with it. Set that padding in rem and it stays fixed regardless of the text size, which can produce awkward visual ratios at larger type sizes.
How Does Root Font Size Affect EM to REM Conversion?
Changing the root font size shifts the output of every rem-based value on the page, which directly changes what any em-to-rem conversion produces.
3 common root font size setups:
-
16px (browser default):
1rem = 16px. Used in Tailwind, Bootstrap 4+, and most modern codebases -
10px via 62.5% reset:
1rem = 10px. Used by developers who prefer simpler mental math -
Custom px values: Some design systems define their own root for brand-specific scaling
The 62.5% Root Reset
Setting html { font-size: 62.5%; } makes 1rem = 10px, so 1.6rem = 16px and 2.4rem = 24px.
Took me a while to understand why experienced developers argue against this despite it being everywhere in tutorials. The problem is it overrides the user's browser font size preference. If a user has set their default to 20px for readability, 62.5% of 20px gives you 12.5px as your base, not 10px. The math "trick" falls apart and accessibility suffers.
The Refine dev team (2024) put it clearly: avoid html { font-size: 62.5%; } solely to make 1rem = 10px, as it can conflict with user accessibility settings.
How Major Browsers Handle Root Font Size
All major browsers (Chrome, Firefox, Safari, Edge) default to 16px for the root font size.
Users can change this in browser settings. Chrome: Settings > Appearance > Font size. Firefox: Preferences > Language and Appearance > Fonts. That user-set value becomes the base for every rem calculation on every page. A rem-based stylesheet inherits that preference automatically. A px-based stylesheet ignores it entirely.
For a full picture of how px values compare across unit types, the PX to EM converter covers the reverse calculation when working from a pixel-first starting point.
What Are Common EM to REM Conversion Mistakes?
4 mistakes come up repeatedly when converting em to rem, and most of them trace back to a single wrong assumption: that parent font size always equals root font size.
|
Mistake |
Why It Happens |
Result |
|---|---|---|
|
Assuming parent = root |
Default case feels universal |
Wrong rem output in nested contexts |
|
Ignoring em compounding |
Single-level thinking |
Undersized or oversized values |
|
Using rem for component padding |
Misunderstanding unit scope |
Padding doesn't scale with button text |
|
Not retesting after root change |
Set-and-forget workflow |
Entire layout shifts unexpectedly |
Assuming Parent Font Size Always Matches Root
The most common error. Developers converting 1.5em to 1.5rem assume parent and root are both 16px.
That's only true at the top level. Inside a card component with font-size: 14px, that same 1.5em becomes 1.3125rem, not 1.5rem.
Always check the computed parent font size in Chrome DevTools (Elements panel, Computed tab) before converting.
Ignoring the Compounding Effect of Nested Em Units
A single em value looks simple. Nesting breaks that.
1.2em inside a parent already set to 1.2em resolves to 1.44em of root. A third level at 1.2em pushes that to 1.728em. Most developers don't catch this until the text renders visibly wrong in the browser.
Quick check: use the Type Scale Generator to preview what nested em values actually produce at each scale step before committing to a conversion.
Using REM for Padding Inside Components
Rem for component-internal padding produces layouts that don't scale proportionally.
A button with font-size: 1.5rem and padding: 0.5rem will keep that padding fixed even when the text grows. Setting padding: 0.5em instead ties the padding to the button's own font size, so the ratio stays consistent at any size.
How Do Design Tools Handle EM and REM Units?
Figma outputs all measurements in pixels. Dev Mode converts those to rem on inspection, but always assumes 1rem = 16px regardless of the actual root font size in the codebase (Tokens Studio docs, 2024).
That gap creates a recurring problem: designs look correct in Figma, then render at unexpected sizes once a custom root font size is applied in CSS.
How Figma Handles REM Conversion
Figma doesn't natively support rem in Design Mode.
Dev Mode shows a loose px-to-rem conversion during handoff, assuming 1rem = 16px. The Tokens Studio plugin for Figma improves this by converting rem values to pixels using a configurable Base Font Size token, which can be set per brand or theme (Tokens Studio, 2024).
Workarounds designers use:
-
Annotating specs with rem equivalents next to px values
-
Building a px-to-rem reference chart in a shared Figma component page
-
Using the "Convert to REM" community plugin for in-file inspection
Chrome DevTools and Firefox DevTools
Both browsers show computed px values in the Elements panel.
DevTools workflow for em-to-rem conversion:
-
Inspect the element, open the Computed tab
-
Find the resolved
font-sizein px for the parent element -
Use that value as your parent font size input in the converter
Firefox DevTools also flags accessibility issues related to fixed font sizes in the Accessibility panel, making it useful for spotting places where px is blocking user browser preferences.
VS Code and Build-Time Tools
The px to rem extension by Marco Orlandin converts values inline in VS Code as you type.
PostCSS plugins like postcss-pxtorem and postcss-rem handle conversions at build time. postcss-pxtorem targets font-related properties by default (font-size, line-height, letter-spacing) and leaves borders and shadows in px, which matches standard practice. The rootValue config option must match the actual root font size in the project, or every converted value will be wrong.
How to Convert EM to REM in CSS Preprocessors?
Sass and PostCSS both support em-to-rem conversion through functions, mixins, and plugins. The main difference is when the conversion happens: Sass converts at compile time, PostCSS at build time.
Converting EM to REM in Sass
Sass handles this with a custom function that takes an em value and the parent context as inputs.
@function em-to-rem($em, $parent-size: 16, $root-size: 16) {
@return ($em * $parent-size / $root-size) * 1rem;
}
// Usage
.heading {
font-size: em-to-rem(1.5, 20); // parent is 20px, root is 16px → 1.875rem
}
The sass-rem library (GitHub: pierreburel/sass-rem) provides a ready-built rem.convert() function with configurable baseline. Version 3.0+ uses Sass Modules (@use), replacing the older @import syntax.
Converting EM to REM with PostCSS
PostCSS postcss-rem converts values at build time using the rem-convert() function in CSS.
Note: the function was renamed from rem() to rem-convert() in version 3.0 because native CSS now uses rem() for calculating remainders, causing a naming conflict (postcss-rem changelog, 2024).
When to use each:
-
Sass function: best for component-level conversions where context varies
-
PostCSS plugin: best for converting an entire legacy stylesheet in one pass
How Is EM to REM Conversion Used in Responsive Typography?
Rem-based typography is the foundation for fluid type systems. The clamp() function uses rem for both minimum and maximum bounds, allowing text to scale smoothly across viewport widths while still responding to user browser font size preferences.
Utopia (utopia.fyi) generates CSS custom properties using clamp() with rem units, outputting a full type scale like --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem) for a base step between two viewport sizes (Utopia, 2024).
CSS clamp() and Rem-Based Fluid Type
Basic fluid type structure:
h1 {
font-size: clamp(1.5rem, 0.938rem + 2.5vw, 2.5rem);
}
The 1.5rem minimum and 2.5rem maximum use rem so they scale with user font preferences. The middle value mixes vw with rem for the fluid interpolation.
Smashing Magazine (2022) highlighted that using px instead of rem for clamp() min and max bounds fails WCAG 1.4.4 Resize Text (AA), because px values don't respond to browser zoom preferences. Rem-based bounds are required for accessible fluid typography.
Type Scale Generators and REM Output
Utopia outputs all steps as rem-based clamp() values, ready to paste into CSS custom properties.
Modular Scale (modularscale.com) generates static rem values based on a chosen ratio (Major Third, Perfect Fifth, etc.) without fluid scaling. Both approaches depend on understanding what your root font size is before copying any values into a project.
The Type Scale Generator tool gives you a live preview of rem-based scale steps, which is useful for checking how a type scale looks before converting em values from an existing system into rem equivalents.
How REM Preserves Accessibility in Fluid Type
Using rem for clamp() bounds means the entire scale shifts up when a user increases their browser font size.
Set your default at 18px instead of 16px? Every rem-based step adjusts. The visual hierarchy stays proportionally intact. Compare this to a vw-only approach: viewport units don't respond to browser zoom at all, which is why the W3C recommends combining vw with a rem component in clamp() rather than using vw alone (MDN Web Docs).
For adjacent unit conversions in a fluid type workflow, the PX to REM and CM to PX converters cover the upstream conversions before values reach the rem stage.
FAQ on Em To Rem Converter
Is 1em Always Equal to 1rem?
Only when the parent element's font size matches the root font size.
If a parent is set to 20px and the root stays at 16px, then 1em equals 1.25rem. They diverge the moment any ancestor element has a non-default font size.
What Is the Default Root Font Size in Browsers?
All major browsers, including Chrome, Firefox, Safari, and Edge, default to 16px for the root <html> element.
That makes 1rem = 16px the standard baseline unless a developer explicitly overrides it in CSS.
Why Does My EM Value Look Different After Converting to REM?
You're likely converting from a context where the parent font size differs from the root.
The em unit inherits from its parent, so a 1.5em value inside a 14px parent resolves to 1.3125rem, not 1.5rem.
Does the 62.5% Root Font Size Trick Affect EM to REM Conversion?
Yes, significantly. Setting html { font-size: 62.5%; } makes 1rem = 10px, which changes every conversion output.
A 1.5em value with a 16px parent now converts to 2.4rem instead of 1.5rem.
Can I Use EM and REM Together in the Same CSS File?
Yes, and many production codebases do exactly this.
Use rem for global spacing and typography. Use em for component-internal properties like button padding, where proportional scaling relative to the component's own font size is the goal.
Does REM Work With CSS clamp() for Fluid Typography?
It does, and it's the recommended approach.
Using rem for the minimum and maximum bounds inside clamp() ensures the type scale responds to user browser font preferences, which px-based bounds cannot do. Tools like Utopia generate these values automatically.
What Happens to REM Values When a User Changes Browser Font Size?
Every rem-based value on the page scales proportionally with the user's preference.
A user who sets their browser default to 20px instead of 16px will see all rem values increase by 25%. Px-based values stay fixed and ignore that preference entirely.
How Do I Convert EM to REM Inside Sass?
Write a custom function that divides the em value by the ratio of parent to root font size.
The open-source sass-rem library (GitHub: pierreburel) handles this with a configurable baseline. Version 3.0+ uses @use syntax and the rem.convert() function.
Does Figma Support REM Units Natively?
Not in Design Mode. Figma outputs all measurements in pixels.
Dev Mode shows a px-to-rem conversion during handoff, but it assumes 1rem = 16px regardless of the project's actual root. The Tokens Studio plugin adds a configurable Base Font Size to fix this.
What Is the Difference Between EM to REM and PX to REM Conversion?
The PX to REM conversion is simpler: divide the px value by the root font size.
EM to REM conversion adds one extra step. You must account for the parent element's font size before dividing by the root, because em values are not absolute.