14px → REM
14px to REM — 0.875rem at 16px Base
At the default browser root size of 16px, 14px equals
0.875rem. Formula: rem = px ÷ 16.
Last reviewed:
CSS snippet
.example {
font-size: 0.875rem; /* 14px at 16px root */
padding: 0.875rem;
} PX to REM formula
rem = px ÷ root font size
14px ÷ 16px = 0.875rem Worked example: To convert 14px at a 16px root, divide 14 by 16.
14 ÷ 16 = 0.875. Write font-size: 0.875rem;
instead of font-size: 14px; so
text scales when users enlarge their browser default font size.
Common use cases at 14px (0.875rem)
| Category | Tailwind / design use | CSS property example |
|---|---|---|
| Font size | text-sm (0.875rem) | font-size: 0.875rem; |
| Spacing | — | padding: 0.875rem; |
| Gap / margin | — | gap: 0.875rem; |
Nearby pixel conversions
Also see 12px to rem
and 16px to rem
.
14px to REM FAQ
How do you convert 14px to rem?
Divide 14 by the root font size. At the default 16px base: 14 ÷ 16 = 0.875rem. Formula: rem = px ÷ root font size.
What is 14px in rem at 16px base?
At a 16px root font size, 14px equals exactly 0.875rem. This is the browser default unless your project or the user changes html { font-size }.
Should I use 0.875rem or 14px in CSS?
Use 0.875rem for typography and spacing that should scale with the user's root font-size preference — important for accessibility. Reserve 14px for fixed values like 1px borders or bitmap image dimensions.
How do I convert 0.875rem back to pixels?
Multiply 0.875rem by 16: 0.875 × 16 = 14px. Reverse formula: px = rem × root font size.
Where is 14px commonly used in web design?
14px (0.875rem) maps to text-sm (0.875rem) in typical design systems. For Tailwind spacing, see —. Check the use-case table on this page for CSS property examples.
Full converter
PX to REM Converter — any value, custom base
Cheat sheet
PX to REM cheat sheet — 12px through 64px