REM to PX Converter
Free online rem to px converter and px to rem calculator. Convert CSS rem units to pixels instantly with adjustable base font size. Used by 50,000+ web developers.
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.
Frequently Asked Questions
How do I convert rem to px?
Multiply the rem value by the root font size (default 16px). For example, 1.5rem × 16 = 24px. The root font size is whatever you set on the html element in CSS. Use our free rem to px converter above for instant calculations.
What is 1 rem in pixels?
1rem equals 16 pixels (16px) by default in all major browsers including Chrome, Firefox, Safari, and Edge. This only changes if you override the font-size on the html element in your CSS or if the user has changed their browser default font size.
How do I convert px to rem?
Divide the pixel value by the root font size (default 16px). For example, 24px ÷ 16 = 1.5rem. Use our PX to REM converter for instant px to rem calculations with any base font size.
What is 1.5 rem in px?
1.5rem equals 24px with the default 16px root font size. The calculation is 1.5 × 16 = 24px. This is one of the most common rem values used in web design for spacing and typography.
What is 2 rem in px?
2rem equals 32px with the default 16px base font size. The calculation is 2 × 16 = 32px. This value is commonly used for larger headings and section spacing in CSS.
What is 0.75 rem in px?
0.75rem equals 12px with the default 16px root font size. The calculation is 0.75 × 16 = 12px. This is commonly used for smaller text, labels, and fine-grained spacing.
What is 0.5 rem in px?
0.5rem equals 8px with the default 16px root font size. The calculation is 0.5 × 16 = 8px. This value maps to Tailwind CSS p-2 spacing and is used for compact padding.
Why would I need to convert rem back to px?
When debugging in browser DevTools, all computed values show pixels. Converting rem to px helps you verify that your rem values produce the pixel sizes you intended. It is also needed for design handoff where Figma files use pixel values.
Can rem values be different across browsers?
The default root font size is 16px in every modern browser. However, users can change their preferred font size in browser settings, which changes the actual pixel value of 1rem on their screen. This is a key accessibility feature of rem units.
What is the difference between rem and em?
1rem always equals the root font size (usually 16px) and is consistent across the entire page. 1em equals the font size of the parent element, which can be different for every element. Rem gives you predictable, consistent pixel values while em creates compound scaling.
What is the difference between rem and px?
Pixels (px) are fixed units — 16px is always 16px regardless of settings. REM is relative to the root font size, so 1rem = 16px by default but changes if the root font size changes. REM is better for responsive design and accessibility because it scales with user preferences.
When should I use px instead of rem?
Use px for elements that should never scale: borders (1px solid), box shadows, very small decorative details, and exact pixel-perfect requirements. Use rem for font sizes, spacing, padding, margins, and any layout dimension that should respond to user font preferences.
What if the root font size is not 16px?
Use the same formula but with your custom root size. If your html font-size is 62.5% (10px), then 1rem = 10px, 2rem = 20px, 1.6rem = 16px. If it is 18px, then 1rem = 18px. Always check the computed html font-size in DevTools.
How do CSS frameworks handle rem?
Tailwind CSS uses rem for all spacing utilities (p-4 = 1rem = 16px). Bootstrap 5 uses rem for typography and spacing. Material UI uses rem for its spacing scale. All assume a 16px root by default and scale proportionally when the root changes.
Does changing the root font size affect all rem values?
Yes. Every single rem value on your page recalculates when you change the html font-size. This is the main power of rem — one change at the root scales your entire layout proportionally. This is also why you need to be careful when changing it.
Do all browsers support rem units?
Yes, rem units have excellent browser support. They work in Chrome, Firefox, Safari, Edge, Opera, and all modern mobile browsers. REM has been supported since IE9, so there are no compatibility concerns for any modern web project.
What are common rem to px conversions?
The most common conversions at 16px root: 0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px, 3rem = 48px, 4rem = 64px, 5rem = 80px.
How do I check the computed px value in DevTools?
Right-click any element, select Inspect, then look at the Computed tab. All values are shown in pixels even if you wrote them in rem. You can also type getComputedStyle(document.documentElement).fontSize in the console to see the root font size.
What happens to rem values on mobile devices?
Rem works exactly the same on mobile. The default root is still 16px. Mobile browsers may zoom the page, which scales everything proportionally. Using rem ensures your layout adapts correctly to different screen sizes and user accessibility settings.
How do I convert rem to px in JavaScript?
Use this function: const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize). For example, remToPx(1.5) returns 24 when the root is 16px. This reads the actual computed root font size at runtime.
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.