32px to rem = 2rem
32 pixels equals 2rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 32px used for?
32px (2rem) is a frequent section-heading or h2 size, and one of the most common large-spacing tokens. Used as type it commands a section without overwhelming surrounding copy. Used as space, it's the standard 'large' gap between major content blocks. Tailwind's text-3xl and spacing-8 both land here.
How it works
To convert 32px to rem, divide by the root font size: 32 / 16 = 2. The rem unit is relative to the root element’s font size, which browsers default to 16px.
32px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 32px shifts. Here’s 32px at common root sizes.
| Root size | 32px in rem |
|---|---|
| 16px (default) | 2rem |
| 12px | 2.6667rem |
| 14px | 2.2857rem |
| 18px | 1.7778rem |
| 20px | 1.6rem |
| 24px | 1.3333rem |
32px in CSS
Use 32px as an h2 section-heading font size.
h2 {
font-size: 32px; /* 2rem */
margin-block: 1.5rem 1rem;
}FAQ
Is 32px the same as 2rem?
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 32px at other root sizes.
Will 32px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 32px to scale when users enlarge their default font size, use 2rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.