REM to PX Converter
Free rem to px converter. Enter any rem value, adjust the base font size (default 16px), and get exact pixel values instantly. Formula: px = rem � base. Perfect for CSS debugging.
Formula
px = rem � base font size
Quick Reference Table
Popular REM to PX Conversions
The most commonly used rem to pixel conversions in web development, based on the default 16px root font size. These cover the majority of CSS spacing and typography values you will encounter.
Tiny spacing, hairline gaps
Small padding, compact gaps
Small text, label spacing
Body text (small), captions
Default body text, base spacing
Slightly larger body text
H6, subheadings, larger text
H5, section spacing, icons
H4, large spacing, containers
H3, section headers
H2, hero subtext, large gaps
H1, hero headlines
REM to PX Conversion Formula
REM to Pixels Formula
pixels = rem � root font size
Pixels to REM Formula
rem = pixels � root font size
The default root font size in all modern browsers is 16px. To convert rem to px, multiply the rem value by 16. To convert px to rem, divide the pixel value by 16.
Example 1: 1.5rem � 16 = 24px
Example 2: 2rem � 16 = 32px
Example 3: 0.75rem � 16 = 12px
Example 4: 24px � 16 = 1.5rem
Example 5: 14px � 16 = 0.875rem
PX to REM Conversion Table
Complete pixel to rem conversion reference table based on a 16px root font size. Use this to quickly look up any px to rem value. Need the reverse? Scroll up to the rem to px table above.
All values calculated with default 16px root font size. Use our PX to REM converter for custom base sizes.
REM vs PX: What Is the Difference?
Pixels (px) are a fixed unit - 16px is always 16px regardless of any settings. REM (root em) is relative to the root font size, so 1rem = 16px by default but changes if the root font size changes. Using rem for font sizes, spacing, padding, and margins makes your website responsive and accessible. Use px only for borders, box shadows, and small decorative elements that should never scale.
When You Need to Convert REM to Pixels
Writing CSS in rem is best practice for responsive design, but there are common situations where you need the exact pixel value. Here are the scenarios developers encounter most.
Design Handoff & Figma
Designers work in pixels. When a Figma file says an element is 24px, you need to know that equals 1.5rem. When reviewing code, you need to verify 1.5rem actually produces 24px on screen.
Browser DevTools Debugging
Chrome and Firefox DevTools show all computed values in pixels. When something looks off, you compare the computed px value against your intended rem value to find the mismatch.
JavaScript & Canvas APIs
JavaScript APIs, HTML Canvas, charting libraries (Chart.js, D3.js), and animation libraries often require exact pixel values. When your CSS layout uses rem, you convert to px for these APIs.
Email & Legacy Systems
HTML email templates and older systems often only support pixel values. When building emails or integrating with legacy platforms, you need to convert all rem values back to px.
REM to PX in CSS Frameworks
All major CSS frameworks use rem under the hood. Here are the exact rem to px mappings for Tailwind CSS, Bootstrap, and Material UI.
Class REM PX
p-0.5 0.125rem 2px
p-1 0.25rem 4px
p-1.5 0.375rem 6px
p-2 0.5rem 8px
p-2.5 0.625rem 10px
p-3 0.75rem 12px
p-3.5 0.875rem 14px
p-4 1rem 16px
p-5 1.25rem 20px
p-6 1.5rem 24px
p-7 1.75rem 28px
p-8 2rem 32px
p-9 2.25rem 36px
p-10 2.5rem 40px
p-11 2.75rem 44px
p-12 3rem 48px
p-14 3.5rem 56px
p-16 4rem 64px
p-20 5rem 80px
p-24 6rem 96pxElement REM PX
body 1rem 16px
h6 1.25rem 20px
h5 1.25rem 20px
h4 1.5rem 24px
h3 1.75rem 28px
h2 2rem 32px
h1 2.5rem 40px
display-6 2.5rem 40px
display-5 3rem 48px
display-4 3.5rem 56px
display-3 4rem 64px
display-2 4.5rem 72px
display-1 5rem 80px
small 0.875rem 14pxFactor REM PX
1 0.5rem 8px
2 1rem 16px
3 1.5rem 24px
4 2rem 32px
5 2.5rem 40px
6 3rem 48px
7 3.5rem 56px
8 4rem 64pxHow to Convert REM to PX in JavaScript
// Convert rem to px at runtime
function remToPx(rem) {
const rootFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize
);
return rem * rootFontSize;
}
// Examples
remToPx(1); // 16 (1 � 16px)
remToPx(1.5); // 24 (1.5 � 16px)
remToPx(2); // 32 (2 � 16px)
remToPx(0.75); // 12 (0.75 � 16px)// Convert px to rem at runtime
function pxToRem(px) {
const rootFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize
);
return px / rootFontSize;
}
// Examples
pxToRem(16); // 1 (16 � 16px)
pxToRem(24); // 1.5 (24 � 16px)
pxToRem(32); // 2 (32 � 16px)
pxToRem(14); // 0.875 (14 � 16px)/* Default: 1rem = 16px */
html { font-size: 16px; }
/* 62.5% trick: 1rem = 10px (easier math) */
html { font-size: 62.5%; }
/* Now: 1.6rem = 16px, 2.4rem = 24px */
/* 18px root: 1rem = 18px */
html { font-size: 18px; }
/* Now: 1rem = 18px, 2rem = 36px */// SCSS function to convert rem to px
@function rem-to-px($rem, $base: 16px) {
@return $rem * $base;
}
// Usage
.heading {
font-size: rem-to-px(2rem); // 32px
margin-bottom: rem-to-px(1.5rem); // 24px
}
// PX to REM function
@function px-to-rem($px, $base: 16px) {
@return calc($px / $base) * 1rem;
}
.body-text {
font-size: px-to-rem(14px); // 0.875rem
line-height: px-to-rem(24px); // 1.5rem
}How to Check REM Values in Browser DevTools
Step 1: Find the root font size
Open DevTools (F12), go to the Console tab, and type: getComputedStyle(document.documentElement).fontSize - this returns the actual root font size (e.g., "16px").
Step 2: Inspect any element
Right-click any element, select "Inspect", then click the "Computed" tab. All CSS values are shown in their computed pixel values, even if you wrote them in rem.
Step 3: Verify your conversions
Compare the computed px value with your expected conversion. For example, if you set padding: 1.5rem and the computed value shows 24px, your conversion is correct (1.5 � 16 = 24).
What Is REM in CSS?
REM stands for "root em" and is a relative CSS unit based on the font size of the root element (the <html> element). Unlike em which is relative to the parent element, rem is always relative to the root, making it predictable and consistent across your entire stylesheet.
The default root font size in all major browsers (Chrome, Firefox, Safari, Edge) is 16px. This means 1rem = 16px by default. If you change the root font size, all rem values on the page recalculate automatically.
REM is the recommended unit for font sizes, spacing, padding, margins, and layout dimensions in modern CSS. It provides two major benefits: responsive scaling (one root change scales everything) and accessibility (respects user browser font size preferences).
Users with visual impairments often increase their browser default font size to 20px or 24px. When you use rem, your layout automatically adapts to their preference. When you use px, the layout stays fixed and ignores their settings - this is a key accessibility concern.
CSS Units Comparison: REM vs EM vs PX vs VW vs VH
For most web projects, use rem as your primary unit for typography and spacing. Use our PX to EM converter, PX to VW converter, or PX to VH converter for other CSS unit conversions.
Common Mistakes When Converting REM to PX
Assuming the root font size is always 16px
If your project uses the 62.5% trick, the root is 10px (not 16px). If a user has changed their browser settings, it could be anything. Always check the computed html font-size value in DevTools before assuming 16px.
Confusing rem with em units
REM is root-relative (always based on the html element). EM is parent-relative (based on the parent element's font size). An element with font-size: 2em inside a parent with font-size: 1.5rem will compute differently than 2rem. Use our EM to PX converter for em conversions.
Forgetting that zoom does not change rem-to-px math
Browser zoom changes the effective pixel ratio but does not change the rem-to-px relationship. At 150% zoom, 1rem still computes to 16px in CSS - the physical pixels on screen are larger, but the CSS math stays the same.
Using px for font sizes instead of rem
Always use rem for font sizes in production CSS. Pixel font sizes do not scale when users change their browser default font size, which is an accessibility violation. Convert your designs from px to rem using our PX to REM converter.