16 px is equal to 1 rem.
The conversion from pixels (px) to rem units is based on the root font size, which by default is 16 pixels in most browsers. So, 16 pixels divided by the root font size of 16 pixels gives 1 rem.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert px to rem is:
rem = px ÷ root font size
Because rem units are relative to the root font size, which is commonly 16 pixels, you divide the pixel value by 16 to get rem.
Example: Convert 16 px to rem
- Identify the root font size: 16 px
- Divide the pixel value by root font size: 16 ÷ 16 = 1
- Result: 1 rem
Conversion Example
- Convert 24 px to rem:
- Divide 24 by 16: 24 ÷ 16 = 1.5
- 24 px equals 1.5 rem
- Convert 8 px to rem:
- Divide 8 by 16: 8 ÷ 16 = 0.5
- 8 px equals 0.5 rem
- Convert 32 px to rem:
- Divide 32 by 16: 32 ÷ 16 = 2
- 32 px equals 2 rem
- Convert 12 px to rem:
- Divide 12 by 16: 12 ÷ 16 = 0.75
- 12 px equals 0.75 rem
- Convert 40 px to rem:
- Divide 40 by 16: 40 ÷ 16 = 2.5
- 40 px equals 2.5 rem
Conversion Chart
The chart below shows px values from -9.0 to 41.0 converted into rem by dividing each px value by 16. Use this to quickly find rem equivalents without calculation.
| Pixels (px) | Rem | Pixels (px) | Rem |
|---|---|---|---|
| -9.0 | -0.5625 | 17.0 | 1.0625 |
| -8.0 | -0.5 | 18.0 | 1.125 |
| -7.0 | -0.4375 | 19.0 | 1.1875 |
| -6.0 | -0.375 | 20.0 | 1.25 |
| -5.0 | -0.3125 | 21.0 | 1.3125 |
| -4.0 | -0.25 | 22.0 | 1.375 |
| -3.0 | -0.1875 | 23.0 | 1.4375 |
| -2.0 | -0.125 | 24.0 | 1.5 |
| -1.0 | -0.0625 | 25.0 | 1.5625 |
| 0.0 | 0 | 26.0 | 1.625 |
| 1.0 | 0.0625 | 27.0 | 1.6875 |
| 2.0 | 0.125 | 28.0 | 1.75 |
| 3.0 | 0.1875 | 29.0 | 1.8125 |
| 4.0 | 0.25 | 30.0 | 1.875 |
| 5.0 | 0.3125 | 31.0 | 1.9375 |
| 6.0 | 0.375 | 32.0 | 2 |
| 7.0 | 0.4375 | 33.0 | 2.0625 |
| 8.0 | 0.5 | 34.0 | 2.125 |
| 9.0 | 0.5625 | 35.0 | 2.1875 |
| 10.0 | 0.625 | 36.0 | 2.25 |
| 11.0 | 0.6875 | 37.0 | 2.3125 |
| 12.0 | 0.75 | 38.0 | 2.375 |
| 13.0 | 0.8125 | 39.0 | 2.4375 |
| 14.0 | 0.875 | 40.0 | 2.5 |
| 15.0 | 0.9375 | 41.0 | 2.5625 |
| 16.0 | 1 |
Related Conversion Questions
- How do I convert 16 pixels to rem units in CSS?
- What is the rem value for 16px when root font size changes?
- Can 16 px equal more than 1 rem on different browsers?
- If my root font size is 20px, what rem does 16px correspond to?
- Why does 16px sometimes not equal 1 rem in responsive design?
- How to set a custom root font size so 16px equals 1.2 rem?
- Is 16px always the base size for rem conversion in web projects?
Conversion Definitions
px: Px, short for pixel, is a fixed unit of measurement in digital images and screens. It represents a single point in a raster graphic or display. Pixels are absolute units, meaning they do not scale based on screen size or user settings, making them precise but less flexible in responsive designs.
rem: Rem stands for “root em” and is a relative length unit in CSS. It measures sizes relative to the root element’s font size, usually the <html> element. Rem units allow scalable and accessible designs, because changing the root font size resizes all rem-based measurements accordingly.
Conversion FAQs
Does the root font size always have to be 16px?
No, the root font size can be changed by CSS, for example by setting html { font-size: 18px; }. When the root font size changes, rem values will adjust accordingly. So 1 rem equals the new root font size, not always 16px.
Why might 16px not exactly equal 1 rem on my website?
If the root font size in your CSS or browser settings is different from 16px, then 16px will not equal exactly 1 rem. Also, some browsers or user preferences can change default font sizes, affecting rem calculations.
Can I use rem units for margins and paddings instead of px?
Yes, rem units are often preferred for margins, paddings, and font sizes because they scale with the root font size, making layouts more responsive and accessible to users who adjust font sizes.
How do rem and em units differ when converting from px?
Rem units are relative to the root element font size; em units are relative to the font size of the current element. So, em values change based on where they are used, but rem remains consistent across the document.
Is it better to use rem or px for web typography?
Using rem units is generally better for typography on the web because it allows users to control text size by adjusting the root font size, improving accessibility. Px units are fixed and less flexible for user preferences or responsive layouts.