48px to rem

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

At other root sizes

root 16px (default)    48px = 3rem
root 10px (62.5%)      48px = 4.8rem
root 18px (112.5%)     48px = 2.6667rem

At 18px the rounded 2.6667rem is 48.0006px; calc(48rem / 18) is exact.

48px as a box, not a font

48px is as common for boxes as for type. Material Design recommends touch targets of at least 48 by 48 dp; WCAG 2.2 asks for 24 by 24 CSS pixels at level AA (2.5.8) and 44 by 44 at AAA (2.5.5). A button with min-height: 3rem grows with its label when a reader raises the default font size; a fixed height: 48px can clip the enlarged text.

Why rem and not px

At a 20px browser default, 3rem is 60px while 48px stays 48px. Zoom scales both, so only rem follows the reader’s setting.

In Tailwind, Sass and CSS

Tailwind CSS v4’s text-5xl is 3rem and sets line-height: 1, so the line box is 48px too; smaller steps get looser ratios, like text-base at 1.5. On the spacing scale (--spacing: 0.25rem), p-12 is 3rem, and size-12 makes a 48px square.

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

font-size: calc(48rem / 16); /* 3rem */