12px to rem

12px is 0.75rem at the browser’s default 16px root: 12 ÷ 16 = 0.75. Under a 16px parent it’s 0.75em; it’s also 9pt (CSS fixes 1pt at 4/3 px) and 75% as a font-size percentage.

At other root sizes

root 16px (default)    12px = 0.75rem
root 10px (62.5%)      12px = 1.2rem
root 18px (112.5%)     12px = 0.6667rem

At 18px the division doesn’t end, and the rounded 0.6667rem is 12.0006px; calc(12rem / 18) is exact.

em compounds, rem doesn’t

12px is the usual size for captions, labels and badges, and those often sit inside something that’s already small. A 0.75em badge inside a 0.75em caption shrinks again: 0.75 × 12 = 9px. Written as 0.75rem, it’s 12px wherever it lands, because rem always points at the root. Reach for em when a size should track its surroundings, such as an icon beside text, and rem when it shouldn’t.

Why rem and not px

0.75rem follows the default font size a reader picks in browser settings: at a 20px default it renders at 15px. 12px ignores that setting. Zoom enlarges both, so px pages still zoom; they just don’t honor the size the reader chose once for every site.

In Tailwind, Sass and CSS

In Tailwind CSS v4, text-xs is 0.75rem and sets line-height: calc(1 / 0.75), which is 16px. On the spacing scale (--spacing: 0.25rem), p-3, m-3 and gap-3 are 0.75rem.

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

font-size: calc(12rem / 16); /* 0.75rem */