50px to rem = 3.125rem
50 pixels equals 3.125rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 50px used for?
50px (3.125rem) is rounder than 48px but serves the same role: page titles, hero headings, large display type on landing pages. The 8px-grid systems favour 48; the 10px-grid systems favour 50. Either works — pick whichever fits the rest of your spacing scale.
How it works
To convert 50px to rem, divide by the root font size: 50 / 16 = 3.125. The rem unit is relative to the root element’s font size, which browsers default to 16px.
50px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 50px shifts. Here’s 50px at common root sizes.
| Root size | 50px in rem |
|---|---|
| 16px (default) | 3.125rem |
| 12px | 4.1667rem |
| 14px | 3.5714rem |
| 18px | 2.7778rem |
| 20px | 2.5rem |
| 24px | 2.0833rem |
50px in CSS
Use 50px as a hero or page-title font size.
.hero-title {
font-size: 50px; /* 3.125rem */
line-height: 1.1;
letter-spacing: -0.02em;
}FAQ
Is 50px the same as 3.125rem?
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 50px at other root sizes.
Will 50px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 50px to scale when users enlarge their default font size, use 3.125rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.