Pixel360PX to REM formula
rem = px ÷ root font size
The root font size is the font-size of the <html> element. If you never set it, browsers use 16px, so you divide by 16. If your stylesheet sets html { font-size: 10px } or 62.5%, you divide by 10 instead.
Worked examples
- 14px body text, 16px base: 14 ÷ 16 = 0.875rem
- 32px heading, 16px base: 32 ÷ 16 = 2rem
- 18px with a 10px base (62.5%): 18 ÷ 10 = 1.8rem
- A 12px gap in a 20px-root design system: 12 ÷ 20 = 0.6rem
PX to REM conversion table (16px base)
The most common sizes in design systems, converted with the default 16px root.
| Pixels | REM | Pixels | REM |
|---|---|---|---|
| 1px | 0.0625rem | 28px | 1.75rem |
| 2px | 0.125rem | 32px | 2rem |
| 4px | 0.25rem | 36px | 2.25rem |
| 8px | 0.5rem | 40px | 2.5rem |
| 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 |
| 24px | 1.5rem | 128px | 8rem |
Why use rem instead of px?
Many people with low vision raise the default font size in their browser settings. Sizes set in rem scale with that preference. Sizes set in px usually don't, so the text stays small. The WCAG 2.2 resize text criterion asks that text can be enlarged to 200% without breaking the layout, and rem-based type and spacing make that much easier.
Rem also keeps a design consistent. Because every rem refers to the same root value, a spacing scale like 0.25rem, 0.5rem, 1rem, 2rem stays proportional across the whole site, and you can rescale everything by changing one number.
When px is still the right choice
- Borders and hairlines: a 1px border should stay 1px.
- Box shadows and small decorative offsets that shouldn't grow with text.
- Media queries: rem and em breakpoints respond to zoom more predictably in some browsers, but many teams still use px. Pick one and stay consistent.
Rem vs em in one sentence
Rem is always relative to the root, while em is relative to the current element's font size and compounds when you nest elements. Use the px to em converter when you need component-relative sizing, or go the other way with the rem to px converter.
Frequently asked questions
How many pixels is 1rem?
1rem equals the root (html) font size. Browsers default to 16px, so 1rem = 16px unless the page or the user changes the root font size.
How do I convert px to rem?
Divide the pixel value by the root font size: rem = px ÷ base. With the default 16px base, 24px ÷ 16 = 1.5rem.
Should I use rem or px for font sizes?
Use rem for font sizes. Rem respects the font size a user sets in their browser, which helps accessibility. Px ignores that setting in most browsers.
What is the difference between rem and em?
Rem is relative to the root html element, so it is the same everywhere on the page. Em is relative to the font size of the current element, so it compounds when elements are nested.
What does setting html { font-size: 62.5% } do?
It makes the root font size 10px (62.5% of 16px), so 1rem = 10px and the maths is easier. It also shrinks any text you forget to size, so many teams prefer to keep the 16px default and use a converter instead.