18 px equals 1.125 rem.
The conversion from pixels (px) to rem units depends on the root font size, which is commonly 16 pixels in browsers. Dividing 18 pixels by 16 pixels gives the rem value, here 1.125 rem, which scales better across different screen sizes and user settings.
Conversion Tool
Result in rem:
Conversion Formula
The formula for converting pixels to rem is:
rem = px ÷ root font size
Browsers, by default, set the root font size to 16 pixels. So to convert 18 pixels to rem, you divide 18 by 16. This makes the rem unit relative to the root font size, allowing layouts scale with user preferences or different devices.
For example:
- Start with 18 px.
- Divide by 16 (default root font size): 18 ÷ 16 = 1.125.
- The result is 1.125 rem.
This formula works because rem stands for “root em,” and it measures relative to the root element’s font size, unlike px which is always an absolute pixel count.
Conversion Example
- Convert 24 px to rem:
- Divide 24 by 16.
- 24 ÷ 16 = 1.5 rem.
- So, 24 px is equal to 1.5 rem.
- Convert 12 px to rem:
- Divide 12 by 16.
- 12 ÷ 16 = 0.75 rem.
- Thus, 12 px is 0.75 rem.
- Convert 32 px to rem:
- Divide 32 by 16.
- 32 ÷ 16 = 2 rem.
- Therefore, 32 px equals 2 rem.
- Convert 9 px to rem:
- Divide 9 by 16.
- 9 ÷ 16 = 0.5625 rem.
- So 9 px becomes 0.5625 rem.
Conversion Chart
| Pixels (px) | Rem |
|---|---|
| -7.0 | -0.4375 |
| -5.0 | -0.3125 |
| 0.0 | 0.0000 |
| 5.0 | 0.3125 |
| 10.0 | 0.6250 |
| 15.0 | 0.9375 |
| 18.0 | 1.1250 |
| 20.0 | 1.2500 |
| 25.0 | 1.5625 |
| 30.0 | 1.8750 |
| 35.0 | 2.1875 |
| 40.0 | 2.5000 |
| 43.0 | 2.6875 |
This chart shows px values from negative to positive, with their rem equivalents. Negative values might occur in certain CSS transformations or calculations. To use, find the px value you want to convert and read the corresponding rem value for scaling.
Related Conversion Questions
- How many rem is 18 pixels in CSS?
- What is the rem value for 18 px if root font size changes?
- Can 18 px be converted to rem for responsive web design?
- Why 18 px equals 1.125 rem for browser default settings?
- How does changing the root font size affect 18 px to rem conversion?
- Is 18 px bigger or smaller than 1 rem?
- How to write 18 px in rem units for better accessibility?
Conversion Definitions
px (Pixel): A pixel is the smallest unit of measurement on a digital screen, representing a single point of color. It is an absolute unit used to control sizes in web design, but it does not scale with user settings or device resolutions, making it less flexible for responsive layouts.
rem (Root em): Rem is a relative length unit in CSS, based on the font size of the root element (<html>). It makes sizing adaptable by scaling proportionally when the root font size changes, improving flexibility across devices and accessibility by respecting user preferences.
Conversion FAQs
Can the root font size affect how 18 px converts to rem?
Yes, if the root font size differs from the common 16 pixels, the conversion changes. For example, if the root font size is 20 px, then 18 px converts to 0.9 rem (18 ÷ 20). The rem unit always depends on the current root font size, so changing it affects all rem calculations.
Why should I use rem instead of px for font sizes?
Using rem helps with accessibility and responsiveness. When users adjust their browser’s root font size or if styles change globally, rem-based sizes adjust accordingly, maintaining relative proportions. Pixels stay fixed, which can cause text to appear too small or too large on different devices.
Is 18 px always exactly 1.125 rem in all browsers?
In browsers with default root font size set to 16 px, yes. But some browsers or user settings might change the root font size, so 18 px won’t always equal 1.125 rem. It’s better to confirm the root font size or use rem units consistently to avoid discrepancies.
How do negative pixel values convert to rem?
Negative px values convert to negative rem values by the same division formula. For example, -8 px divided by 16 gives -0.5 rem. While negative sizes are unusual, they may appear in CSS for transforms or positioning, and the conversion works the same way mathematically.
What happens if the root font size is set in percentages?
If the root font size is defined as a percentage of the browser default, the pixel to rem conversion adapts accordingly. For instance, setting root font size to 125% makes the root 20 px (16 * 1.25), so 18 px equals 0.9 rem (18 ÷ 20). Rem always reflects the current root font size regardless of units.
