What is a PX to REM converter?
A PX to REM converter changes a CSS pixel value into a root-relative rem value. The result depends on the font size of the document root, normally the computed font-size of the html element.
Many browsers use 16px as the initial root font size, but projects can set a different value. This converter therefore lets you change the root font size instead of assuming that 1rem always equals 16px.
How to convert PX to REM
- Start with the default
16px = 1remconversion, or enter another pixel value. - Keep the root font size at
16px, or change it to match your project. - Copy the REM result.
Both fields are editable. You can also paste values such as 24px or 1.5rem, select a common root-size preset, and paste the other unit to move the value to the matching field.
PX to REM formula and example
Use this formula:
REM = PX ÷ Root Font SizeFor a 16px root font size:
24px ÷ 16px = 1.5remChanging the root font size changes the result. With a 20px root, the same 24px value becomes 1.2rem.
Common PX to REM conversions
The interactive table above updates when you change the root font size and can be exported as a CSV file. These common values use a 16px root:
| PX | REM |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
PX vs. REM
| PX | REM |
|---|---|
| A CSS absolute length unit | Relative to the root element’s font size |
| Direct for fixed visual details | Scales when the root font size changes |
| Often useful for borders and other small fixed details | Often useful for typography and scalable spacing |
PX and REM are both valid CSS units. Converting every pixel value is not automatically better; choose the unit that matches how the property should respond when the root font size changes.
When should you convert PX to REM?
PX to REM conversion is useful when implementing a design measured in pixels, moving older CSS toward root-relative sizing, checking typography tokens, or creating spacing values that should scale with the root font size.
Need the reverse calculation? Use the REM to PX Converter.
PX to REM FAQ
How do I convert PX to REM?
Divide the pixel value by the root font size. For example, 24 ÷ 16 = 1.5rem.
How many REM is 16px?
At a 16px root font size, 16px equals 1rem. At a 20px root, 16px equals 0.8rem.
Is 1rem always equal to 16px?
No. 1rem equals the computed font size of the root element. It equals 16px only when that root font size is 16px.
What root font size should I use?
Use the computed font-size of your project’s html element. If the project does not change it, 16px is a practical starting point.
Can I convert negative PX values?
Yes. Negative CSS lengths are useful for properties such as margins and transforms, so this converter preserves the sign.
What is the difference between REM and EM?
REM is based on the root element’s font size. EM depends on the element’s own font size for most properties, and on the parent font size when used for font-size.