PX to REM Converter
Pixels ⇄ rem with any root font size
16px = 1rem
PX to REM Table (base 16px)
| px | rem | px | rem |
|---|---|---|---|
| 1px | 0.0625rem | 28px | 1.75rem |
| 2px | 0.125rem | 32px | 2rem |
| 4px | 0.25rem | 36px | 2.25rem |
| 6px | 0.375rem | 40px | 2.5rem |
| 8px | 0.5rem | 44px | 2.75rem |
| 10px | 0.625rem | 48px | 3rem |
| 12px | 0.75rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 16px | 1rem | 72px | 4.5rem |
| 18px | 1.125rem | 80px | 5rem |
| 20px | 1.25rem | 96px | 6rem |
| 22px | 1.375rem | 112px | 7rem |
| 24px | 1.5rem | 128px | 8rem |
rem = px ÷ root font size. Browsers use 16px by default unless the html font-size is changed.
Convert PX to REM (and REM to PX)
Bidirectional CSS unit converter with an adjustable base
rem (root em) is a relative CSS unit: 1rem equals the font size of the html element, which is 16px in every major browser by default. Using rem for font sizes, spacing and breakpoints lets your layout scale when visitors change their browser's text size, which is an important accessibility win over fixed pixels. Type a pixel value to get rem, or type rem to get pixels; both fields update each other. If your project sets a different root size (for example html { font-size: 62.5% } for a 10px base), change the base and the converter, quick chips and the conversion table all follow.
Features
Both directions
px → rem and rem → px
Custom base
16px default, any root size
Conversion table
1–128px at a glance
Accessible CSS
Scales with user font settings
PX, REM and EM Cheat Sheet
Formulas
- rem = px ÷ root font size (e.g. 24 ÷ 16 = 1.5rem)
- px = rem × root font size (e.g. 2rem × 16 = 32px)
- em is relative to the parent element's font size, rem always to the root
- html { font-size: 62.5% } makes 1rem = 10px
Common values (16px base)
- 12px = 0.75rem · 14px = 0.875rem · 16px = 1rem
- 18px = 1.125rem · 20px = 1.25rem · 24px = 1.5rem
- 32px = 2rem · 48px = 3rem · 64px = 4rem
- Media queries: 768px = 48rem · 1024px = 64rem
Frequently Asked Questions
How many pixels is 1rem?
By default 1rem = 16px, because browsers set the root (html) font size to 16px. If the root font size is changed in CSS or by the user's browser settings, 1rem changes with it.
How do I convert px to rem?
Divide the pixel value by the root font size. With the default 16px: 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem.
What is the difference between rem and em?
rem is always relative to the root html font size; em is relative to the font size of the element's parent, so nested em values compound. rem is easier to predict.
Should I use rem or px?
Use rem for font sizes, spacing and media queries so the layout respects the user's text-size preference. px is still fine for borders, hairlines and shadows that should stay crisp.
What does font-size: 62.5% do?
It sets the root font size to 10px (62.5% of 16px), so 1.6rem = 16px. It makes mental maths easier, but remember to set body text back to 1.6rem.
Can I use rem in media queries?
Yes. In media queries rem and em are based on the browser's default font size, not the html rule, so 48rem = 768px with default settings.