Convert pixels (px) to rem units quickly and accurately. Enter a pixel value and get the equivalent rem value based on your selected root font size.
Enter your pixel value and root font size below.
A PX to REM converter helps you translate a pixel value into rem units for use in CSS. Pixels are commonly used when defining exact dimensions, while rem is a relative CSS unit that is based on the font size of the root HTML element.
This conversion is particularly useful when creating scalable typography, spacing systems, and responsive web layouts. Instead of calculating the conversion manually, you can enter your values above and get the result instantly.
The conversion depends on the root font size used by your website. A common browser and CSS setup uses a root font size of 16px, which means 16px equals 1rem.
To convert pixels to rem, divide the pixel value by the root element's font size.
For example, if your root font size is 16px and you want to convert 32px:
If your website uses a different root font size, the result will change accordingly. That's why the converter above allows you to enter your own root font size.
The following values are based on a 16px root font size.
| Pixels (PX) | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
| 80px | 5rem |
| 96px | 6rem |
| 128px | 8rem |
REM stands for "root em." It is a relative CSS unit whose
size is calculated from the font size of the root HTML
element, represented by the html selector.
For example, if the root font size is 16px, then 1rem represents 16px. A value of 2rem represents 32px, while 0.5rem represents 8px.
html {
font-size: 16px;
}
.example {
font-size: 2rem;
}
In this example, the element's font size would be equivalent to 32px when the root font size is 16px.
REM is commonly used for font sizes because values remain related to the root font size.
Margins and padding can use rem to create a consistent and scalable spacing system.
Relative units can make CSS values easier to scale when the root font size changes.
Using relative units can make designs more adaptable to changes in text sizing and user preferences.
PX is an absolute CSS length unit, while REM is relative to the root element's font size. This difference makes them useful for different situations.
Common questions about converting pixels to rem units.
Divide the pixel value by the root font size. For example, with a 16px root font size, 32px divided by 16px equals 2rem.
It depends on the root font size. With the common 16px root font size, 1rem equals 16px.
With a 16px root font size, 32px equals 2rem.
With a 16px root font size, 24px equals 1.5rem.
Yes. REM is based on the root element's font size. If the root font size changes, the PX to REM conversion changes as well.
Yes. REM can be used for properties such as padding, margin, gaps, and font sizes when a scalable spacing system is appropriate for your design.
Explore all of our free pixel and CSS unit conversion tools.
View All Converters →