16 px is equal to 1 rem.
The conversion from pixels (px) to rem units depends on the root font size, which is usually set to 16 pixels by default in browsers. Since 1 rem equals the root font size, converting 16 px to rem means dividing 16 by 16, resulting in 1 rem.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert px to rem is:
rem = px ÷ root font size
Since the root font size is usually 16 pixels, the formula becomes:
rem = px ÷ 16
This works because rem units are relative to the font size of the root element (usually the <html> tag). By dividing the pixel value by the root font size, you get the equivalent rem value that scales properly with user settings and responsive designs.
Example calculation:
- Given: 16 px
- Root font size = 16 px
- Calculation: 16 ÷ 16 = 1 rem
- Result: 16 px equals 1 rem
Conversion Example
- 24 px to rem:
- Divide 24 by 16
- 24 ÷ 16 = 1.5 rem
- Therefore, 24 px equals 1.5 rem
- 8 px to rem:
- Divide 8 by 16
- 8 ÷ 16 = 0.5 rem
- So, 8 px equals 0.5 rem
- 32 px to rem:
- Divide 32 by 16
- 32 ÷ 16 = 2 rem
- Thus, 32 px equals 2 rem
- 12 px to rem:
- Divide 12 by 16
- 12 ÷ 16 = 0.75 rem
- Hence, 12 px equals 0.75 rem
- 20 px to rem:
- Divide 20 by 16
- 20 ÷ 16 = 1.25 rem
- Therefore, 20 px equals 1.25 rem
Conversion Chart
This table shows pixel values from -9.0 to 41.0, converted into rem based on a 16px root font size. Negative values are included for context but might not be used in typical design.
| Pixels (px) | Rem |
|---|---|
| -9.0 | -0.5625 |
| -5.0 | -0.3125 |
| 0.0 | 0.0000 |
| 1.0 | 0.0625 |
| 5.0 | 0.3125 |
| 10.0 | 0.6250 |
| 15.0 | 0.9375 |
| 16.0 | 1.0000 |
| 20.0 | 1.2500 |
| 25.0 | 1.5625 |
| 30.0 | 1.8750 |
| 35.0 | 2.1875 |
| 40.0 | 2.5000 |
| 41.0 | 2.5625 |
To use this chart, find the pixel value you want on the left column, then read across to see the equivalent rem value. This helps when you want to set font sizes or spacing in rem without calculating each time.
Related Conversion Questions
- How do I convert 16 pixels to rem units in CSS?
- What is the rem value for 16px if root font size changes?
- Is 16px always equal to 1 rem in all browsers?
- How to calculate rem from px for a 16 pixel font size?
- Why does 16px equal 1 rem in many web designs?
- Can I use rem instead of px for 16 pixels spacing?
- What happens when root font size differs from 16px for 16px to rem?
Conversion Definitions
px (pixel): A pixel is the smallest unit of measurement in digital imaging and screen displays. It represents a single point on a screen, with its size varying depending on device resolution and screen density. Pixels are absolute units used to specify dimensions in web design and graphics.
rem (root em): rem is a relative length unit in CSS, which measures size relative to the root element’s font size (usually <html>). Unlike em, rem remains consistent regardless of nesting levels, making it convenient for scalable and accessible layouts in responsive designs.
Conversion FAQs
Can the root font size be different than 16px, and how does it affect px to rem conversion?
Yes, the root font size can be changed by CSS on the <html> element. When it’s different than 16px, the conversion formula changes accordingly. For example, if root font size is 20px, then 16px equals 16 ÷ 20 = 0.8 rem instead of 1 rem.
Why should I use rem units instead of pixels in CSS?
Rem units provide better scalability and accessibility since they’re relative to the root font size. Users can adjust browser font sizes or zoom settings, and rem-based layouts adapt more consistently than fixed pixel sizes, improving readability and responsiveness.
Is 1 rem always equal to 16 pixels?
By default, most browsers set the root font size to 16 pixels, making 1 rem equal to 16 pixels. However, if the root font size is changed, 1 rem will equal whatever that root size is. So 1 rem is not always 16 pixels, it depends on the root font size.
How do negative pixel values convert to rem?
Negative pixel values convert to negative rem values by dividing by the root font size, same as positive values. Although rarely used, negative rem can be applied for positioning or offsets. For example, -8px converts to -0.5 rem with a 16px root font size.
Can rem units affect layout performance compared to pixels?
Using rem units doesn’t negatively impact performance. They rely on CSS calculations that browsers handle quickly. The advantage of rem is flexibility, not performance difference. Pixels are fixed and easier to calculate but less adaptive for responsive designs.