1.4 rem equals 22.4 pixels (px) assuming the root font size is 16px.
The conversion from rem to px depends on the root font size of the document, which most browsers set to 16 pixels by default. Multiplying the rem value by this root size gives the equivalent pixel value.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert rem to px is:
pixels = rem × root font size
The root font size is usually 16px by default in browsers, but can vary depending on CSS settings. Multiplying the rem value by this size gives the equivalent size in pixels. For example:
- Given: 1.4 rem
- Root font size: 16px
- Calculation: 1.4 × 16 = 22.4 px
This works because rem units are relative to the root element’s font size, ensuring scalability and consistency across the page.
Conversion Example
- Convert 2 rem to px:
- Multiply 2 by 16 (root font size)
- 2 × 16 = 32 px
- So, 2 rem = 32 pixels
- Convert 0.75 rem to px:
- 0.75 × 16 = 12 px
- Therefore, 0.75 rem equals 12 pixels
- Convert 3.5 rem to px:
- 3.5 × 16 = 56 px
- 3.5 rem corresponds to 56 pixels
- Convert 0 rem to px:
- 0 × 16 = 0 px
- Zero rem means zero pixels
- Convert 1.25 rem to px:
- 1.25 × 16 = 20 px
- 1.25 rem equals 20 pixels
Conversion Chart
The table below shows rem values from -23.6 to 26.4 and their pixel equivalents, assuming the root font size is 16px. To find the px for any rem value, multiply that value by 16.
| rem | px |
|---|---|
| -23.6 | -377.6 |
| -20.0 | -320.0 |
| -15.5 | -248.0 |
| -10.2 | -163.2 |
| -5.0 | -80.0 |
| 0 | 0 |
| 3.3 | 52.8 |
| 7.7 | 123.2 |
| 12.4 | 198.4 |
| 18.0 | 288.0 |
| 21.1 | 337.6 |
| 26.4 | 422.4 |
Related Conversion Questions
- How many pixels is 1.4 rem if the root font size changes to 18px?
- What is the pixel equivalent of 1.4 rem in responsive design?
- Why does 1.4 rem not equal 22.4 px in some browsers?
- Can 1.4 rem be converted to px when the root font size is not 16px?
- How to calculate 1.4 rem in px for mobile screens?
- Is 1.4 rem always bigger than 20px?
- How does changing root font size affect 1.4 rem in pixels?
Conversion Definitions
rem: Rem stands for “root em,” a CSS unit that measures font size or other lengths relative to the root element’s font size. Unlike em units which depend on the parent element, rem always references the root font size, making scaling consistent across the page.
px: Px, or pixels, are absolute units representing a single dot on the screen. It’s a fixed measurement used in digital displays, defining exact sizes for text and elements. Pixels don’t scale with user settings, unlike relative units like rem or em.
Conversion FAQs
Can the root font size be different than 16px?
Yes, the root font size can be changed in CSS, for example by setting html { font-size: 18px; }. When this happens, rem units adjust accordingly. So 1.4 rem with 18px root size becomes 1.4 × 18 = 25.2 px. It’s crucial to know the root font size for accurate rem to px conversion.
What happens if the user zooms the browser?
Browser zoom affects how pixels appear on screen but doesn’t change the CSS pixel values themselves. Rem units scale with root font size, so zooming may affect perceived size differently than px, which are fixed. This makes rem useful for responsive layouts but can cause slight differences in actual pixel rendering.
Is 1.4 rem always larger than 1.4 em?
Not necessarily. While both units are relative, em is relative to the parent element’s font size, while rem is relative to the root font size. If the parent element has a smaller font size, 1.4 em may be less than 1.4 rem, or vice versa. Context matters when comparing these units.
Why does 1.4 rem sometimes not equal 22.4 px?
If the root font size isn’t 16px, the calculation changes. For instance, if root font size is 14px, then 1.4 rem equals 1.4 × 14 = 19.6 px. Also, browser settings, user styles, or CSS overrides can affect root size, causing the discrepancy.
Can rem units be negative?
Yes, negative rem values are valid in CSS and represent negative lengths. For example, -1 rem equals -16 px if root font size is 16px. Negative lengths can be used for positioning or offsets but should be used carefully to avoid unexpected layout issues.