1.5 rem to px = 24px
1.5 rem equals 24 pixels at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 1.5rem used for?
1.5rem (24px at default root) is the typical h3 sub-heading size and the workhorse 'medium' spacing token. As type it's an unambiguous heading without dominating the page; as spacing it's the most common margin/padding step in design systems. Tailwind's text-2xl and spacing-6 both land here.
How it works
To convert 1.5rem to pixels, multiply by the root font size: 1.5 × 16 = 24. The rem unit is relative to the root element’s font size, which browsers default to 16px.
1.5rem at different root sizes
If you’ve overridden the html root font size, the pixel equivalent of 1.5rem shifts. Here’s 1.5rem at common root sizes.
| Root size | 1.5rem in px |
|---|---|
| 16px (default) | 24px |
| 12px | 18px |
| 14px | 21px |
| 18px | 27px |
| 20px | 30px |
| 24px | 36px |
1.5rem in CSS
Use 1.5rem as an h3 sub-heading font size.
h3 {
font-size: 1.5rem; /* 24px */
font-weight: 600;
}FAQ
Is 1.5rem the same as 24px?
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 1.5rem at other root sizes.
Why use 1.5rem instead of 24px?
Because 1.5rem scales with the user’s browser font-size preference, and 24px does not. If a user enlarges their default font size for accessibility, anything sized in rem scales proportionately — including this value. Use rem for type and type-adjacent properties; reach for px only when the value must stay fixed regardless of user settings.