Why it matters
Sizes in rem follow the reader's chosen browser text size; sizes in px don't. Someone who sets larger text because of low vision gets bigger rem-based type and spacing, while a px-based layout ignores them. That's why most accessibility guidance recommends rem for font sizes.
Designs usually arrive in pixels, though, so converting is a constant chore. This tool does single values with your real context, and can convert an entire stylesheet in one go while leaving 1px borders alone.
How to use it
- Enter a value and choose its unit.
- Set the root font size (usually 16px), the parent size for em and %, and the viewport.
- Copy any equivalent from the table.
- To convert a stylesheet, paste it below and copy the result.
FAQ
Why is 16px equal to 1rem?
Browsers use 16px as the default root font size, so 1rem is 16px unless the site or reader changes it.
What's the difference between rem and em?
rem is relative to the root (html) font size, so it's the same everywhere. em is relative to the current element's font size, so it compounds inside nested elements.
Should media queries use rem?
em is the safest choice for media queries because it follows the reader's text size consistently across browsers. The converter can leave media queries alone if you prefer to keep px there.
How many pixels is 1pt?
1pt is 1/72 of an inch and 1px is 1/96 of an inch in CSS, so 1pt = 1.333px and 12pt = 16px.
