NidhiDisclosure: This post contains affiliate links, which means we may earn a commission if you purchase through our links at no extra cost to you.
16 px equals 1 rem.
The conversion from pixels (px) to rem units depends on the root font size, which is commonly set to 16 pixels in many browsers. So, 16 pixels divided by 16 equals 1 rem, meaning 16 px is the same as 1 rem in relative sizing.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels to rem units is:
rem value = px value ÷ root font size (in px)
This works by dividing the pixel value by the root font size, which is the size of the html element’s font. Browsers default the root font size to 16px, so dividing by 16 converts px to rem.
Example calculation for 16 px to rem:
- Start with 16 px.
- Divide 16 by 16 (root font size): 16 ÷ 16 = 1.
- Result is 1 rem.
Conversion Example
- 24 px to rem:
- Divide 24 by 16: 24 ÷ 16 = 1.5 rem.
- So, 24 px equals 1.5 rem.
- 8 px to rem:
- 8 ÷ 16 = 0.5 rem.
- 8 px equals 0.5 rem.
- 32 px to rem:
- 32 ÷ 16 = 2 rem.
- 32 px equals 2 rem.
- 10 px to rem:
- 10 ÷ 16 = 0.625 rem.
- 10 px equals 0.625 rem.
- 48 px to rem:
- 48 ÷ 16 = 3 rem.
- 48 px equals 3 rem.
Conversion Chart
The following table shows pixel values from -9.0 to 41.0 and their equivalent rem values, assuming a root font size of 16 px. To read the chart, find the pixel value in the left column and look right to see its rem value.
| 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 rem equals 16 px if the root font size is different than 16?
- What does 16 px convert to in rem when using custom browser settings?
- Can 16 px be converted to rem for responsive web design?
- Why does 16 px equal 1 rem in CSS?
- Is 16 px always 1 rem regardless of device?
- How to convert 16 px to rem in a CSS stylesheet?
- What happens if the root font size changes from 16 px when converting 16 px to rem?
Conversion Definitions
px (pixel): A pixel is a unit of measurement for digital images or displays, representing a single point on a screen. It is an absolute unit used to define sizes in digital design, based on screen resolution, and doesn’t scale with user settings or parent elements.
rem (root em): Rem is a CSS unit relative to the font size of the root element, usually the html tag. Unlike pixels, rem units scale depending on the root font size, making them useful for responsive design and accessibility, allowing sizes to adjust based on user preferences.
Conversion FAQs
What happens if the browser’s default font size isn’t 16 px?
If the browser default font size is changed, the rem unit size changes accordingly. Since rem is based on the root font size, 16 px may no longer equal 1 rem. For example, if the root font size is 20 px, then 16 px equals 0.8 rem (16 ÷ 20).
Why use rem instead of px for font sizing?
Rem units scale relative to the root font size, so text adjusts when users change browser settings or on different devices. Pixels are fixed sizes, which can make accessibility harder. Using rem improves scalability and ensures consistent design across varying screen sizes.
Can rem units cause layout issues if not used carefully?
Yes, if the root font size changes unexpectedly, or if mixed with px units, layouts might break or text become too small or large. It’s important to keep a consistent root font size or carefully manage rem usage to avoid unexpected scaling.
Is rem conversion affected by zooming in browsers?
Zooming usually scales the entire page, including rem and px units, so visually rem and px sizes both increase or decrease. However, rem remains relative to the root font size, so zoom changes the whole layout proportionally, which px alone can’t do.
How does changing the root font size impact rem values?
Changing the root font size changes the base for rem calculations. For example, if the root font size doubles, 1 rem doubles in pixels. This affects all elements sized in rem, making them larger or smaller depending on the root font adjustment.
