18px to rem

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

At other root sizes

root 16px (default)    18px = 1.125rem
root 10px (62.5%)      18px = 1.8rem
root 18px (112.5%)     18px = 1rem

An 18px root

Sites built for long reading often make 18px the base size on the root: html { font-size: 112.5% }. A percentage keeps it relative to the reader’s default, where font-size: 18px would override it. Two side effects: every rem in the stylesheet grows by an eighth, so Tailwind’s text-lg becomes 20.25px, and media queries ignore the change, because rem in @media uses the initial font size (Media Queries Level 4). 48rem still means 768px.

18px isn’t WCAG “large text”

WCAG 2.2 defines large-scale text as at least 18 point, or 14 point bold. In CSS that’s 24px, or 18.6667px bold. Regular 18px text needs the 4.5:1 contrast of success criterion 1.4.3, not the 3:1 allowed for large text.

Why rem and not px

1.125rem grows when a reader raises the default font size in browser settings, to 22.5px at a 20px default; 18px doesn’t move. Zoom scales both.

In Tailwind, Sass and CSS

Tailwind CSS v4’s text-lg is 1.125rem and sets line-height: calc(1.75 / 1.125), which is 28px. On the spacing scale (--spacing: 0.25rem), p-4.5 is 1.125rem.

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

font-size: calc(18rem / 16); /* 1.125rem */