px ↔ rem Converter
Convert pixel values to rem (and back) with a configurable base font size. Paste multiple values — one per line — for bulk conversion.
px vs rem
px (pixels) are absolute units — 16px is always 16 device-independent pixels regardless of user preferences.
rem (root em) is relative to the font-size of the <html> element. By default browsers set this to 16px, so 1rem = 16px. When users change their browser's default font size, rem values scale automatically — making rem essential for accessible typography.
Common Reference (16px base)
When to Use rem
- Typography — font sizes should always use rem for accessibility
- Spacing — padding and margin in rem respects user zoom
- Media queries — rem-based breakpoints scale with user preferences
- Max-widths — layout containers benefit from rem scaling
- Keep px for — borders, shadows, and decorative elements that shouldn't scale
Frequently Asked Questions
What is the difference between rem and em?
rem is relative to the root <html> font size. em is relative to the current element's font size, which causes compounding when nested. rem is predictable; em is context-dependent.
Should I change the base font size in CSS?
Avoid setting html { font-size: 62.5%; } (the "10px trick"). It breaks user preferences and accessibility. Instead, use rem with a 16px base and let this converter help with the math.
How do I set a custom base font size?
If your project sets html { font-size: 18px; }, use 18 as the base in this converter. All rem values will then reflect your custom root size.
Do media queries use the same base?
Yes — @media (min-width: 48rem) uses the browser's default root font size (16px) for the conversion, not the CSS-declared html font size. So 48rem = 768px in media queries regardless of your CSS.