16 pixels equals 1 rem.
The conversion from pixels (px) to rem is based on the root element’s font size, which by default in most browsers is 16 pixels. So, 16 pixels equals 1 rem because rem units are relative to that root font size.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels to rem is:
rem = pixels ÷ root font size
By default, browsers set the root font size to 16 pixels, so the formula becomes:
rem = pixels ÷ 16
This works because rem units are relative to the root font size. If the root font size changes, the conversion adjusts accordingly.
Example calculation for 16 pixels:
- Start with the pixel value: 16px
- Divide by the root font size: 16 ÷ 16 = 1
- Result is 1rem
Conversion Example
- Convert 24 pixels to rem:
- Divide 24 by 16: 24 ÷ 16 = 1.5
- 24 pixels equals 1.5 rem
- Convert 8 pixels to rem:
- 8 ÷ 16 = 0.5
- 8 pixels equals 0.5 rem
- Convert 32 pixels to rem:
- 32 ÷ 16 = 2
- 32 pixels equals 2 rem
- Convert 10 pixels to rem:
- 10 ÷ 16 = 0.625
- 10 pixels equals 0.625 rem
- Convert 40 pixels to rem:
- 40 ÷ 16 = 2.5
- 40 pixels equals 2.5 rem
Conversion Chart
This chart shows pixel values from -9.0 up to 41.0, and their equivalent rem values calculated by dividing by 16. Use this to quickly find rem sizes without calculator.
| 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 pixels in CSS?
- What is the rem value for 16px font size?
- Is 16 pixels the same as 1 rem always?
- How to convert 16px to rem in web development?
- Why does 16 pixels equal 1 rem by default?
- Can I change root font size to make 16px different rem?
- What does 16px to rem conversion affect in responsive design?
Conversion Definitions
Pixels: Pixels are the smallest unit of measurement on a digital screen, representing a single point of color. Pixel sizes are fixed and absolute, used to define exact dimensions in web design or images. They do not scale based on user settings or device resolution.
Rem: Rem stands for “root em” and is a relative unit in CSS representing the font size of the root element. Unlike pixels, rem units scale depending on the root font size, allowing flexible and responsive designs. 1 rem equals the font size set on the root, often 16px.
Conversion FAQs
Does changing the browser’s default font size affect rem values?
Yes, rem units are based on the root element’s font size, which is often the browser’s default font size (16px). If the user changes default font size in browser settings, rem values scale accordingly, impacting layout and text size.
Why use rem instead of pixels for font sizes?
Using rem allows fonts and elements scale relative to the root size, improving accessibility and responsiveness. Pixels are fixed, so rem units adapt better to different screen sizes or user preferences, making content easier to read on various devices.
Can rem values be negative or zero?
While zero rem (0rem) simply means no size, negative rem values are valid but usually produce unintended results like negative spacing or overlap. Negative sizes are rarely useful in layouts, but technically allowed by CSS.
Is 16 pixels always equal to 1 rem?
16 pixels equals 1 rem only if the root font size is 16px, which is default in most browsers. If the root font size changes, 1 rem equals that new size, so 16 pixels might no longer equal 1 rem.
How does rem help with responsive design?
Rem units let you scale elements depending on root font size, making layouts flexible. When root font size changes (via media queries or user settings), rem-based sizes adjust proportionally, improving usability across devices and screen resolutions.