Convert between px and rem instantly. Set your base font size, type a value, and get the conversion. Everything runs in your browser — no data sent anywhere.
What is rem?
rem stands for “root em.” It’s a CSS unit relative to the root element’s (<html>) font size. By default, browsers set the root font size to 16px, so 1rem = 16px.
Unlike px (which is absolute), rem scales when the user changes their browser’s default font size. This makes rem the preferred unit for accessible, responsive design.
/* With default 16px base */
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */
.small { font-size: 0.75rem; } /* = 12px */rem vs em vs px — when to use each
| Unit | Relative to | Best for |
|---|---|---|
px | Nothing (absolute) | Borders, shadows, fine details that shouldn’t scale |
rem | Root font size | Font sizes, spacing, layout dimensions |
em | Parent element’s font size | Component-internal spacing that should scale with the component’s text |
Use rem for: font-size, padding, margin, gap, max-width, media queries.
Use px for: border-width, box-shadow offsets, outline, 1px dividers.
Use em for: padding inside buttons (so it scales with button text size), icon sizing relative to adjacent text.
The formula
rem = px / base
px = rem × baseWhere base is the root font size (default: 16px).
Examples with 16px base:
24px ÷ 16 = 1.5rem14px ÷ 16 = 0.875rem2.5rem × 16 = 40px
Setting a custom base font size
Some developers change the root font size to make calculations easier:
/* 62.5% trick: 1rem = 10px (easier math) */
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* Reset body to 16px equivalent */
h1 { font-size: 3.2rem; } /* = 32px */
p { font-size: 1.6rem; } /* = 16px */
.small { font-size: 1.2rem; } /* = 12px */Caution: The 62.5% trick can break third-party components that assume a 16px base. It also makes your rem values non-standard, confusing other developers. Many teams prefer sticking with the 16px default and using the converter above for quick lookups.
Using rem in Tailwind CSS
Tailwind’s spacing scale is already in rem:
<!-- Tailwind uses rem by default -->
<div class="p-4"> <!-- padding: 1rem (16px) -->
<div class="text-lg"> <!-- font-size: 1.125rem (18px) -->
<div class="max-w-2xl"> <!-- max-width: 42rem (672px) -->If you need custom values:
<div class="p-[1.25rem]"> <!-- 20px -->
<div class="text-[0.9375rem]"> <!-- 15px -->Accessibility benefits of rem
When a user sets their browser’s default font size to 20px (common for users with low vision):
- Sites using px: Text stays at the coded size. User’s preference is ignored.
- Sites using rem: Everything scales proportionally.
1rembecomes 20px,2rembecomes 40px.
This is why WCAG accessibility guidelines recommend relative units for text. Using rem means your site automatically respects user preferences without any extra code.
Converting an entire CSS file
For bulk conversion, you can use PostCSS plugins:
npm install postcss-pxtorem --save-dev// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16,
propList: ['*'], // Convert all properties
minPixelValue: 2, // Don't convert 1px borders
},
},
};This automatically converts px values in your CSS to rem during the build process.
Common conversion reference
| px | rem (16px base) | Typical use |
|---|---|---|
| 8 | 0.5 | Small gaps, icon padding |
| 12 | 0.75 | Caption text, small labels |
| 14 | 0.875 | Secondary text, metadata |
| 16 | 1 | Body text (default) |
| 18 | 1.125 | Large body text |
| 20 | 1.25 | H4, subheadings |
| 24 | 1.5 | H3, section spacing |
| 32 | 2 | H2, large spacing |
| 48 | 3 | H1, hero text |
| 64 | 4 | Display headings |
FAQ
Should I use rem for media queries?
Yes. Using rem in media queries means your breakpoints respect the user’s font size setting. If a user has a larger default font, your layout adapts at the right content width rather than a fixed pixel width.
/* ✅ Responsive to user preferences */
@media (min-width: 48rem) { /* 768px at default, wider if user has larger font */ }
/* ❌ Fixed regardless of user settings */
@media (min-width: 768px) { }What about line-height — rem or unitless?
Use unitless values for line-height. A unitless line-height: 1.5 means “1.5 times the element’s own font size,” which scales correctly regardless of the font size. Using rem for line-height can cause unexpected results when font sizes vary.
Does rem work in CSS Grid and Flexbox gap?
Yes. gap: 1.5rem works perfectly in both Grid and Flexbox. It’s one of the best uses of rem — consistent spacing that scales with user preferences.
What if my design uses a non-standard base like 14px?
Change the “Base font size” in the converter above to 14. The formula stays the same: rem = px / base. Just make sure your CSS sets html { font-size: 14px; } or the equivalent percentage (87.5%).