1 Rem to Px – Full Calculation Guide
1 rem equals 16 pixels by default in most browsers.
The rem unit is relative to the root element’s font size, which is commonly 16px, so converting 1 rem to pixels means multiplying 1 by 16.
Conversion Tool
Result in px:
Conversion Formula
The conversion formula from rem to pixels is: pixels = rem × root font size. Since the root font size in browsers is normally 16 pixels, the formula becomes:
pixels = rem × 16
This works because rem units measure size relative to the root font size, so multiplying the rem value by the root font size gives the absolute pixel size.
Example: Convert 1.5 rem to pixels
- 1.5 rem × 16 = 24 pixels
- So, 1.5 rem equals 24 pixels.
Conversion Example
- Convert 2 rem to px:
- Multiply 2 by 16
- 2 × 16 = 32 px
- Result: 2 rem = 32 pixels
- Convert 0.75 rem to px:
- 0.75 × 16 = 12 px
- So 0.75 rem equals 12 pixels
- Convert 3.3 rem to px:
- 3.3 × 16 = 52.8 px
- Therefore 3.3 rem equals 52.8 pixels
- Convert 0 rem to px:
- 0 × 16 = 0 px
- 0 rem equals 0 pixels
- Convert 1.25 rem to px:
- 1.25 × 16 = 20 px
- 1.25 rem equals 20 pixels
Conversion Chart
This chart shows rem values from -24.0 to 26.0 and their corresponding pixel values. To use, find the rem value you want and read across to see the pixel equivalent.
| rem | px | rem | px | rem | px |
|---|---|---|---|---|---|
| -24.0 | -384 | 0.0 | 0 | 24.0 | 384 |
| -23.0 | -368 | 1.0 | 16 | 25.0 | 400 |
| -22.0 | -352 | 2.0 | 32 | 26.0 | 416 |
| -21.0 | -336 | 3.0 | 48 | ||
| -20.0 | -320 | 4.0 | 64 | ||
| -19.0 | -304 | 5.0 | 80 | ||
| -18.0 | -288 | 6.0 | 96 | ||
| -17.0 | -272 | 7.0 | 112 | ||
| -16.0 | -256 | 8.0 | 128 | ||
| -15.0 | -240 | 9.0 | 144 | ||
| -14.0 | -224 | 10.0 | 160 | ||
| -13.0 | -208 | 11.0 | 176 | ||
| -12.0 | -192 | 12.0 | 192 | ||
| -11.0 | -176 | 13.0 | 208 | ||
| -10.0 | -160 | 14.0 | 224 | ||
| -9.0 | -144 | 15.0 | 240 | ||
| -8.0 | -128 | 16.0 | 256 | ||
| -7.0 | -112 | 17.0 | 272 | ||
| -6.0 | -96 | 18.0 | 288 | ||
| -5.0 | -80 | 19.0 | 304 | ||
| -4.0 | -64 | 20.0 | 320 | ||
| -3.0 | -48 | 21.0 | 336 | ||
| -2.0 | -32 | 22.0 | 352 | ||
| -1.0 | -16 | 23.0 | 368 |
Related Conversion Questions
- How many pixels are in 1 rem for web design?
- What is the pixel equivalent of 1 rem in CSS?
- Does 1 rem always equal 16 pixels?
- How do I convert 1 rem to px in different browsers?
- What affects the conversion rate of 1 rem to pixels?
- Is 1 rem size consistent across devices in px?
- Why does 1 rem sometimes not equal 16 pixels?
Conversion Definitions
rem: rem stands for “root em” and is a CSS unit that measures size relative to the root element’s font size. Unlike em units which depend on parent elements, rem always uses the root, allowing consistent scaling across the page.
px: px means pixels, the smallest unit on a screen. It represents a single dot on the display and is an absolute unit in CSS, used to define exact sizes regardless of other elements.
Conversion FAQs
Why does 1 rem not always equal 16 pixels?
Because the root font size can be changed by the user or by CSS styles, 1 rem equals whatever the root font size is set to. If the root font size is changed from 16px to 20px, then 1 rem will be 20 pixels instead of 16.
Can I use rem units instead of pixels in all CSS properties?
Rem units can be used in many CSS properties like font-size, margin, padding, but some properties require absolute units or behave differently. While rem is flexible, pixels might be needed for precise control in some cases.
How does browser zoom affect rem to px conversion?
Browser zoom changes the effective root font size, so 1 rem in zoomed page might correspond to more or fewer pixels visually, even if the CSS value remains same. This affects how rem scales on zoom.
Is rem better than px for responsive design?
Rem units help make scaling easier because they adapt to the root font size, which can be adjusted for different screen sizes. Pixels are fixed, so rem provides better flexibility for responsive layouts.
How can I find the root font size of a webpage?
Using browser developer tools, inspect the html element and check its computed font-size. This value is the root font size and used to calculate rem units to pixels.