NidhiDisclosure: 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.4 rem equals 22.4 pixels.
The conversion from rem to pixels depends on the root font size, which is commonly 16 pixels by default in most browsers. Multiplying 1.4 rem by 16 px gives the equivalent pixel value.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert rem to pixels is:
pixels = rem × root font size
The root font size is usually 16 pixels, unless changed by CSS. Rem stands for “root em,” so it depends on the root element’s font size rather than the parent element’s.
Step-by-step example for 1.4 rem:
- Identify root font size, which is 16 px.
- Multiply 1.4 rem by 16 px: 1.4 × 16 = 22.4 px.
- So, 1.4 rem equals 22.4 pixels.
Conversion Example
- 2.5 rem:
- Root font size = 16 px.
- 2.5 × 16 = 40 px.
- Therefore, 2.5 rem equals 40 pixels.
- 0.75 rem:
- Root font size = 16 px.
- 0.75 × 16 = 12 px.
- So, 0.75 rem equals 12 pixels.
- 3 rem:
- Root font size = 16 px.
- 3 × 16 = 48 px.
- Hence, 3 rem equals 48 pixels.
- 1 rem:
- Root font size = 16 px.
- 1 × 16 = 16 px.
- 1 rem equals 16 pixels.
Conversion Chart
The chart below converts rem values from -23.6 to 26.4 into pixels, assuming the root font size is 16 px. To use it, find the rem value in the first column and see its equivalent pixel value in the second.
| Rem | Pixels (px) |
|---|---|
| -23.6 | -377.6 |
| -18.0 | -288.0 |
| -12.4 | -198.4 |
| -7.8 | -124.8 |
| -3.2 | -51.2 |
| 0.4 | 6.4 |
| 1.0 | 16.0 |
| 3.6 | 57.6 |
| 7.2 | 115.2 |
| 10.8 | 172.8 |
| 14.4 | 230.4 |
| 18.0 | 288.0 |
| 21.6 | 345.6 |
| 26.4 | 422.4 |
Related Conversion Questions
- How many pixels equals 1.4 rem if the root font size is changed?
- What’s the pixel value of 1.4 rem in a browser with 18px root font size?
- Does 1.4 rem always equal 22.4 px on all devices?
- How to convert 1.4 rem to px for responsive web design?
- Is 1.4 rem bigger than 20 pixels on different screens?
- Can 1.4 rem be smaller than 22.4 px under any circumstances?
- Why does 1.4 rem not equal 22.4 px on my website?
Conversion Definitions
rem: Rem stands for “root em,” a unit in CSS representing the font size of the root element of the document. Unlike em, rem does not depend on the parent element’s font size but always uses the root’s, making it consistent for scaling layouts across a webpage.
px: Px, short for pixels, is a fixed unit in digital screens representing a tiny dot on the display. Pixels are absolute units used to control size in a precise manner, independent from font size or parent elements, making designs predictable across devices with the same resolution.
Conversion FAQs
What happens if the root font size is changed from 16px?
If the root font size changes, the pixel equivalent of rem values changes too. For example, if the root font size is 20px, then 1.4 rem equals 1.4 × 20 = 28 pixels instead of 22.4. Rem units always multiply by the root font size, so changing that size affects all rem calculations.
Can rem values be negative, and what does that mean in pixels?
Negative rem values can be used in CSS for positioning or offsets. When converted to pixels, negative rem values multiply by the root font size and result in negative pixel values, representing a shift in the opposite direction. For example, -1 rem equals -16 px if root font is 16px.
Why are rem units preferred over px in responsive design?
Rem units scale based on the root font size, which can be adjusted for different screen sizes or user preferences. This flexibility lets designers create layouts that respond better to zoom or accessibility settings, while px units stay fixed, making rem more adaptable for responsive designs.
Is the conversion always precise when rem is converted to pixels?
Conversions are mathematically precise but visual rendering may slightly differ due to browser rounding or subpixel rendering. The calculated pixel value is exact, but how the browser displays it can vary, especially with fractional pixel values or zoom levels.
How to convert rem to px in JavaScript dynamically?
You can get the root font size from the document element’s computed style and multiply the rem value by this size dynamically. For example, parseFloat(getComputedStyle(document.documentElement).fontSize) * remValue gives the pixel equivalent of any rem value at runtime.
