28px to rem = 1.75rem
28 pixels equals 1.75rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 28px used for?
28px (1.75rem) is a less common but useful in-between size — typically reserved for h3 in larger type scales or hero sub-headings on landing pages. It sits between the common 24px section heading and the larger 32px section heading slots, giving designers a mid-step when the type scale jumps too coarsely.
How it works
To convert 28px to rem, divide by the root font size: 28 / 16 = 1.75. The rem unit is relative to the root element’s font size, which browsers default to 16px.
28px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 28px shifts. Here’s 28px at common root sizes.
| Root size | 28px in rem |
|---|---|
| 16px (default) | 1.75rem |
| 12px | 2.3333rem |
| 14px | 2rem |
| 18px | 1.5556rem |
| 20px | 1.4rem |
| 24px | 1.1667rem |
28px in CSS
Use 28px as an h2 section-heading font size.
h2 {
font-size: 28px; /* 1.75rem */
margin-block: 1.5rem 1rem;
}FAQ
Is 28px the same as 1.75rem?
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 28px at other root sizes.
Will 28px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 28px to scale when users enlarge their default font size, use 1.75rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.