24px to rem = 1.5rem
24 pixels equals 1.5rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 24px used for?
24px (1.5rem) is the typical h3 sub-heading size and a common spacing token. As type it reads as a clear heading without dominating; as spacing (margin/padding) it's the workhorse 'medium' size in most design systems. Tailwind's spacing-6 and text-2xl both land at 24px.
How it works
To convert 24px to rem, divide by the root font size: 24 / 16 = 1.5. The rem unit is relative to the root element’s font size, which browsers default to 16px.
24px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 24px shifts. Here’s 24px at common root sizes.
| Root size | 24px in rem |
|---|---|
| 16px (default) | 1.5rem |
| 12px | 2rem |
| 14px | 1.7143rem |
| 18px | 1.3333rem |
| 20px | 1.2rem |
| 24px | 1rem |
24px in CSS
Use 24px as an h3 sub-heading font size.
h3 {
font-size: 24px; /* 1.5rem */
font-weight: 600;
}FAQ
Is 24px the same as 1.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 24px at other root sizes.
Will 24px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 24px to scale when users enlarge their default font size, use 1.5rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.