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