Convert pixels to REM and EM units instantly. Free CSS unit converter for responsive web design. Supports custom font sizes and real-time calculations for accurate results.
Convert between pixels (PX), root em (REM), and em (EM) units. Enter a value in any field to see the equivalent values in the other units.
When you're building responsive websites, one of the most common challenges is translating design specs into flexible, scalable CSS. You've probably seen a Figma design with "padding: 24px" and wondered whether to keep it as pixels or convert to rem units. That decision impacts everything from accessibility to how your layout responds when users adjust their browser's font size.
This PX, REM, and EM unit converter helps you quickly translate between these three fundamental CSS units. Pixels give you precise control—great for borders and fine details. REM units scale with the root font size, making them ideal for consistent spacing and typography across your entire site. EM units scale relative to their parent element, perfect for creating self-contained components that maintain proportions.
The tricky part? Converting between them requires accounting for font sizes, which vary between your root element and individual components. A common mistake I see developers make is using pixels everywhere because it seems simpler. While that works initially, it creates accessibility issues when users increase their browser's default font size—the layout doesn't adapt proportionally.
Pixels (PX) represent the most straightforward CSS unit—what you specify is what you get. A CSS pixel is a reference unit, not necessarily a physical screen pixel (especially on high-DPI displays like Retina screens). They provide fixed sizing that doesn't change based on font sizes or parent elements.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6When pixels work well:
The catch: Pixels don't respect user preferences. If someone increases their browser's default font size from 16px to 20px for better readability, pixel-based layouts remain unchanged, potentially making text overflow containers or creating cramped spacing.
REM (root em) units scale based on the root element's font size—usually the <html> element. Most browsers default to 16px, so 1rem equals 16px unless you change the root font size. Here's what makes REMs powerful: they provide consistent, predictable scaling across your entire site.
1html {
2 font-size: 16px; /* Default in most browsers */
3}
4
5.element {
6 width: 12.5rem; /* Equivalent to 200px with default root font size */
7 font-size: 1rem; /* Equivalent to 16px */
8 margin: 0.625rem; /* Equivalent to 10px */
9}
10Why developers prefer REM units:
Pro tip from experience: Set your root font size to 62.5% (which makes 1rem = 10px with the default 16px base). This makes mental math easier—1.6rem = 16px, 2.4rem = 24px. Just remember to set your body font-size back to 1.6rem so text defaults to 16px. According to the W3C CSS Values and Units specification, REM units always reference the root element, making them predictable in complex layouts.
EM units scale relative to their parent element's font size, making them context-aware. This behavior differs from REM units, which always reference the root. The name "em" comes from typography—it historically referred to the width of the capital letter "M" in a given typeface.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Equivalent to 16px (20px × 0.8) */
7 margin: 0.5em; /* Equivalent to 8px (16px × 0.5) */
8}
9When EM units shine:
line-height: 1.5em)The compounding trap: Here's where developers often get stuck. EM units cascade through nested elements, which can create unexpected results:
1.level-1 { font-size: 1.2em; } /* 19.2px if parent is 16px */
2.level-2 { font-size: 1.2em; } /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; } /* 27.65px (23.04px × 1.2) */
4After three levels of nesting, your text has grown by 73% instead of the intended 20%. This is why many developers switched to REM units for typography once browser support improved.
Understanding the mathematical relationships between PX, REM, and EM units is crucial for accurate conversions. Here are the formulas used in our converter:
To convert pixels to REM units, divide the pixel value by the root font size:
For example, with the default root font size of 16px:
To convert pixels to EM units, divide the pixel value by the parent element's font size:
For example, with a parent font size of 16px:
To convert REM units to pixels, multiply the REM value by the root font size:
For example, with the default root font size of 16px:
To convert EM units to pixels, multiply the EM value by the parent element's font size:
For example, with a parent font size of 16px:
To convert REM units to EM units, you need to account for both the root font size and the parent element's font size:
If both the root and parent font sizes are the same (e.g., 16px), then 1rem = 1em.
To convert EM units to REM units, use the following formula:
Again, if both font sizes are equal, then 1em = 1rem.
Getting accurate conversions is straightforward with this tool. The key is understanding which font sizes to use for your specific situation.
<html> element (usually 16px)The converter defaults to 16px for both root and parent font sizes because that's the browser standard. But here's what matters: your actual project might use different values.
Finding your root font size: Open your browser's developer tools, inspect the <html> element, and check the computed font-size. If you've set html { font-size: 62.5%; }, your root font size is 10px (62.5% of 16px).
Finding your parent font size: For EM conversions, you need the font size of the specific parent element where you're applying the style. Inspect that element in dev tools to see its computed font-size. If the parent has font-size: 1.2rem and your root is 16px, set the parent font size to 19.2px for accurate EM calculations.
From design to code: Your Figma file shows padding: 24px. You want to use REM units for better accessibility. Enter 24 in the PX field, and you'll see it equals 1.5rem (assuming 16px root).
Building a button component: You want the padding to scale with the button's font size. If the button has font-size: 1.125rem (18px), set the parent font size to 18, enter your desired pixel padding, and use the resulting EM value.
Responsive typography: You're creating a heading that's 32px on desktop. Enter 32px to see it's 2rem, which will scale appropriately when users adjust their browser's font size.
Knowing the formulas is one thing—applying them effectively in production code is another. Here's where unit conversion makes a tangible difference in your projects.
You receive a Figma design with everything specified in pixels. The card component shows:
Converting these to REM units (assuming 16px root) gives you:
1.card {
2 padding: 1.5rem; /* 24px → 1.5rem */
3 margin-bottom: 2.5rem; /* 40px → 2.5rem */
4}
5
6.card__heading {
7 font-size: 1.75rem; /* 28px → 1.75rem */
8}
9
10.card__body {
11 font-size: 1rem; /* 16px → 1rem */
12}
13What's the benefit? When a user with vision impairment increases their browser's default font size from 16px to 20px, your card scales proportionally. The padding, margins, and text all grow by 25%, maintaining the design's visual balance. With pixel values, only the text would grow, breaking the layout.
Component libraries need buttons that work at any size—small, medium, large. Using EM units for padding creates self-contained scaling:
1.button {
2 /* Base button at 16px font size */
3 font-size: 1rem;
4 padding: 0.75em 1.5em; /* 12px 24px at base size */
5 border: 1px solid currentColor;
6 border-radius: 0.25em;
7}
8
9.button--large {
10 font-size: 1.25rem; /* 20px */
11 /* Padding automatically becomes 15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15 font-size: 0.875rem; /* 14px */
16 /* Padding automatically becomes 10.5px 21px (0.75em × 14px) */
17}
18The padding scales automatically because it's defined in EM units relative to the button's font size. You define the proportions once, and they work across all size variants. This approach, recommended in modern CSS architecture patterns, reduces code and maintains visual consistency.
Typography systems work best with a consistent scale. Using REM units makes this straightforward:
1/* Modular scale based on 1.25 ratio (major third) */
2:root {
3 --text-xs: 0.64rem; /* 10.24px */
4 --text-sm: 0.8rem; /* 12.8px */
5 --text-base: 1rem; /* 16px */
6 --text-lg: 1.25rem; /* 20px */
7 --text-xl: 1.563rem; /* 25px */
8 --text-2xl: 1.953rem; /* 31.25px */
9 --text-3xl: 2.441rem; /* 39px */
10 --text-4xl: 3.052rem; /* 48.8px */
11}
12
13h1 { font-size: var(--text-4xl); }
14h2 { font-size: var(--text-3xl); }
15h3 { font-size: var(--text-2xl); }
16h4 { font-size: var(--text-xl); }
17p { font-size: var(--text-base); }
18This approach, detailed in the CSS Custom Properties documentation, centralizes your scale. When users change their font size preferences, the entire hierarchy scales proportionally, maintaining visual relationships.
Pro tip: Use the converter to create your scale, but round to sensible values. 1.5625rem looks precise in code but 1.563rem is close enough and easier to read.
Design tools like Figma, Sketch, and Adobe XD work exclusively in pixels. Your design system should work in relative units. This converter bridges that gap.
Workflow I've found effective:
For example, if your design uses 8px, 16px, 24px, 32px, and 48px spacing throughout, convert them once:
1:root {
2 --space-1: 0.5rem; /* 8px */
3 --space-2: 1rem; /* 16px */
4 --space-3: 1.5rem; /* 24px */
5 --space-4: 2rem; /* 32px */
6 --space-6: 3rem; /* 48px */
7}
8Now when the design shows "32px margin," you code margin: var(--space-4). The design stays pixel-perfect at default zoom while remaining accessible at any font size.
While this converter focuses on the three most common units, CSS offers other options for specific scenarios:
Viewport units (vw, vh, vmin, vmax): These scale with the browser window size. 1vw = 1% of viewport width, 1vh = 1% of viewport height. Great for hero sections that should always fill the screen, though be careful—they don't respect user font size preferences, which can create accessibility issues for text content.
Percentages (%): Relative to the parent element's dimensions. Still widely used for layout widths (width: 50%) and responsive containers. Unlike REM/EM, percentages for width/height reference dimensions, not font size.
CH units: Based on the width of the "0" character in the current font. Useful for creating text containers with optimal line lengths—max-width: 60ch creates lines about 60 characters wide, which is comfortable for reading.
clamp(), min(), max(): These CSS functions combine different units dynamically. font-size: clamp(1rem, 2.5vw, 2rem) creates fluid typography that scales with viewport size but stays within boundaries. This is gaining traction for responsive type scales according to modern CSS techniques on MDN.
The shift from pixels to relative units mirrors the web's journey from static documents to responsive applications. Understanding this history explains why we convert between units today.
Early websites were designed for specific screen widths—640px, then 800px, then 1024px. CSS layouts used pixels exclusively because that's what print designers understood. Sites looked identical across browsers (when they worked at all), but they broke completely on unexpected screen sizes. The web was treated like print: fixed, controlled, predictable.
EM units existed in the CSS spec, inherited from typography, but most developers avoided them. The compounding behavior was confusing, and there were no mobile devices forcing us to think flexibly.
The iPhone changed everything. Suddenly, a significant portion of traffic came from 320px-wide screens. Pinch-to-zoom helped, but websites designed for 1024px desktops were painful on mobile.
Ethan Marcotte's 2010 article on responsive web design crystallized a new approach: fluid grids, flexible images, and media queries. Relative units became essential, not optional. But EM units' cascading behavior caused bugs in complex layouts.
CSS3 introduced the REM unit around 2010, solving EM's biggest problem: compounding. REM gave us relative scaling without the inheritance complexity. Internet Explorer 9 added support in 2011, and by 2015, REM units were mainstream.
Today, the best practices combine units strategically. REM for typography and spacing. EM for component-internal proportions. Pixels for fine details. Modern CSS functions like clamp() mix these units dynamically, creating layouts that adapt to any context.
This evolution—from rigid pixels to flexible relative units—reflects user expectations shifting from "websites should look the same everywhere" to "websites should work well everywhere."
1// Convert between PX, REM, and EM units
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Example usage
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Base font sizes */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Common pixel values converted to REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Typography scale */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Usage example */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// SCSS functions for unit conversion
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Usage example
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Using parent font size (18px) for em conversion
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Convert pixels to REM units"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Convert REM units to pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Convert pixels to EM units"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Convert EM units to pixels"""
15 return em * parent_font_size
16
17# Example usage
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21After reviewing hundreds of codebases, I've noticed these mistakes come up repeatedly. Avoiding them will save you debugging time.
The problem: You convert 24px to 1.5rem assuming the default 16px root font size, but your project uses html { font-size: 62.5%; }, which makes the root 10px. Your element ends up 15px instead of 24px.
The fix: Always check your project's actual root font size before converting. Set the converter's root font size to match your project's reality.
The problem: You build a card component with font-size: 1.2em for headings. Works great. Then you nest a card inside another card, and suddenly the inner card's heading is 1.44em (1.2 × 1.2), not 1.2em.
The fix: Use REM units for typography unless you specifically want the cascading behavior. Reserve EM units for spacing that should scale with the local font size.
The problem: You convert border: 1px to border: 0.0625rem for consistency. When users zoom or change font sizes, your borders become fat and ugly.
The fix: Keep borders in pixels. Sub-pixel borders (0.5px) have inconsistent browser support, and borders rarely need to scale with text.
The problem: You write @media (min-width: 768px) for a tablet breakpoint. Users who set a larger default font size don't get the tablet layout when they should.
The fix: Use EM or REM units in media queries: @media (min-width: 48em). This respects user font preferences, as recommended by the MDN responsive design documentation.
The problem: Your Sass uses one calculation method, your JavaScript uses another, and your mental math uses a third. Results don't match, causing pixel-pushing frustration.
The fix: Use this converter as the source of truth. Bookmark it, reference it during code reviews, and ensure everyone on your team uses the same conversion methodology.
The reference point differs completely. REM units always look at the root <html> element's font size—no matter how deeply nested your element is, 1rem equals the same computed value. EM units look at their immediate parent's font size, which creates a cascading effect.
Think of it this way: if you nest three <div> elements, each with font-size: 1.2em, the innermost div's text will be significantly larger than you expected because each level compounds the multiplication. With font-size: 1.2rem at each level, all three divs have identical font sizes because they all reference the root.
This is why REM became popular for typography once browser support improved—it eliminates the mental overhead of tracking inheritance chains.
No single unit wins in every situation. The best responsive designs combine units strategically:
Use REM for: Global spacing, typography scales, component gaps, and any measurement that should scale with the user's font preferences
Use EM for: Component-internal spacing (button padding, card gaps), media queries (they respect user preferences), and elements that should scale with their local context
Use pixels for: 1px borders (they look crisp), box-shadows (subtle shadows need precision), and SVG stroke widths
Use percentages or viewport units for: Container widths, full-height sections
I've seen codebases try to use a single unit everywhere—it always creates maintenance headaches. Use each unit where it provides the most benefit.
The 16px standard emerged from readability research showing this size works well for body text at typical screen viewing distances. It's large enough to be comfortable for extended reading without making pages feel oversized.
There's an interesting historical note: early web designers often set font-size smaller (12px or 13px) to fit more content. The web standards community pushed back, recognizing that accessibility required larger default text. The W3C Web Content Accessibility Guidelines recommend ensuring text can scale to 200% without loss of functionality—which only works well when you start from a reasonable baseline like 16px.
Some users change their browser's default to 18px or 20px for better readability. REM-based layouts respect this preference automatically.
Absolutely. Negative values work with pixels, REM, and EM units for properties that accept them—primarily margins, transforms, and positions. Common use cases include:
1.element {
2 margin-top: -2rem; /* Pull element upward */
3 margin-left: -20px; /* Extend beyond container */
4 transform: translateX(-1.5em); /* Shift left */
5}
6The converter handles negative values correctly. Just remember that negative padding isn't valid in CSS—browsers ignore it.
EM units compound when elements are nested. For example:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10This compounding effect can be useful for creating proportional designs but requires careful management to avoid unintended scaling.
High-DPI displays are handled automatically when using relative units like REM and EM. Since these units are based on the font size rather than physical pixels, they scale appropriately on high-resolution screens. For images and borders, consider using media queries with device-pixel-ratio or resolution.
Browser support for REM and EM units in media queries has improved significantly. Using EM units in media queries is generally recommended because:
1/* Using EM units for media queries */
2@media (min-width: 48em) { /* 768px with 16px base */
3 /* Tablet styles */
4}
5
6@media (min-width: 64em) { /* 1024px with 16px base */
7 /* Desktop styles */
8}
9Most design tools work primarily with pixels. When implementing designs:
Some design tools have plugins that can help with this conversion process automatically.
Browsers handle subpixel values differently. Some browsers round to the nearest pixel, while others support subpixel rendering for smoother scaling. This can occasionally cause slight inconsistencies across browsers, especially with small REM/EM values or when using transforms. For most use cases, these differences are negligible.
Modern browsers handle all CSS units efficiently—there's no measurable performance difference between pixels, REM, or EM in production applications. The browser's rendering engine converts everything to absolute values during the layout phase anyway.
Choose your units based on maintainability, accessibility, and responsive behavior, not performance. The milliseconds you might save (if any) are negligible compared to the time you'll spend fixing accessibility issues or maintaining pixel-based layouts.
Probably not. Refactoring an entire codebase from pixels to REM units is risky and time-consuming. A better approach:
I've seen teams try to convert everything at once—it usually introduces bugs and layout shifts that take weeks to fix. Gradual migration is safer.
REM units have had excellent browser support since Internet Explorer 9 (released in 2011). According to Can I Use, over 99% of global browser traffic supports REM units. Unless you're supporting IE8 or earlier (which Microsoft officially discontinued in 2016), you don't need fallbacks.
If you absolutely must support ancient browsers, provide pixel fallbacks:
1.element {
2 font-size: 16px; /* Fallback for IE8 */
3 font-size: 1rem; /* Modern browsers */
4}
5But honestly, in 2025, this is rarely necessary.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Manual CSS unit conversion is tedious and error-prone. You're doing mental math, second-guessing calculations, and hoping you got the font sizes right. This PX to REM to EM converter eliminates that friction.
Enter your pixel values from design files, adjust the font sizes to match your project's configuration, and get accurate REM and EM values instantly. Copy them directly into your code. Whether you're implementing a new design system, retrofitting an existing codebase with relative units, or just trying to understand how these units relate, the converter handles the math so you can focus on building.
For developers working on accessibility-compliant sites, this tool helps ensure your layouts scale properly when users adjust their font preferences—a requirement under WCAG 2.1 Level AA. For those building component libraries, it clarifies which EM values create the proportions you want. For anyone translating Figma designs to production CSS, it speeds up the conversion workflow significantly.
The formulas are based on the W3C CSS Values and Units Module specification, ensuring the conversions match how browsers actually calculate these values.
Discover more tools that might be useful for your workflow