Using the converter
Type a rem value, with or without the unit, and the pixels appear on the right. 1.5 gives 24px. Paste CSS and every rem in it changes, while em, percentages and plain numbers like line-height: 1.5 don't.
Comments, quoted strings, url() and @media conditions are left as they are. To go from pixels to rem, press swap or use the px to rem converter, which can also keep 1px borders in pixels.
Common sizes in px
| rem | px |
|---|---|
| 0.5rem | 8px |
| 0.625rem | 10px |
| 0.75rem | 12px |
| 0.875rem | 14px |
| 1rem | 16px |
| 1.125rem | 18px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
How to convert rem to px
Multiply by the root font size. With the browser default of 16px, 1.5rem × 16 = 24px and 0.875rem × 16 = 14px.
The root is whatever font-size the <html> element ends up with. If a stylesheet uses the 62.5% trick, the root is 10px and 2.4rem is 24px, so set Root font size to 10. A reader who changes their browser's default text size changes the root as well. rem sizes follow them, which is the reason to use rem at all.
Questions
What is 1rem in px?
16px at the browser default root size. It's always the root element's font size, so a stylesheet or a reader's settings can change it.
What is 0.875rem in px?
14px at a 16px root.
Is rem the same as em?
Only at the top of the page. rem always measures from the `<html>` element. em measures from the element's own font size, so it changes as you go deeper into nested elements.
How do I read Tailwind sizes in px?
Tailwind CSS v4 spaces things in steps of 0.25rem, so divide the number by 4 for rem and multiply by 16 for px. `p-6` is 1.5rem, which is 24px.
Sources
- MDN: CSS length units, including rem, em and px
- W3C: Media Queries Level 4, relative units in media queries
- Tailwind CSS: Theme variables (the default --spacing)
Added and reviewed . What's new