2 rem equals 32 pixels (px) when the root font size is 16px.
Table of Contents
The conversion from rem to px depends on the root element’s font size, which is commonly 16px in most browsers. Multiplying rem value by this base font size gives the pixel equivalent.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert rem to px is:
pixels = rem × root font size
This formula works because 1 rem unit equals the font size of the root element. In most browsers, the default root font size is 16px, so multiplying rem units by 16 converts it into pixels.
Example calculation:
- If you have 2 rem, multiply by 16:
2 × 16 = 32px - For 0.5 rem:
0.5 × 16 = 8px
Conversion Example
- Convert 3 rem to px
- Step 1: Identify root font size = 16px
- Step 2: Multiply 3 rem by 16:
3 × 16 = 48px - Step 3: Result: 48 pixels
- Convert 1.25 rem to px
- Step 1: Root font size = 16px
- Step 2: Multiply 1.25 × 16:
1.25 × 16 = 20px - Step 3: Result is 20 pixels
- Convert 0.75 rem to px
- Step 1: Root font size is 16px
- Step 2: Multiply 0.75 × 16:
0.75 × 16 = 12px - Step 3: Result equals 12 pixels
- Convert 4.5 rem to px
- Step 1: Root font size equals 16px
- Step 2: Multiply 4.5 × 16:
4.5 × 16 = 72px - Step 3: Result: 72 pixels
Conversion Chart
This chart shows rem values from -23.0 to 27.0 and their corresponding pixel values, assuming a root font size of 16px. You can use this table to quickly find pixel equivalents without calculation.
| Rem | Pixels (px) |
|---|---|
| -23.0 | -368 |
| -20.0 | -320 |
| -15.5 | -248 |
| -10.0 | -160 |
| -5.0 | -80 |
| -1.0 | -16 |
| 0.0 | 0 |
| 1.0 | 16 |
| 2.0 | 32 |
| 5.5 | 88 |
| 10.0 | 160 |
| 15.0 | 240 |
| 20.0 | 320 |
| 25.0 | 400 |
| 27.0 | 432 |
Related Conversion Questions
- How many pixels are in 2 rem if the root font size changes?
- What is the pixel value of 2 rem on mobile devices?
- Is 2 rem always equal to 32 pixels in all browsers?
- How do I convert 2 rem to px for custom root font sizes?
- Why does 2 rem sometimes not equal 32 pixels in CSS?
- Can I use 2 rem instead of pixels for responsive design?
- What’s the difference between rem and px when converting 2 rem?
Conversion Definitions
rem: rem stands for “root em,” a CSS unit that measures font size relative to the root element’s font size. Unlike em, which depends on the parent’s font size, rem always refers back to the root, making it easier to maintain consistent sizing across a webpage.
px: px means pixels, a fixed unit used in digital displays representing a single point on the screen. Pixel sizes are absolute and do not change based on other elements, making px a precise measurement for layout and design in web development.
Conversion FAQs
Does the root font size always have to be 16px for rem conversions?
No, the root font size can be changed using CSS, which will affect rem conversions. If the root font size is set to 20px, for example, then 1 rem equals 20 pixels, changing all calculations accordingly.
What happens when the root font size is modified in browsers?
When a user or developer modifies the root font size, all rem-based measurements scale proportionally. This means 2 rem could represent a different pixel value, which can impact layout and design consistency if not accounted for.
Can negative rem values be converted to pixels?
Yes, negative rem values convert to negative pixel values by the same multiplication rule. For instance, -2 rem equals -32 pixels if the root font size is 16px, though negative sizes are rarely used in CSS.
Why use rem instead of pixels for font sizing?
Using rem units allows fonts to be scalable and accessible because they depend on the root font size and respond to user preferences or device settings, unlike fixed pixel sizes that do not scale well.
Is the conversion from rem to px affected by zoom settings in browsers?
Browser zoom affects the display size of pixels on screen but does not change the conversion formula itself. Rem to px conversion is based on CSS pixel units, which may appear larger or smaller visually because of zoom.