Samantha Nicole18 px is equal to 1.125 rem.
The conversion from pixels (px) to rem units involves dividing the pixel value by the root font size, which commonly is 16 pixels in most browsers. So, 18 pixels divided by 16 gives 1.125 rem, providing a scalable unit relative to the root font size.
Conversion Tool
Result in rem:
Conversion Formula
To convert pixels to rem, you divide the pixel value by the root font size (which is 16px by default in browsers). The formula is:
rem value = pixel value ÷ root font size
This works because rem units are relative to the root font size, allowing scalable and consistent design across different screen sizes. For example, with 18 px:
- Pixel value: 18 px
- Root font size: 16 px
- Calculation: 18 ÷ 16 = 1.125 rem
This means 18 px equals 1.125 rem.
Conversion Example
- Convert 24 px to rem:
- Take the pixel value 24
- Divide by root font size 16: 24 ÷ 16 = 1.5
- Result is 1.5 rem
- Convert 12 px to rem:
- 12 ÷ 16 = 0.75 rem
- Convert 32 px to rem:
- 32 divided by 16 equals 2
- So, 32 px = 2 rem
- Convert 9 px to rem:
- 9 ÷ 16 = 0.5625 rem
Conversion Chart
| Pixels (px) | Rem (rem) |
|---|---|
| -7.0 | -0.4375 |
| -6.0 | -0.3750 |
| -5.0 | -0.3125 |
| -4.0 | -0.2500 |
| -3.0 | -0.1875 |
| -2.0 | -0.1250 |
| -1.0 | -0.0625 |
| 0.0 | 0.0000 |
| 1.0 | 0.0625 |
| 2.0 | 0.1250 |
| 3.0 | 0.1875 |
| 4.0 | 0.2500 |
| 5.0 | 0.3125 |
| 6.0 | 0.3750 |
| 7.0 | 0.4375 |
| 8.0 | 0.5000 |
| 9.0 | 0.5625 |
| 10.0 | 0.6250 |
| 11.0 | 0.6875 |
| 12.0 | 0.7500 |
| 13.0 | 0.8125 |
| 14.0 | 0.8750 |
| 15.0 | 0.9375 |
| 16.0 | 1.0000 |
| 17.0 | 1.0625 |
| 18.0 | 1.1250 |
| 19.0 | 1.1875 |
| 20.0 | 1.2500 |
| 21.0 | 1.3125 |
| 22.0 | 1.3750 |
| 23.0 | 1.4375 |
| 24.0 | 1.5000 |
| 25.0 | 1.5625 |
| 26.0 | 1.6250 |
| 27.0 | 1.6875 |
| 28.0 | 1.7500 |
| 29.0 | 1.8125 |
| 30.0 | 1.8750 |
| 31.0 | 1.9375 |
| 32.0 | 2.0000 |
| 33.0 | 2.0625 |
| 34.0 | 2.1250 |
| 35.0 | 2.1875 |
| 36.0 | 2.2500 |
| 37.0 | 2.3125 |
| 38.0 | 2.3750 |
| 39.0 | 2.4375 |
| 40.0 | 2.5000 |
| 41.0 | 2.5625 |
| 42.0 | 2.6250 |
| 43.0 | 2.6875 |
The chart shows pixel values in the left column and their corresponding rem values on right. To find a rem, locate the pixel value and read its rem equivalent. This helps quickly convert sizes without calculating every time.
Related Conversion Questions
- How many rem is 18 px in CSS?
- What’s the rem equivalent of 18 pixels for web design?
- Why does converting 18 px to rem matter for responsive layouts?
- How do I convert 18 px to rem if my root font size is different?
- Is 18 px equal to 1.125 rem with default browser settings?
- Can I use 18 px directly instead of rem for font sizes?
- What formula to use when changing 18 px into rem units?
Conversion Definitions
px (pixel): A pixel is a single point in a raster image, or the smallest unit of measurement on a digital screen. Pixels define the resolution and size of images and UI elements, with each pixel representing a tiny dot on the display.
rem (root em): Rem is a CSS unit representing font sizes relative to the root element’s font size. Unlike em, which depends on parent elements, rem is always relative to the root, allowing more predictable scalable sizing across the entire document.
Conversion FAQs
Can the root font size be changed, and how does that affect px to rem conversion?
Yes, the root font size can be adjusted either in the browser or CSS by setting html { font-size: Xpx; }. Changing it alters rem calculations because rem units divide the pixel value by the new root size. For example, if root is 20px, then 18 px equals 0.9 rem.
Why use rem instead of px for font sizes?
Rem units allow fonts to scale depending on the root font size, helping accessibility and responsiveness. If user changes browser default font, rem-based text adjusts accordingly, whereas px remains fixed and might appear too small or large on different devices.
What happens if I use a decimal rem value like 1.125 rem?
Decimal rem values are supported in CSS and browsers render them correctly, providing precise control over size. Using 1.125 rem means element scales to 1.125 times the root font size, enabling smoother scaling rather than rounding to whole numbers.
Is there a performance impact using rem instead of px?
No noticeable performance differences exist between rem and px. Rem units might require slightly more calculation in the browser but this is negligible. The benefits of scalability and accessibility usually outweigh any minimal rendering cost.
How to handle px to rem conversion when the root font size isn’t 16px?
In those cases, you divide the pixel value by the actual root font size. For example, if root font size is 10px, then 18 px to rem is 18 ÷ 10 = 1.8 rem. It’s essential to know the root size to get accurate conversions.
