px to rem Converter — Custom Base + Table
Convert px to rem and rem to px. 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 48rem = 768px. Paste one value per line. Nothing is uploaded.
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.
px to rem table (16px base)
rem to px table
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.
What is 16px in rem?
With the default 16px root font size, 16px = 1rem. This is the browser default and the most common base for CSS typography.
What is 18px in rem?
18px ÷ 16 = 1.125rem. If your root font size is 18px instead, 18px = 1rem.
What is 24px in rem?
24px ÷ 16 = 1.5rem. Common for section headings when the root size is 16px.
What is 48rem in px?
48rem × 16 = 768px. That is why many tablet breakpoints are written as 48rem instead of 768px.