10px to rem

10px is 0.625rem at the browser’s default 16px root: 10 ÷ 16 = 0.625. Inside a parent that is also 16px it’s 0.625em, in print units it’s 7.5pt (CSS fixes 1pt at 4/3 px), and as a font-size percentage it’s 62.5%, the number behind a well-known trick.

At other root sizes

root 16px (default)    10px = 0.625rem
root 10px (62.5%)      10px = 1rem
root 18px (112.5%)     10px = 0.5556rem

The tool rounds to four decimals, so the 18px value converts back to 10.0008px. Write calc(10rem / 18) when it has to be exact.

The 62.5% trick and its catches

html { font-size: 62.5% } makes 1rem equal 10px at the default, so 1.4rem reads as 14px. It still respects the reader: at a 20px browser default, the root becomes 12.5px. The catch is everything written for a 16px root. Tailwind’s text-sm (0.875rem) drops to 8.75px. Media queries don’t move at all: rem and em in @media use the initial font size, not the one on html (Media Queries Level 4), so 76.8rem is 1228.8px, not 768px.

Why rem and not px

A reader who raises the default font size in browser settings gets larger rem text; 10px stays 10px. Zoom scales both. Fine print is where that setting matters most, and 10px sits below every step of Tailwind’s type scale.

In Tailwind, Sass and CSS

Tailwind CSS v4 has no 10px font size: text-xs is 12px (0.75rem). Use text-[0.625rem], or add --text-2xs: 0.625rem under @theme to get a text-2xs class. On the spacing scale (--spacing: 0.25rem), p-2.5, gap-2.5 and w-2.5 are 0.625rem.

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

font-size: calc(10rem / 16); /* 0.625rem */