Convert pixels to rem and rem to px instantly. Customizable base font size, bulk converter, conversion table, and ready-to-copy CSS output.
| Pixels | REM | Points | Use Case |
|---|
Enter multiple px values (one per line or comma-separated)
The rem unit in CSS stands for "root em." It's relative to the font size of the root element (<html>). By default, browsers set this to 16px, so 1rem = 16px.
rem = px ÷ base font size
For example, with a 16px base: 24px ÷ 16 = 1.5rem
em, rem always references the same base, avoiding compound scaling bugs| Use REM for | Use PX for |
|---|---|
| Font sizes | Borders |
| Margins & padding | Box shadows |
| Line heights | Fine details (1px lines) |
| Max-width containers | Media queries |
| Gap & spacing | Outline widths |
Set different base sizes at breakpoints to scale your entire design:
html { font-size: 16px; }
@media (max-width: 768px) {
html { font-size: 14px; }
}
@media (min-width: 1440px) {
html { font-size: 18px; }
}
10px = 0.625rem · 12px = 0.75rem · 14px = 0.875rem · 16px = 1rem · 18px = 1.125rem · 20px = 1.25rem · 24px = 1.5rem · 32px = 2rem · 48px = 3rem · 64px = 4rem
html { font-size: ... } in your CSS.