PX to REM Converter (and REM to PX)
Pixels to rem and back, with any root font size.
Quick reference at 16px root
| Pixels | rem |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 6px | 0.375rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 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 |
| 128px | 8rem |
Use via API
Convert CSS pixels to rem or rem to pixels for a given root font size (16px by default). Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/px-to-rem-converter
curl https://pithlab.com/api/v1/tools/px-to-rem-converter \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"value":24,"direction":"pxToRem"}'About the PX to REM Converter
Convert pixels to rem and rem to pixels using any root font size, with a quick reference table of common sizes. Ideal for accessible, scalable CSS.
How to use the PX to REM Converter
- Set the root font size. Browsers default to 16px, but use your site's html font-size if you have changed it.
- Choose px → rem or rem → px and type a value. The result updates as you type.
- Use the table for quick lookups of common sizes at the current root size, and copy any value.
Examples
Input
24px, root 16
Output
1.5rem
Input
14px, root 16
Output
0.875rem
Input
2.5rem, root 10
Output
25px
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the usual 16px root, 24px ÷ 16 = 1.5rem.
Why use rem instead of px?
rem sizes scale with the root font size, so text and spacing grow when a visitor raises their browser's default font size. Pixel font sizes ignore that preference, which hurts accessibility.
What is the difference between rem and em?
rem is relative to the root (html) element's font size, so it is the same everywhere on the page. em is relative to the current element's font size, so it compounds when elements are nested.
Should I set html { font-size: 62.5% }?
It makes 1rem equal 10px at the default setting, which simplifies maths, but you must then set a readable body font size again. Many teams simply keep 16px and use a converter.