18px to rem = 1.125rem
18 pixels equals 1.125rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 18px used for?
18px (1.125rem) is the comfortable upper end of body text — used by long-form publications, blogs, and reading apps that want slightly larger type for sustained reading. Medium, Substack, and many editorial sites set body around 18–20px. Pair with a generous line-height (1.5–1.7) for the most readable result.
How it works
To convert 18px to rem, divide by the root font size: 18 / 16 = 1.125. The rem unit is relative to the root element’s font size, which browsers default to 16px.
18px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 18px shifts. Here’s 18px at common root sizes.
| Root size | 18px in rem |
|---|---|
| 16px (default) | 1.125rem |
| 12px | 1.5rem |
| 14px | 1.2857rem |
| 18px | 1rem |
| 20px | 0.9rem |
| 24px | 0.75rem |
18px in CSS
Use 18px for a lead paragraph or comfortable reading body.
.lead {
font-size: 18px; /* 1.125rem */
line-height: 1.6;
}FAQ
Is 18px the same as 1.125rem?
Yes, at the browser default root font size of 16px. If the root has been changed (some sites use html { font-size: 62.5% } or similar), the conversion changes — see the table above for 18px at other root sizes.
Will 18px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 18px to scale when users enlarge their default font size, use 1.125rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.