Eleanor HayesDisclosure: This post contains affiliate links, which means we may earn a commission if you purchase through our links at no extra cost to you.
1.2 rem equals 19.2 pixels (px).
The conversion from rem to pixels depends on the root font size of the document, which is commonly 16 pixels by default in browsers. So, multiplying 1.2 rem by 16 px gives the pixel equivalent.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert rem to px is simple: px = rem × root font size. The root font size is usually 16 px in most browsers, but it can be changed by CSS.
This works because 1 rem equals the font size of the root element (<html>). So if the root font size is 16px, then 1 rem equals 16px.
Example calculation for 1.2 rem:
- Root font size = 16 px
- Multiply 1.2 rem × 16 px = 19.2 px
- Therefore, 1.2 rem equals 19.2 px
Conversion Example
- 0.5 rem to px
- Root font size is 16 px
- 0.5 × 16 = 8 px
- So, 0.5 rem equals 8 px
- 2 rem to px
- Root font size is 16 px
- 2 × 16 = 32 px
- Therefore, 2 rem equals 32 px
- 1 rem to px
- Root font size is 16 px
- 1 × 16 = 16 px
- 1 rem equals 16 px
- 3.4 rem to px
- Root font size is 16 px
- 3.4 × 16 = 54.4 px
- So, 3.4 rem equals 54.4 px
- 0.75 rem to px
- Root font size is 16 px
- 0.75 × 16 = 12 px
- Thus, 0.75 rem equals 12 px
Conversion Chart
The table below shows rem values from -23.8 to 26.2 and their corresponding pixel equivalents, assuming the root font size is 16 px. To find the px value, multiply the rem value by 16. Negative values indicate sizes smaller than zero, which might be used in specific CSS scenarios like offsets or transformations.
| Rem | Px | Rem | Px | Rem | Px |
|---|---|---|---|---|---|
| -23.8 | -380.8 | 0 | 0 | 23.8 | 380.8 |
| -20 | -320 | 2 | 32 | 26.2 | 419.2 |
| -15 | -240 | 4 | 64 | ||
| -10 | -160 | 6 | 96 | ||
| -5 | -80 | 8 | 128 | ||
| -1 | -16 | 10 | 160 |
Related Conversion Questions
- How many pixels is 1.2 rem if the root font size changes to 18px?
- Is 1.2 rem always equal to 19.2 pixels on all browsers?
- What causes the difference between rem and px in responsive design when converting 1.2 rem?
- How to convert 1.2 rem to px in CSS when root font size is not 16px?
- Why does 1.2 rem sometimes appear larger or smaller than 19.2 pixels?
- Can 1.2 rem be converted to px without knowing root font size?
- What happens to 1.2 rem to px conversion on mobile devices with different zoom levels?
Conversion Definitions
rem: A CSS unit that represents the font size of the root element (<html>). Unlike em, it is relative only to the root, so it provides consistent scaling across the entire document regardless of nesting. Commonly used for scalable layouts, rem improves readability and accessibility.
px: A pixel unit used in CSS for fixed-size measurements. Pixels correspond to a single dot on the screen, but actual display size can vary by device resolution and zoom settings. Pixels are absolute units, making them useful for precise control of element dimensions and images.
Conversion FAQs
What if the root font size is changed from 16px?
If the root font size is changed, the rem to px conversion changes accordingly. For example, if root font size is 20px, then 1.2 rem equals 1.2 × 20 = 24 px. The conversion depends solely on the current root font size, so always check that value first.
Can rem values be negative, and what does that mean for px?
Negative rem values are valid in CSS for certain properties like transforms or margins. When converted, negative rem multiplied by root font size results in negative px values, moving elements in opposite directions or creating overlapping effects. It’s not common for font sizes but possible for positioning.
Why does 1.2 rem sometimes not look like 19.2 px on different devices?
Different devices have different pixel densities and scaling. Even though 1.2 rem mathematically equals 19.2 px (assuming 16 root font size), the actual rendered size in physical pixels can vary due to screen resolution, zoom, or browser settings. CSS pixels are logical units, not fixed physical pixels.
Is it better to use rem or px for responsive design?
Rem units are preferred for responsive design because they scale relative to the root font size, allowing consistent scaling across the layout. Pixels are fixed and do not adjust for user preferences or device settings, which can reduce accessibility and flexibility in design.
How to find the root font size if not set explicitly?
If not set explicitly in CSS, the root font size defaults to the browser’s default, which is mostly 16px. You can check the computed root font size using browser developer tools or JavaScript by querying getComputedStyle(document.documentElement).fontSize.
