18 px is equivalent to 1.125 rem.
The conversion from pixels to rem depends on the root font size of the document, which is usually 16 pixels by default in most browsers. Since rem units are relative to the root font size, dividing the pixel value by 16 gives the rem value.
Conversion Tool
Result in rem:
Conversion Formula
To convert px to rem, divide the pixel value by the root font size. If the root font size is 16px, then the formula is:
rem = px ÷ 16
This works because rem units are relative to the root font size. So, 1 rem equals 16 pixels. For example:
- Given 18 px, divide by 16: 18 ÷ 16 = 1.125 rem
- This means 18 pixels is 1.125 times the root font size
Conversion Example
- 24 px to rem:
- Divide 24 by 16
- 24 ÷ 16 = 1.5 rem
- This means 24 pixels is 1.5 rem units.
- 12 px to rem:
- 12 divided by 16 equals 0.75
- So, 12 px = 0.75 rem
- 32 px to rem:
- 32 ÷ 16 = 2
- Therefore, 32 pixels equals 2 rem.
- 8 px to rem:
- 8 divided by 16 is 0.5
- Thus, 8 px = 0.5 rem
- 20 px to rem:
- 20 ÷ 16 = 1.25
- Meaning 20 px equals 1.25 rem units
Conversion Chart
This chart shows pixel values from -7.0 to 43.0 and their corresponding rem values when the root font size equals 16px. To find a rem value, look up the px column and read across. Negative px values convert to negative rems.
| Pixels (px) | 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 |
Related Conversion Questions
- How many rem is 18 px when the root font size is different from 16px?
- What is the rem value of 18 pixels in CSS for responsive design?
- Can I convert 18 px to rem without knowing the root font size?
- What happens if I change the root font size for converting 18 px to rem?
- Is 18 px equivalent to 1 rem or more in modern browsers?
- How to manually calculate 18 px to rem in a stylesheet?
- Why 18 px converted to rem sometimes looks larger or smaller on different devices?
Conversion Definitions
px (pixel): A pixel is the smallest unit of measurement on a digital screen. It represents a single point in a raster image or display. Pixels are absolute units and used to specify fixed sizes in web design, images, and fonts. Their size can vary depending on screen density and resolution.
rem (root em): The rem unit is a relative length in CSS, representing the font size of the root element (html). Unlike em units that depend on the current element’s font size, rem always refers back to the root, making scaling and responsive design easier by basing measurements on a single root size.
Conversion FAQs
Does changing the browser default font size affect converting 18 px to rem?
Yes, if the browser’s default root font size changes from 16px to another value, the rem calculation will change too. For example, if the root font size is 20px, then 18 px equals 0.9 rem instead of 1.125 rem. The formula depends on that root value.
Why should I use rem instead of px for font sizes?
Using rem units allows font sizes to scale relative to the root font size, improving accessibility and responsiveness. Px units are fixed, which can cause issues on different screen sizes or user settings. Rem makes it easier to maintain consistent proportions while allowing user control.
Can rem values cause layout issues if the root font size changes?
Yes, if the root font size changes unexpectedly, all rem-based dimensions will scale accordingly, which might break layouts. Developers should be careful when adjusting root sizes or using rem mixed with fixed units to avoid unpredictable designs.
Is rem supported in all browsers for converting px values?
Almost all modern browsers support rem units, so converting px to rem works widely. However, very old browser versions might not support rem correctly, causing fallback issues. Always test across browsers if legacy support is required.
How do I convert px to rem for other root font sizes?
To convert px to rem for any root font size, divide the px value by the root font size in px. For example, if root size is 18px, then 18 px equals 1 rem (18 ÷ 18 = 1). Adjust the divisor based on the root font size used in your CSS.