2 rem to px = 32px
2 rem equals 32 pixels at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 2rem used for?
2rem (32px at default root) is a common h2 or section-heading size, and the standard 'large' spacing token between major content blocks. It's the workhorse size for things you want clearly distinct from body without going hero-scale. Tailwind's text-3xl and spacing-8 land here.
How it works
To convert 2rem to pixels, multiply by the root font size: 2 × 16 = 32. The rem unit is relative to the root element’s font size, which browsers default to 16px.
2rem at different root sizes
If you’ve overridden the html root font size, the pixel equivalent of 2rem shifts. Here’s 2rem at common root sizes.
| Root size | 2rem in px |
|---|---|
| 16px (default) | 32px |
| 12px | 24px |
| 14px | 28px |
| 18px | 36px |
| 20px | 40px |
| 24px | 48px |
2rem in CSS
Use 2rem as an h2 section-heading font size.
h2 {
font-size: 2rem; /* 32px */
margin-block: 1.5rem 1rem;
}FAQ
Is 2rem the same as 32px?
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 2rem at other root sizes.
Why use 2rem instead of 32px?
Because 2rem scales with the user’s browser font-size preference, and 32px 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.