16 pixels equals 1 rem.
Table of Contents
When converting pixels to rem, the base font size is usually 16 pixels, so 16 pixels is exactly 1 rem. Rem units are relative to the root element’s font size, making it scalable and flexible for responsive design.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels to rem is very simple: rem = pixels / baseFontSize. The base font size is the root element’s font size, set by default to 16 pixels in most browsers. This means 1 rem equals 16 pixels in default settings.
This works because rem units measure sizes relative to the root element, allowing for scalable and consistent sizing across different screen sizes or user preferences.
Example:
- If you have 32 pixels and the base font size is 16 pixels, then rem = 32 / 16 = 2 rem.
- For 24 pixels, rem = 24 / 16 = 1.5 rem.
Conversion Example
- Example 1: Convert 24 pixels to rem
- Start with the pixel value: 24px.
- Divide by the base font size (16px): 24 ÷ 16 = 1.5.
- The result is 1.5 rem.
- Example 2: Convert 8 pixels to rem
- Start with 8px.
- Divide by 16: 8 ÷ 16 = 0.5.
- Result is 0.5 rem.
- Example 3: Convert 40 pixels to rem
- Start with 40px.
- Divide by 16: 40 ÷ 16 = 2.5.
- Result: 2.5 rem.
- Example 4: Convert 10 pixels to rem
- Start with 10px.
- Divide by 16: 10 ÷ 16 = 0.625.
- Result: 0.625 rem.
Conversion Chart
This chart shows pixel values from -9.0 to 41.0 and their equivalent rem values. To read the chart, find the pixel value in the left column and then look at the right column for the rem value, calculated by dividing the pixel by 16.
| 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 are 16 pixels equal to if the base font size changes?
- What is the rem value of 16 pixels when root font size is 18px?
- Is 16px always 1 rem in all browsers?
- How do I convert 16 pixels to rem in CSS manually?
- Why does 16 pixels equal 1 rem by default?
- Can I use rem instead of pixels if I want 16px size?
- What happens if I change root font size from 16px to 20px for 16px element?
Conversion Definitions
Pixels: Pixels are the smallest units of digital images displayed on screens, representing a single point in a raster image. Their size can vary depending on screen resolution and device pixel density, but in web design, they often act as fixed units for layout and font sizes.
Rem: Rem stands for “root em,” a relative unit in CSS that scales according to the root element’s font size. Unlike pixels, rem adapts to user preferences and browser settings, making layouts more flexible and accessible across different devices and resolutions.
Conversion FAQs
Why is 16 pixels equivalent to 1 rem in many cases?
Most browsers set the default root font size to 16 pixels, so 1 rem equals 16 pixels unless the root font size is modified. This default acts as a standard baseline for web typography and scaling.
What if my root font size is not 16 pixels? How does it affect rem?
If the root font size changes, the rem unit scales accordingly. For example, if the root font size is 20 pixels, 1 rem equals 20 pixels. So converting pixels to rem requires dividing by the current root font size, not always 16.
Can negative pixel values be converted to rem?
Yes, negative pixel values convert just like positive ones, by dividing by the base font size. Negative rem values might be used for positioning or offsets in CSS, but should be used carefully to avoid layout issues.
Why choose rem over pixels for font sizing?
Using rem allows more flexible scalability with user settings or media queries. Pixels are fixed and do not scale well with user preferences, while rem adjusts if the root font size changes, improving accessibility and responsiveness.
Does rem affect only fonts or other elements too?
Rem units can be used for any CSS property that accepts length values including spacing, widths, heights, and positioning. This consistency helps maintain proportional scaling throughout a design.