2 px equals 0.125 rem.
This conversion assumes the root font size is 16 pixels, which is the default size in most browsers. To convert pixels to rem, divide the pixel value by the root font size. Here, 2 divided by 16 gives the rem value.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels (px) to rem units is: rem = px ÷ rootFontSize. The rootFontSize is the font size set on the root HTML element, most times 16 pixels by default in browsers.
Why it works because rem units are relative to the root font size. So, if 1 rem equals 16 px, then dividing the px value by 16 gives the rem equivalent.
Example calculation:
- Given 2 px, and root font size 16 px
- Calculate rem: 2 ÷ 16 = 0.125 rem
Conversion Example
- Example 1: Convert 24 px to rem
- Start with 24 px
- Divide by 16 (root font size): 24 ÷ 16 = 1.5
- Result: 24 px equals 1.5 rem
- Example 2: Convert 8 px to rem
- Start with 8 px
- Divide by 16: 8 ÷ 16 = 0.5
- Result: 8 px equals 0.5 rem
- Example 3: Convert 32 px to rem
- Start with 32 px
- Divide by 16: 32 ÷ 16 = 2
- Result: 32 px equals 2 rem
- Example 4: Convert 10 px to rem
- Start with 10 px
- Divide by 16: 10 ÷ 16 = 0.625
- Result: 10 px equals 0.625 rem
Conversion Chart
This chart shows pixel values from -23.0 to 27.0 and their rem equivalents. To use it, find the px value in the left column, then read the rem value on the right.
| Pixels (px) | Rem (rem) |
|---|---|
| -23.0 | -1.4375 |
| -22.0 | -1.3750 |
| -21.0 | -1.3125 |
| -20.0 | -1.2500 |
| -19.0 | -1.1875 |
| -18.0 | -1.1250 |
| -17.0 | -1.0625 |
| -16.0 | -1.0000 |
| -15.0 | -0.9375 |
| -14.0 | -0.8750 |
| -13.0 | -0.8125 |
| -12.0 | -0.7500 |
| -11.0 | -0.6875 |
| -10.0 | -0.6250 |
| -9.0 | -0.5625 |
| -8.0 | -0.5000 |
| -7.0 | -0.4375 |
| -6.0 | -0.3750 |
| -5.0 | -0.3125 |
| -4.0 | -0.2500 |
| -3.0 | -0.1875 |
| -2.0 | -0.1250 |
| -1.0 | -0.0625 |
| 0.0 | 0.0000 |
| 1.0 | 0.0625 |
| 2.0 | 0.1250 |
| 3.0 | 0.1875 |
| 4.0 | 0.2500 |
| 5.0 | 0.3125 |
| 6.0 | 0.3750 |
| 7.0 | 0.4375 |
| 8.0 | 0.5000 |
| 9.0 | 0.5625 |
| 10.0 | 0.6250 |
| 11.0 | 0.6875 |
| 12.0 | 0.7500 |
| 13.0 | 0.8125 |
| 14.0 | 0.8750 |
| 15.0 | 0.9375 |
| 16.0 | 1.0000 |
| 17.0 | 1.0625 |
| 18.0 | 1.1250 |
| 19.0 | 1.1875 |
| 20.0 | 1.2500 |
| 21.0 | 1.3125 |
| 22.0 | 1.3750 |
| 23.0 | 1.4375 |
| 24.0 | 1.5000 |
| 25.0 | 1.5625 |
| 26.0 | 1.6250 |
| 27.0 | 1.6875 |
Related Conversion Questions
- How many rem is 2 pixels if the root font size is 18px?
- What is the rem value of 2 px with a custom root size?
- Why does 2 px convert to 0.125 rem in CSS?
- Can 2px be accurately converted to rem without knowing root font size?
- How to convert 2 px to rem in responsive web design?
- Is 2 px equal to 0.125 rem in all browsers?
- What happens if the root font size changes but px stays 2?
Conversion Definitions
px: A px, short for pixel, is the smallest unit of measurement in digital screens. It represents a single dot on a display, used to define size, spacing, and resolution in web design and graphics. Pixel size can vary depending on screen density and resolution settings.
rem: Rem means “root em” and represents a scalable unit in CSS. It’s based on the font size of the root element (usually the HTML tag). Using rem allows for flexible design, scaling element sizes relative to the base font size, which improves accessibility and responsiveness.
Conversion FAQs
Does the root font size always have to be 16px for px to rem conversion?
No, although 16px is the default in most browsers, the root font size can be changed by CSS. If it’s changed, the px to rem conversion ratio will also change accordingly. For example, if root size is 20px, 2 px becomes 0.1 rem instead of 0.125.
Can I use rem instead of px for all CSS measurements?
You can use rem for many properties like font size, margins, and paddings, but sometimes px is preferred for pixel-perfect layouts or images. Rem units help maintain scalability, but some designs require fixed pixel values for precision.
Why is converting px to rem useful in web design?
Using rem units enables better scalability and accessibility. When users change browser font size, rem-based elements rescale properly, improving readability. Pixels are fixed size and don’t scale with user preferences, which can cause issues.
How do negative pixel values convert to rem?
Negative px values convert the same way as positive ones by dividing by root font size, resulting in negative rem values. Negative sizes might be used for positioning or offsets in CSS, but their usage depends on the context.
Is the conversion result always precise?
The conversion is mathematically precise, but due to floating point rounding in CSS and browsers, the displayed size might slightly differ. Using decimal places in rem values helps reduce visible discrepancies.
