12px to rem = 0.75rem
12 pixels equals 0.75rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 12px used for?
12px is the standard size for small UI text — labels, captions, footer copy, and helper text under form fields. At 16px root it's 0.75rem. It's small enough to feel secondary but stays legible for sighted users on desktop. Avoid it on mobile body text where it dips below comfortable reading sizes.
How it works
To convert 12px to rem, divide by the root font size: 12 / 16 = 0.75. The rem unit is relative to the root element’s font size, which browsers default to 16px.
12px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 12px shifts. Here’s 12px at common root sizes.
| Root size | 12px in rem |
|---|---|
| 16px (default) | 0.75rem |
| 12px | 1rem |
| 14px | 0.8571rem |
| 18px | 0.6667rem |
| 20px | 0.6rem |
| 24px | 0.5rem |
12px in CSS
Use 12px for captions, labels, or very small interface text.
.caption {
font-size: 12px; /* 0.75rem */
letter-spacing: 0.02em;
text-transform: uppercase;
}FAQ
Is 12px the same as 0.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 12px at other root sizes.
Will 12px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 12px to scale when users enlarge their default font size, use 0.75rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.