2 rem is equal to 32 pixels (px) assuming the root font size is 16 pixels.
The conversion from rem to px depends on the root font size defined in the browser or CSS. By default, most browsers set the root font size at 16 pixels, so multiplying the rem value by 16 gives you its equivalent in pixels.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert rem to pixels is:
pixels = rem × root font size in pixels
By multiplying the rem value by the root font size (usually 16px), you get the pixel equivalent. This works because 1 rem is equal to the font size of the root element, so any rem value scales relative to that base size.
For example, converting 2 rem to px:
- Root font size = 16px
- 2 rem × 16px = 32px
Conversion Example
- Convert 3.5 rem to px:
- Root font size = 16px
- 3.5 × 16 = 56
- Result: 3.5 rem = 56 px
- Convert 0.75 rem to px:
- Multiply 0.75 by 16
- 0.75 × 16 = 12
- Result: 0.75 rem = 12 px
- Convert 5 rem to px:
- 5 × 16 = 80
- Result: 5 rem equals to 80 px
- Convert 1.25 rem to px:
- 1.25 times 16 equals 20
- Result: 1.25 rem is 20 px
Conversion Chart
The table below lists rem values from -23.0 to 27.0 and their corresponding pixel sizes. To use it, find the rem value you need and read across to see the pixel equivalent, based on a 16px root font size.
| rem | px |
|---|---|
| -23.0 | -368.0000 |
| -20.0 | -320.0000 |
| -15.0 | -240.0000 |
| -10.0 | -160.0000 |
| -5.0 | -80.0000 |
| 0.0 | 0.0000 |
| 1.0 | 16.0000 |
| 5.0 | 80.0000 |
| 10.0 | 160.0000 |
| 15.0 | 240.0000 |
| 20.0 | 320.0000 |
| 23.0 | 368.0000 |
| 25.0 | 400.0000 |
| 27.0 | 432.0000 |
Related Conversion Questions
- How many pixels is 2 rem in CSS with different root font sizes?
- What is the pixel value of 2 rem if the browser default font changes?
- Can 2 rem be converted to px when the root font size is 18px instead of 16px?
- How does changing the root font size affect 2 rem to px conversion?
- Is 2 rem always equal to 32 pixels in all browsers?
- How to convert 2 rem to px in responsive web design?
- What is the formula to convert 2 rem to pixels for a custom root font size?
Conversion Definitions
rem: Rem stands for “root em” and represents a scalable unit in CSS that is relative to the font size of the root element of the document. It allows for consistent scaling of elements across a webpage by basing measurements on a single root font value, making it easier to maintain responsive designs.
px: Px means pixels, a fixed unit representing a single dot on a computer display. Pixels are absolute units used in digital design and web development to define exact sizes of elements, ensuring precise control over layout and appearance regardless of scaling or user settings.
Conversion FAQs
Does the root font size always have to be 16 pixels?
No, the root font size can be changed by CSS or browser settings. Although 16px is the default in most browsers, designers can set a different value on the html element, which affects how rem units convert to pixels.
Can rem values be negative and what does that mean in px?
Yes, rem values can be negative, though it’s uncommon. Negative rems result in negative pixel values, which can be used in CSS for positioning or offsetting elements. However, negative pixel sizes for dimensions like width or height are invalid.
Why should I use rem instead of px in my CSS?
Using rem units allows for better scalability and accessibility, because all sizes adapt when the root font size changes. Pixels are fixed and don’t scale, which makes rems helpful for responsive design and user preferences.
How does browser zoom affect rem to px conversion?
Browser zoom changes the effective root font size, so rem units scale accordingly, while pixel units stay fixed on the screen. This means rem-based sizes grow or shrink when zooming, improving readability.
Is there a difference between em and rem units in CSS?
Yes, em units are relative to the font size of their closest parent element, which can cause compounding effects. Rem units always relate to the root element font size, making them more predictable for consistent sizing.