14px to rem

14px is 0.875rem at the browser’s default 16px root: 14 ÷ 16 = 0.875. With a 16px parent it’s 0.875em, in print units it’s 10.5pt (CSS fixes 1pt at 4/3 px), and as a font-size percentage it’s 87.5%.

At other root sizes

root 16px (default)    14px = 0.875rem
root 10px (62.5%)      14px = 1.4rem
root 18px (112.5%)     14px = 0.7778rem

At 18px the value doesn’t divide evenly. The tool stops at four decimals, so 0.7778rem is really 14.0004px; calc(14rem / 18) keeps it exact.

Where 14px goes wrong

14px is the usual size for interface text: buttons, table cells, form hints. Two mistakes are common here. Nested em: a 0.875em list inside a 0.875em sidebar renders at 12.25px, and a third level shrinks again, while rem never compounds. And points mixed up with pixels: 10.5pt is 14px, but 14pt is 18.6667px, so a size that loses its unit on the way from a print spec comes out a third too big or a quarter too small.

Why rem and not px

A reader who sets a 20px default in browser settings sees 0.875rem at 17.5px; 14px stays put. Zoom scales both, so rem is about honoring a setting the reader made once for every site.

In Tailwind, Sass and CSS

Tailwind CSS v4’s text-sm is 0.875rem and sets line-height: calc(1.25 / 0.875), which is 20px. On the spacing scale (--spacing: 0.25rem), p-3.5 is 0.875rem.

@use 'sass:math';
font-size: math.div(14px, 16px) * 1rem; // 0.875rem

font-size: calc(14rem / 16); /* 0.875rem */