24px to rem

24px is 1.5rem at the browser’s default 16px root: 24 ÷ 16 = 1.5. It’s 1.5em under a 16px parent, 150% as a font-size percentage, and 18pt, since CSS fixes 1pt at 4/3 px. That last number matters for accessibility.

At other root sizes

root 16px (default)    24px = 1.5rem
root 10px (62.5%)      24px = 2.4rem
root 18px (112.5%)     24px = 1.3333rem

At 18px the rounded 1.3333rem is 23.9994px; calc(24rem / 18) is exact.

Where 24px shows up

WCAG 2.2 counts text as large-scale from 18 point, and 18pt is exactly 24px. Regular text at 24px or more may meet success criterion 1.4.3 with a 3:1 contrast ratio instead of 4.5:1; bold text qualifies from 14pt, 18.6667px. 24px is also the minimum in 2.5.8 Target Size (level AA): pointer targets of at least 24 by 24 CSS pixels, with exceptions such as links inside a sentence.

Outside WCAG, it’s the size of an unstyled h2: the HTML standard’s rendering rules give it 1.5em, 24px at the default.

Why rem and not px

1.5rem follows the default font size a reader sets in browser settings, reaching 30px at a 20px default; 24px stays 24px. Zoom scales both.

In Tailwind, Sass and CSS

Tailwind CSS v4’s text-2xl is 1.5rem and sets line-height: calc(2 / 1.5), which is 32px. On the spacing scale (--spacing: 0.25rem), p-6 is 1.5rem, and size-6 makes a 24px icon box.

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

font-size: calc(24rem / 16); /* 1.5rem */