PX to REM Converter
Convert pixels to rem units instantly. Adjust the base font size for accurate results across your entire project.
Formula
rem = px รท base font size
Quick Reference Table
What Exactly is a REM Unit?
REM stands for "root em." It is a CSS unit that is always relative to the font size of the root element, which is the <html> tag. In every browser, the default root font size is 16 pixels. So when you write 1rem in your CSS, the browser renders it as 16 pixels.
The beauty of rem is consistency. Unlike em units (which depend on the parent element and can compound unpredictably), rem always points back to one single value. Change the root font size once, and every rem value on your entire page updates proportionally. This makes rem the go-to unit for building scalable, accessible interfaces.
Most CSS frameworks already use rem under the hood. Tailwind CSS, Bootstrap 5, and Material UI all default to rem-based spacing and typography. If you are working with any of these, understanding the px-to-rem relationship will help you customize your designs with confidence.
Why Choose REM Over Pixels?
The biggest advantage of rem is accessibility. Around 30% of users adjust their default browser font size. When your site uses pixels, those preferences get ignored entirely. With rem, everything scales proportionally, and your layout stays intact. This is not just a nice-to-have feature. WCAG accessibility guidelines specifically recommend using relative units like rem for text sizing.
Practical Code Examples
.card {
font-size: 16px;
padding: 24px 32px;
margin-bottom: 16px;
border-radius: 8px;
gap: 12px;
}.card {
font-size: 1rem; /* 16px */
padding: 1.5rem 2rem; /* 24px 32px */
margin-bottom: 1rem; /* 16px */
border-radius: 0.5rem; /* 8px */
gap: 0.75rem; /* 12px */
}html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-size: 1.6rem; /* 16px - restores normal size */
}
.heading {
font-size: 2.4rem; /* 24px - easy math */
margin-bottom: 1.6rem; /* 16px */
}
.small-text {
font-size: 1.2rem; /* 12px */
}/* Scale everything by changing one value */
html { font-size: 14px; } /* Mobile */
@media (min-width: 48rem) {
html { font-size: 16px; } /* Tablet */
}
@media (min-width: 64rem) {
html { font-size: 18px; } /* Desktop */
}
/* All rem values adjust automatically */
h1 { font-size: 2.5rem; }
p { font-size: 1rem; }
.container { max-width: 60rem; }Best Practices for Using REM
Use rem for typography
Set all font sizes in rem so they scale when users adjust their browser preferences. This is the single most impactful accessibility improvement you can make.
Use rem for spacing
Padding, margin, and gap values in rem keep your layout proportional. When text gets bigger, the space around it grows too, preventing cramped layouts.
Keep pixels for borders
A 1px border should stay 1px regardless of font size. Same goes for box shadows and outlines. These tiny values do not need to scale.
Use rem in media queries
Writing breakpoints in rem (like 48rem instead of 768px) means your responsive design adapts to users with custom font sizes, not just screen width.
Browser Support
REM units are supported in every browser you need to worry about. Chrome, Firefox, Safari, Edge, Opera, and all mobile browsers have supported rem since 2012. Even Internet Explorer 9 had partial support. You can use rem today with zero compatibility concerns.
The only edge case is that very old versions of IE (8 and below) do not support rem at all. If you somehow need to support IE8, you would need a pixel fallback. But in 2025 and beyond, this is not something you need to think about. Every browser your users have will handle rem perfectly.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size (default 16px). For example, 24px / 16 = 1.5rem. You can change the root font size in your CSS by setting font-size on the html element.
What is 1rem in pixels?
By default, 1rem equals 16px in every major browser. This comes from the default font-size set on the html element. If you change that value, 1rem changes too.
Why use rem instead of px?
Rem units scale with the user's browser font size preference. This makes your website accessible to people who need larger text. Pixels are fixed and ignore user settings completely.
What is the default root font size?
Every browser ships with a default root font size of 16px. You can override this in CSS with html { font-size: 18px; } or any value you prefer.
Is rem better than em?
For most use cases, yes. Rem always refers to the root element, so it behaves the same everywhere on your page. Em refers to the parent element, which means nested elements can compound and create unexpected sizes.
Can I use rem for all CSS properties?
You can use rem for font-size, padding, margin, width, height, gap, and most other properties. The only place you should still use pixels is for very small values like borders (1px) and box shadows.
How do I set the root font size in CSS?
Add html { font-size: 16px; } to your stylesheet. Some developers use html { font-size: 62.5%; } which sets the root to 10px, making the math easier (1rem = 10px, 1.6rem = 16px).
Does rem work in all browsers?
Yes. Rem is supported in every modern browser including Chrome, Firefox, Safari, Edge, and all mobile browsers. It has been supported since 2012.
What is the 62.5% trick for rem?
Setting html { font-size: 62.5%; } makes 1rem equal to 10px instead of 16px. This makes conversion easier: 1.4rem = 14px, 1.6rem = 16px, 2.4rem = 24px. Body text is then set to 1.6rem to restore the normal 16px size.
Should I use rem for media queries?
Yes. Using rem in media queries means your breakpoints adapt when users change their browser font size. A media query at 48rem triggers at 768px by default, but adjusts automatically for users with larger text settings.
How do Tailwind CSS and rem work together?
Tailwind uses rem by default for most of its spacing and sizing utilities. When you write p-4, Tailwind outputs padding: 1rem (16px). The text-base class sets font-size to 1rem.
What is the difference between rem and viewport units?
Rem is relative to the root font size and stays consistent across screen sizes. Viewport units (vw, vh) are relative to the browser window size and change when the window is resized. Use rem for text and spacing, viewport units for full-width or full-height layouts.
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.