48px to rem = 3rem
48 pixels equals 3rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 48px used for?
48px (3rem) is a typical page-title or hero heading size. It commands attention without being shouty, and is large enough to anchor a landing-page hero on most screen sizes. As spacing, 48px is the standard 'extra-large' gap between major page sections. Tailwind's text-5xl and spacing-12 both land at 48px.
How it works
To convert 48px to rem, divide by the root font size: 48 / 16 = 3. The rem unit is relative to the root element’s font size, which browsers default to 16px.
48px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 48px shifts. Here’s 48px at common root sizes.
| Root size | 48px in rem |
|---|---|
| 16px (default) | 3rem |
| 12px | 4rem |
| 14px | 3.4286rem |
| 18px | 2.6667rem |
| 20px | 2.4rem |
| 24px | 2rem |
48px in CSS
Use 48px as a hero or page-title font size.
.hero-title {
font-size: 48px; /* 3rem */
line-height: 1.1;
letter-spacing: -0.02em;
}FAQ
Is 48px the same as 3rem?
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 48px at other root sizes.
Will 48px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 48px to scale when users enlarge their default font size, use 3rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.