What is a PX to REM converter and why use it?
A px to rem converter turns fixed pixel sizes into rem units. One rem equals the font size of the root html element, which is 16px in most browsers unless you change it.
Sizing text, spacing and breakpoints in rem lets your layout respect the font size a visitor has chosen in their browser. That makes sites more accessible than hard-coded pixels, and the converter saves you doing the division for every value in a design file.
How to use this tool
Enter the pixel value
Type the size in pixels, such as 24 for a 24px heading.
Check the base font size
The default is 16px. Change it if your html element uses another font-size, for example 10px.
Copy the rem value
Press Copy rem value and paste it into your CSS.
How PX to REM is calculated
Divide the pixel value by the root font size. With the default 16px base, 24px is 24 ÷ 16 = 1.5rem.
If you set html { font-size: 62.5% } the base becomes 10px, so 24px is 2.4rem. Always use the same base here as in your stylesheet.
rem = px ÷ root font sizepx = rem × root font size| Pixels | REM (16px base) |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
FAQ
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px, 32px ÷ 16 = 2rem.
What is 16px in rem?
16px is 1rem when the root font size is the browser default of 16px.
Should I use rem or px?
Use rem for font sizes, spacing and widths that should scale with the user's font settings. Pixels are fine for borders and thin details that should stay fixed.
What is the difference between rem and em?
rem is relative to the root element's font size, while em is relative to the current element's font size, so em values compound when nested.