40px to rem = 2.5rem
40 pixels equals 2.5rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 40px used for?
40px (2.5rem) is a common section-heading size on landing pages and marketing sites, and a useful hero-spacing token. It sits between the standard 32px section heading and the larger 48px page-title size — handy when 32 feels small but 48 feels heavy.
How it works
To convert 40px to rem, divide by the root font size: 40 / 16 = 2.5. The rem unit is relative to the root element’s font size, which browsers default to 16px.
40px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 40px shifts. Here’s 40px at common root sizes.
| Root size | 40px in rem |
|---|---|
| 16px (default) | 2.5rem |
| 12px | 3.3333rem |
| 14px | 2.8571rem |
| 18px | 2.2222rem |
| 20px | 2rem |
| 24px | 1.6667rem |
40px in CSS
Use 40px as a hero or page-title font size.
.hero-title {
font-size: 40px; /* 2.5rem */
line-height: 1.1;
letter-spacing: -0.02em;
}FAQ
Is 40px the same as 2.5rem?
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 40px at other root sizes.
Will 40px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 40px to scale when users enlarge their default font size, use 2.5rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.