20 px equals 1.25 rem.
To convert pixels (px) to rem, you divide the pixel value by the root font size, which is commonly 16 pixels in most browsers. So 20 divided by 16 gives the rem value.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert px to rem is:
rem = px / root font size
Where the root font size is the base pixel size of the root element, usually set by browsers to 16px. Since rem units are relative to this root, dividing the pixel value by 16 converts pixels into rem.
For example, converting 20 px:
- Identify root font size: 16px
- Divide pixel value by root size: 20 ÷ 16 = 1.25
- Result: 1.25 rem
Conversion Example
- Example 1: Convert 32 px to rem
- Root font size = 16px
- 32 ÷ 16 = 2
- Result: 2 rem
- Example 2: Convert 10 px to rem
- Root font size = 16px
- 10 ÷ 16 = 0.625
- Result: 0.625 rem
- Example 3: Convert 48 px to rem
- Root font size = 16
- 48 ÷ 16 = 3
- Result: 3 rem
- Example 4: Convert 14 px to rem
- Root font size is 16px
- 14 ÷ 16 = 0.875
- Result: 0.875 rem
Conversion Chart
| Pixels (px) | Rem |
|---|---|
| -5.0 | -0.3125 |
| 0.0 | 0.0000 |
| 5.0 | 0.3125 |
| 10.0 | 0.6250 |
| 15.0 | 0.9375 |
| 20.0 | 1.2500 |
| 25.0 | 1.5625 |
| 30.0 | 1.8750 |
| 35.0 | 2.1875 |
| 40.0 | 2.5000 |
| 45.0 | 2.8125 |
The chart shows pixel values in the left column and their rem equivalents on the right. To use it, find the px you want to convert and read across to get the rem value, based on a 16px root font.
Related Conversion Questions
- How many rem is 20 pixels in CSS?
- What’s the rem value for 20 px if root font size changes?
- Why does 20 px equal 1.25 rem in most browsers?
- Can I convert 20 px to rem without knowing the root font size?
- How does changing the browser’s base font affect 20 px to rem conversion?
- Is 20 px always 1.25 rem or depends on device settings?
- How to calculate rem from 20 px in responsive design?
Conversion Definitions
px (Pixel): A pixel is the smallest unit of measurement on a screen, representing a single point of color or light. It is an absolute unit used in digital design to specify sizes, spacing, and resolution. Pixel size can vary based on screen density and device.
rem (Root Em): Rem is a relative unit in CSS that measures size relative to the root element’s font size. Unlike em, rem always refers to the root font, making scaling consistent across the page. 1 rem equals the font size set on the root (html) element, commonly 16px.
Conversion FAQs
Does the root font size always have to be 16px for px to rem conversion?
No, the root font size can be changed by CSS on the html element. If the root font size is different, the rem calculation changes accordingly. For example, if the root is 20px, then 20 px equals 1 rem instead of 1.25.
Why use rem units instead of px in web design?
Rem units allow designs to be more flexible and scalable because they adapt to the root font size. This makes it easier for users to adjust text size globally through browser settings, improving accessibility and responsiveness.
What happens if I convert negative pixel values to rem?
Negative pixel values convert to negative rem values using the same formula. This might be used for positioning or margin shifts in CSS, but negative sizes for font or element width usually do not make sense.
Can rem units cause layout issues when root font size changes unexpectedly?
Yes, if the root font size changes due to user settings or CSS overrides, all rem-based sizes scale accordingly. This might cause layout shifts if not accounted for, so testing across different font sizes is recommended.
Is the conversion from px to rem affected by device pixel ratio?
No, device pixel ratio affects how pixels map to physical screen pixels, but CSS px units are abstracted and consistent for rem calculation. Rem depends only on the root font size, not on screen pixel density.
