px ↔ rem Converter
Convert between px, rem, and em units
16px
=
Reference Table (base: 16px)
Pixels
rem
8px
0.5rem
10px
0.625rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
28px
1.75rem
32px
2rem
36px
2.25rem
40px
2.5rem
48px
3rem
56px
3.5rem
64px
4rem
72px
4.5rem
80px
5rem
96px
6rem
How to use px ↔ rem Converter
- Enter a pixel value to convert to rem, or a rem value to convert to pixels.
- Adjust the base font size if your project uses something other than 16px.
- Use the reference table for quick lookups — click any row to copy.
- The conversion updates in real time as you type.
px vs rem in CSS
Pixels (px) are absolute units — 1px is always 1px regardless of user settings. rem is relative to the root element font size, which defaults to 16px in all browsers.
Using rem allows your layout to respect user accessibility preferences. If someone sets their browser font size to 20px, elements sized in rem will scale proportionally while px-based elements stay fixed.
The formula is simple: rem = px / base. With a 16px base, 24px = 1.5rem. If you change the base to 18px, 24px = 1.333rem. This tool handles the math and gives you a reference table for common values.
Frequently Asked Questions
What is the default base font size?
Browsers default to 16px as the root font size. This means 1rem = 16px unless you change the html font-size in your CSS.
Should I use rem or em?
Use rem for consistent sizing relative to the root. Use em only when you want sizing relative to the parent element, like nested indentation.
Why use rem instead of px?
rem respects user font size preferences. Users who set larger default font sizes (for accessibility) will see your layout scale properly if you use rem.
What is the difference between rem and em?
rem is relative to the root (html) element font size. em is relative to the parent element font size. rem is more predictable because it always references the same base.