24 px converted to rem equals 1.5 rem.
Table of Contents
This conversion assumes the default browser font size of 16 pixels. Since 1 rem equals the root element’s font size, dividing 24 px by 16 px gives the rem value, which allows for scalable and responsive designs.
Conversion Tool
Result in rem:
Conversion Formula
The formula to convert pixels (px) to rem units is:
rem = px ÷ root font size
The root font size is the size of the <html> element, which browsers normally set to 16px by default. So to find rem, divide the pixel value by 16.
Example:
- Given: 24 px
- Root font size = 16 px
- Calculation: 24 ÷ 16 = 1.5 rem
This allows font sizes or other dimensions to scale based on the root font size, making layouts more flexible.
Conversion Example
- Convert 32 px to rem:
- Identify px value: 32
- Divide by root font size (16): 32 ÷ 16
- Result: 2 rem
- Convert 10 px to rem:
- Given 10 px
- Divide 10 by 16: 10 ÷ 16
- Result: 0.625 rem
- Convert 48 px to rem:
- Value is 48 px
- Divide by 16: 48 ÷ 16
- Result: 3 rem
- Convert 14 px to rem:
- 14 px given
- Calculate 14 ÷ 16
- Result: 0.875 rem
- Convert 5 px to rem:
- Start with 5 px
- Divide 5 by 16
- Result: 0.3125 rem
Conversion Chart
| Pixels (px) | Rem |
|---|---|
| -1.0 | -0.0625 |
| 0.0 | 0 |
| 1.0 | 0.0625 |
| 2.0 | 0.125 |
| 3.0 | 0.1875 |
| 4.0 | 0.25 |
| 5.0 | 0.3125 |
| 6.0 | 0.375 |
| 7.0 | 0.4375 |
| 8.0 | 0.5 |
| 9.0 | 0.5625 |
| 10.0 | 0.625 |
| 11.0 | 0.6875 |
| 12.0 | 0.75 |
| 13.0 | 0.8125 |
| 14.0 | 0.875 |
| 15.0 | 0.9375 |
| 16.0 | 1 |
| 17.0 | 1.0625 |
| 18.0 | 1.125 |
| 19.0 | 1.1875 |
| 20.0 | 1.25 |
| 21.0 | 1.3125 |
| 22.0 | 1.375 |
| 23.0 | 1.4375 |
| 24.0 | 1.5 |
| 25.0 | 1.5625 |
| 26.0 | 1.625 |
| 27.0 | 1.6875 |
| 28.0 | 1.75 |
| 29.0 | 1.8125 |
| 30.0 | 1.875 |
| 31.0 | 1.9375 |
| 32.0 | 2 |
| 33.0 | 2.0625 |
| 34.0 | 2.125 |
| 35.0 | 2.1875 |
| 36.0 | 2.25 |
| 37.0 | 2.3125 |
| 38.0 | 2.375 |
| 39.0 | 2.4375 |
| 40.0 | 2.5 |
| 41.0 | 2.5625 |
| 42.0 | 2.625 |
| 43.0 | 2.6875 |
| 44.0 | 2.75 |
| 45.0 | 2.8125 |
| 46.0 | 2.875 |
| 47.0 | 2.9375 |
| 48.0 | 3 |
| 49.0 | 3.0625 |
You can check any px value in the left column, and see its corresponding rem value on right. This helps when designing layouts to quickly find rem without calculations. Negative px values convert proportionally to negative rem.
Related Conversion Questions
- How many rem is 24 pixels in CSS?
- What’s the rem equivalent of 24px on a website?
- Can 24px be converted to rem for responsive design?
- Why does 24px equal 1.5 rem in CSS?
- How do I convert 24px to rem if root font size changes?
- Is 24px always 1.5 rem in every browser?
- What formula converts 24px to rem units?
Conversion Definitions
px (Pixel): A pixel is a single point in a digital image or display, representing the smallest unit of measurement on screens. Pixels are absolute units used for precise sizing, often fixed, which may cause scaling issues on different devices or resolutions.
rem (Root Em): rem is a relative length unit in CSS that stands for root em. Rather than depending on the parent element, rem is based on the root element’s font size, allowing scalable and consistent sizing across the entire webpage or application, aiding responsive design.
Conversion FAQs
Does the root font size change affect px to rem conversion?
Yes, the root font size directly changes how px converts to rem. If the browser or CSS sets the root font size to a value other than 16px, you need to divide px by that new root size. For example, if root font size is 20px, then 24px equals 1.2 rem (24 ÷ 20).
Why use rem instead of px for font sizes?
Using rem allows for better scalability and accessibility. When users adjust browser default font size for readability, rem-based fonts scale accordingly, while px remain fixed and may become too small or large. It improves consistency across devices and user preferences.
Can rem units be negative values?
Technically, yes, rem can be negative, but it rarely makes sense to use negative sizes for font or spacing, since negative dimensions can cause rendering issues or invisible content. Negative rem might be used in specific scenarios like positioning offsets, but cautiously.
Will px to rem conversion be different on mobile devices?
The conversion formula stays same, but the root font size may differ if CSS or user settings change on mobile browsers. If root font size changes, rem values adjust accordingly, so 24px might not always equal 1.5 rem on mobile, depending on root font size settings.
How do I convert rem back to px?
To convert rem to px, multiply the rem value by the root font size (default 16px). For example, 1.5 rem × 16 = 24 px. This reverses the px to rem conversion and helps when you want to know the exact pixel size from a rem value.