14px to rem = 0.875rem
14 pixels equals 0.875rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 14px used for?
14px is one of the two most common 'small body' sizes (alongside 13px), widely used for secondary text, table cells, button labels, and dense interface chrome. At 16px root it's 0.875rem — a fraction that compounds cleanly across nested elements. Tailwind's text-sm and Bootstrap's small both land here.
How it works
To convert 14px to rem, divide by the root font size: 14 / 16 = 0.875. The rem unit is relative to the root element’s font size, which browsers default to 16px.
14px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 14px shifts. Here’s 14px at common root sizes.
| Root size | 14px in rem |
|---|---|
| 16px (default) | 0.875rem |
| 12px | 1.1667rem |
| 14px | 1rem |
| 18px | 0.7778rem |
| 20px | 0.7rem |
| 24px | 0.5833rem |
14px in CSS
Use 14px for secondary body text or dense interface chrome.
.small {
font-size: 14px; /* 0.875rem */
color: var(--muted);
}FAQ
Is 14px the same as 0.875rem?
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 14px at other root sizes.
Will 14px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 14px to scale when users enlarge their default font size, use 0.875rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.