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.
20 px is equal to 1.25 rem.
The conversion from pixels (px) to rem depends on the root font size of the document. Assuming the root font size is 16 pixels, dividing 20 by 16 gives the rem value.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels to rem is simple: rem = px ÷ root font size. The root font size is usually 16 pixels in browsers unless changed by CSS. Rem stands for “root em”, which means it’s relative to the root element’s font size.
Because rem units scale with the root font size, when you divide the pixel value by the root font size, you get the equivalent rem value. For example, if the root font size is 16px:
- Take the pixel value, like 20px.
- Divide 20 by 16: 20 ÷ 16 = 1.25.
- The result, 1.25, is the rem value.
This means that 20px is equal to 1.25rem when the root font size is 16px.
Conversion Example
- Convert 32px to rem:
- Starting with 32 pixels.
- Divide 32 by 16 (root font size): 32 ÷ 16 = 2.
- Result is 2rem.
- Convert 10px to rem:
- 10 ÷ 16 = 0.625rem.
- So, 10px equals 0.625rem.
- Convert 48px to rem:
- 48 ÷ 16 = 3.
- This means 48px equals 3rem.
- Convert 14px to rem:
- 14 ÷ 16 = 0.875.
- Thus, 14px equals 0.875rem.
Conversion Chart
| Pixels (px) | Rem |
|---|---|
| -5.0 | -0.3125 |
| 0.0 | 0 |
| 5.0 | 0.3125 |
| 10.0 | 0.625 |
| 15.0 | 0.9375 |
| 20.0 | 1.25 |
| 25.0 | 1.5625 |
| 30.0 | 1.875 |
| 35.0 | 2.1875 |
| 40.0 | 2.5 |
| 45.0 | 2.8125 |
The chart shows px values in the left column and corresponding rem values in the right, based on a root font size of 16px. You can read a pixel value, then find its rem equivalent quickly. Negative values are possible for design purposes but less common.
Related Conversion Questions
- How many rems are 20 pixels in CSS?
- What is the rem value of 20px when root font size changes?
- Is 20px equal to 1.25rem always?
- How do I convert 20px padding to rem units?
- Why does 20px not match 1.25rem sometimes?
- Can 20px be converted to rem if root font size is 18px?
- What’s the difference between px and rem for 20 pixels?
Conversion Definitions
px: A pixel (px) is a fixed unit of length in digital displays representing a single point on the screen. It does not scale with user settings or browser font size changes, making it absolute in size. Pixels are used for precise layout control but can cause inconsistency across devices with different resolutions.
rem: Rem stands for “root em” and is a scalable unit relative to the root element’s font size in CSS. If the root font size is 16px, 1rem equals 16px. Rem units allow responsive design because changing the root font size scales all rem-based sizes proportionally, improving accessibility and consistency.
Conversion FAQs
Why does converting 20px to rem sometimes give different results?
The rem value depends on the root font size set in the HTML document or browser defaults. If the root font size changes from the standard 16px to another value, the division result changes. So 20px divided by 18px root font size equals 1.11rem, not 1.25rem.
Can rem units improve website accessibility compared to px?
Yes, rem units scale with the root font size, which users can adjust in their browsers. This flexibility makes content easier to read on different devices or for users with visual impairments, while px units remain fixed and often ignore user preferences.
Is it okay to mix px and rem units in one stylesheet?
Mixing px and rem can cause inconsistent scaling and layout issues, especially when the root font size changes. It’s better to stick mostly with rem for typography and spacing for consistency, using px only when precise fixed sizing is needed.
Does the root font size always equal 16px in browsers?
Most browsers default the root font size to 16px, but users can change it in settings. Also, CSS can override this with rules like html { font-size: 18px; }. So assuming 16px might not always be correct for all users or sites.
How can I find the root font size on a website?
You can inspect the root element (html) in browser developer tools and check the computed font-size property. This tells you the pixel value used for rem calculations on that page.
