32px to rem

32px is 2rem at the browser’s default 16px root: 32 ÷ 16 = 2. That’s 2em under a 16px parent, 24pt (CSS fixes 1pt at 4/3 px) and 200% as a font-size percentage.

At other root sizes

root 16px (default)    32px = 2rem
root 10px (62.5%)      32px = 3.2rem
root 18px (112.5%)     32px = 1.7778rem

At 18px the rounded 1.7778rem is 32.0004px; calc(32rem / 18) is exact.

The default h1

The HTML standard’s rendering rules give a top-level h1 font-size: 2em, so an unstyled heading is 32px at the default size. Because that’s em, it follows the parent: inside a 20px container the same h1 is 40px. Writing 2rem ties it to the root instead, so it’s 32px wherever it sits.

Not a Tailwind font size

Tailwind CSS v4 goes from text-3xl (1.875rem, 30px) to text-4xl (2.25rem, 36px). Use text-[2rem], which sets only the font size, or define --text-title: 2rem under @theme to get a text-title class. 32px is on the spacing scale (--spacing: 0.25rem): p-8 is 2rem, and size-8 is a common avatar or icon-button box. It’s also the line height text-2xl sets.

Why rem and not px

A reader who raises the browser’s default font size to 20px gets 2rem at 40px; 32px stays 32px. Zoom scales both, so only rem honors that setting.

In Sass and CSS

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

font-size: calc(32rem / 16); /* 2rem */