Why CSS Unit Conversion Matters
In the early days of web design, pixels were the default unit for everything: font sizes, margins, paddings, widths, and heights. Designers created mockups in Photoshop (where everything is measured in pixels) and developers translated those values directly into CSS. It was simple, predictable, and it worked—until it didn't. As the web evolved from desktop-only experiences to a multi-device landscape spanning phones, tablets, laptops, and large monitors, the limitations of pixel-based design became painfully obvious.
Enter relative units like rem, em, vw, and vh. These units scale based on context rather than remaining fixed, making it possible to build interfaces that adapt to different screen sizes, user preferences, and accessibility needs. Among these relative units, rem has emerged as the gold standard for most sizing tasks in modern CSS, and understanding how to convert from pixels to rem is an essential skill for any frontend developer or designer.
Understanding CSS Units: px, rem, and em
Pixels (px)
A pixel represents a single dot on the screen. In CSS, one px unit is defined as 1/96th of 1 inch, regardless of the actual screen resolution. On a standard 96 DPI display, 1 CSS pixel equals 1 physical pixel. On high-DPI (Retina) displays, the browser maps CSS pixels to multiple physical pixels for sharper rendering. While px values are easy to understand and work with, they are absolute: they do not scale with the user's font size preferences or the viewport size.
Using pixels exclusively creates rigid layouts. A design that looks perfect at 1920px width will not adapt to a 375px mobile screen, and a user who increases their browser font size for readability will see no change in pixel-based dimensions, potentially breaking layouts and cutting off text.
Root EM (rem)
The rem unit is relative to the font size of the root element (the <html> element). By default, browsers set the root font size to 16px, which means 1rem = 16px. Unlike em, which compounds based on the parent element's font size, rem always refers back to the root, creating a flat, predictable scaling system.
The key advantage of rem is consistency. No matter where an element appears in the DOM tree, 1rem always equals the same value. This eliminates the compounding problem of em units, where nested elements can produce unexpectedly large or small values. For example, with em units, an element nested five levels deep with font-size: 1.2em at each level would have a computed font size of 16 × 1.2⁵ ≈ 39.8px. With rem, 1.2rem is always 19.2px, regardless of nesting depth.
EM
The em unit is relative to the font size of the element's parent. This makes em useful for components that should scale proportionally within their context, such as buttons inside a card or list items inside a navigation bar. However, the compounding behavior means you need to be careful with deeply nested elements. A common pattern is to use rem for top-level sizing and em for component-internal spacing.
The px to rem Conversion Formula
The conversion between pixels and rem is straightforward:
rem = px / root_font_size Example (default root = 16px): 24px → 24 / 16 = 1.5rem 32px → 32 / 16 = 2rem 12px → 12 / 16 = 0.75rem 48px → 48 / 16 = 3rem Example (custom root = 18px): 24px → 24 / 18 = 1.333rem 32px → 32 / 18 = 1.778rem 12px → 12 / 18 = 0.667rem
To convert rem back to pixels, multiply by the root font size:
px = rem × root_font_size Example: 1.5rem × 16 = 24px 2rem × 16 = 32px
Common px to rem Conversions (16px Base)
8px = 0.5rem 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem 18px = 1.125rem 20px = 1.25rem 22px = 1.375rem 24px = 1.5rem 28px = 1.75rem 30px = 1.875rem 32px = 2rem 36px = 2.25rem 40px = 2.5rem 48px = 3rem 56px = 3.5rem 64px = 4rem 72px = 4.5rem 80px = 5rem 96px = 6rem 112px = 7rem 128px = 8rem
Setting Up a REM-Based Design System
The best way to work with rem units is to establish a consistent design system based on a type scale. A type scale is a set of font sizes that follow a mathematical ratio, creating harmonious visual relationships between headings, body text, captions, and other typographic elements.
Choosing a Base Font Size
While 16px is the browser default, many modern designs use 18px or 20px as the base for improved readability on high-resolution screens. The larger base means all rem-based sizes scale up proportionally, making the entire interface more readable without changing any individual values. To set a custom base, simply declare it on the root element:
html {
font-size: 18px;
}
/* Now 1rem = 18px, 1.5rem = 27px, etc. */
Building a Type Scale
A common approach is to use a ratio like 1.25 (Major Third) or 1.333 (Perfect Fourth) to generate sizes from your base. Here is an example using an 18px base with a 1.25 ratio:
html { font-size: 18px; }
h1 { font-size: 2.441rem; } /* 43.9px - Large heading */
h2 { font-size: 1.953rem; } /* 35.2px - Section heading */
h3 { font-size: 1.563rem; } /* 28.1px - Subsection */
h4 { font-size: 1.25rem; } /* 22.5px - Card title */
body { font-size: 1rem; } /* 18px - Base text */
small { font-size: 0.8rem; } /* 14.4px - Small text */
Spacing with REM
Using rem for spacing (margins, paddings, gaps) creates layouts that scale with the user's font size. A spacing scale based on 0.25rem increments works well in practice:
:root {
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
}
REM vs PX: When to Use Each
While rem is excellent for most sizing tasks, there are legitimate use cases for pixels. Understanding when to use each unit is part of being a thoughtful CSS developer.
Use rem for:
- Font sizes (body text, headings, labels)
- Vertical spacing (margins, paddings, line heights)
- Component dimensions that should scale with text
- Media query breakpoints in some methodologies
Use px for:
- Borders (a 1px border should always be 1px, not scale)
- Box shadows (offsets and blur should remain consistent)
- Minimum dimensions (
min-width: 300pxto prevent collapse) - Icon sizes in sprite sheets or SVGs with fixed dimensions
- Transitions and animations where fixed pixel values are intended
Browser Compatibility
Rem units are supported in all modern browsers and have been for over a decade. Internet Explorer 9+ supports rem, and IE 8 can be handled with a simple px fallback. If you need to support very old browsers, the safest approach is to declare the px value first, then override with rem:
.element {
font-size: 16px; /* Fallback for IE8 */
font-size: 1rem; /* Modern browsers */
}
In practice, IE8 support is rarely needed today, and most teams use rem exclusively without fallbacks. PostCSS plugins like postcss-pxtorem can automate the conversion process if you prefer to write in pixels during development.
Try Our Free Pixels to REM Converter
Our free pixels to REM converter lets you convert any pixel value to rem instantly. Set your base font size (default 16px), enter your pixel value, and get the rem equivalent immediately. The tool also generates a complete conversion table and provides ready-to-use CSS code snippets. It works entirely in your browser with no data sent to any server.
Conclusion
Converting from pixels to rem is not just a technical exercise—it is a design philosophy that prioritizes accessibility, scalability, and maintainability. By using rem units, you create interfaces that respect user preferences, adapt to different contexts, and scale gracefully across devices. Whether you are building a new project from scratch or migrating an existing codebase, the conversion is straightforward and the benefits are substantial. Start with a clear base font size, build a consistent type scale, and let rem handle the rest.
Frequently Asked Questions
What is the difference between px and rem?
Pixels (px) are absolute units that represent a fixed number of device pixels. REM (root em) is a relative unit based on the root element's font size (typically 16px by default). REM scales proportionally, making it ideal for responsive design, while px values remain fixed regardless of the user's font size settings.
What is the default root font size in browsers?
Most browsers set the default root font size to 16px. This means 1rem equals 16px by default. However, users can change this setting in their browser preferences, and websites can override it with their own root font size. When you set a font-size on the html element, that becomes the new base for all rem calculations.
Should I use rem or em for font sizes?
For font sizes, rem is generally preferred because it creates a predictable, consistent scale relative to the root. Em units compound based on the parent element's font size, which can lead to unexpected results in deeply nested elements. Use rem for global sizing and em for components that should scale relative to their context.
How do I set a custom base font size?
Set the font-size property on the html element: html { font-size: 18px; }. With this base, 1rem = 18px, so 24px = 24/18 = 1.333rem. Many designers use a base of 18px or 20px for slightly larger default text that improves readability on modern high-resolution screens.
Does using rem improve accessibility?
Yes. When you use rem units, all sizing scales proportionally if a user changes their browser's base font size. This is critical for users with visual impairments who need larger text. Pixel-based layouts break when the user adjusts font size because px values are absolute and do not scale. REM-based layouts adapt gracefully, maintaining proportions and readability.