16 px equals 1 rem.
The conversion from pixels (px) to rem units depends on the root font size of the document, which by default is 16 pixels in most browsers. Therefore, 16 pixels divided by the root font size of 16 pixels results in 1 rem.
Conversion Tool
Result in rem:
Conversion Formula
The basic formula to convert pixels to rem is:
rem value = pixel value ÷ root font size in pixels
This works because rem units are relative to the root element’s font size, which commonly is 16 pixels by default. So if you want to convert 16 pixels to rem, you divide 16 by 16.
Example calculation:
- Given: 16 px
- Root font size: 16 px
- rem = 16 px ÷ 16 px = 1 rem
That means 16 pixels equals 1 rem.
Conversion Example
- Convert 24 px to rem:
- Divide 24 by 16 (root font size)
- 24 ÷ 16 = 1.5 rem
- Thus, 24 px equals 1.5 rem
- Convert 8 px to rem:
- 8 ÷ 16 = 0.5 rem
- 8 px equals 0.5 rem
- Convert 32 px to rem:
- 32 ÷ 16 = 2 rem
- 32 px equals 2 rem
- Convert 10 px to rem:
- 10 ÷ 16 = 0.625 rem
- 10 px equals 0.625 rem
- Convert 48 px to rem:
- 48 ÷ 16 = 3 rem
- 48 px equals 3 rem
Conversion Chart
The chart below shows pixel values and their equivalent rem units based on the 16 px root font size. To use, find your pixel value in the left column and see corresponding rem value to the right.
| Pixels (px) | Rem |
|---|---|
| -9.0 | -0.5625 |
| -8.0 | -0.5 |
| -7.0 | -0.4375 |
| -6.0 | -0.375 |
| -5.0 | -0.3125 |
| -4.0 | -0.25 |
| -3.0 | -0.1875 |
| -2.0 | -0.125 |
| -1.0 | -0.0625 |
| 0.0 | 0 |
| 1.0 | 0.0625 |
| 2.0 | 0.125 |
| 3.0 | 0.1875 |
| 4.0 | 0.25 |
| 5.0 | 0.3125 |
| 6.0 | 0.375 |
| 7.0 | 0.4375 |
| 8.0 | 0.5 |
| 9.0 | 0.5625 |
| 10.0 | 0.625 |
| 11.0 | 0.6875 |
| 12.0 | 0.75 |
| 13.0 | 0.8125 |
| 14.0 | 0.875 |
| 15.0 | 0.9375 |
| 16.0 | 1 |
| 17.0 | 1.0625 |
| 18.0 | 1.125 |
| 19.0 | 1.1875 |
| 20.0 | 1.25 |
| 21.0 | 1.3125 |
| 22.0 | 1.375 |
| 23.0 | 1.4375 |
| 24.0 | 1.5 |
| 25.0 | 1.5625 |
| 26.0 | 1.625 |
| 27.0 | 1.6875 |
| 28.0 | 1.75 |
| 29.0 | 1.8125 |
| 30.0 | 1.875 |
| 31.0 | 1.9375 |
| 32.0 | 2 |
| 33.0 | 2.0625 |
| 34.0 | 2.125 |
| 35.0 | 2.1875 |
| 36.0 | 2.25 |
| 37.0 | 2.3125 |
| 38.0 | 2.375 |
| 39.0 | 2.4375 |
| 40.0 | 2.5 |
| 41.0 | 2.5625 |
Related Conversion Questions
- How many rems is 16 px equal to if root font size changes?
- Is 16 px always 1 rem in every browser?
- What happens to rem value if root font size isn’t 16 px?
- How to convert 16 px padding to rem in CSS?
- Why does 16 px equal 1 rem by default?
- Can 16 px ever be less than 1 rem?
- How to calculate rem from 16 px when root font is 20 px?
Conversion Definitions
px: Pixels (px) are absolute length units used in digital displays that represent a single point in a raster image or on a screen. Each pixel corresponds to one dot on the display, making it a fixed size unit that does not scale with user settings or zooming.
rem: Rem (root em) is a relative length unit in CSS calculated against the root element’s font size. Unlike px, rem units allow scalable and flexible designs, adjusting automatically if the root font size changes, providing consistency in responsive layouts.
Conversion FAQs
Why does 16 px equal exactly 1 rem in browsers?
Most browsers set the default root font size to 16 pixels. Because rem units are relative to this root font size, dividing any pixel value by 16 gives the rem equivalent. So 16 px divided by 16 equals 1 rem exactly, matching the default scaling.
What if the root font size is different than 16 px?
If the root font size changes, the conversion ratio changes too. For example, if the root font size is 20 px, then 16 px equals 16 ÷ 20 = 0.8 rem. Rem values always depend on the current root font size, so conversion must account for that.
Can negative pixel values be converted to rem?
Yes, negative pixel values can be converted to rem by applying the same formula. For example -16 px converts to -1 rem. Though negative sizes are uncommon, they can represent offsets or positioning in some CSS contexts.
Why use rem instead of px for font sizes?
Rem units improve accessibility and scalability because they respond to user browser settings and root font size changes. Using rem allows consistent scaling across devices and better control over responsive typography, while px units remain fixed and less flexible.
Does rem conversion affect layout performance?
Using rem units does not negatively affect performance. Browsers calculate rem values efficiently, and because rem scales with root font size, it helps maintain consistent layouts without recalculating pixel values on resizing or zooming.
