36px to rem

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

At other root sizes

root 16px (default)    36px = 2.25rem
root 10px (62.5%)      36px = 3.6rem
root 18px (112.5%)     36px = 2rem

Fluid headings

36px is a typical desktop heading that’s too big for a phone, so it’s often written as a range. Keep rem in the formula:

h1 {
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.25rem);
}

The heading grows with the viewport from 1.75rem to 2.25rem. A size in vw alone wouldn’t follow the reader’s font-size setting, and wouldn’t grow with zoom either, since zooming shrinks the viewport in CSS pixels. The rem parts keep both working.

Why rem and not px

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

In Tailwind, Sass and CSS

Tailwind CSS v4’s text-4xl is 2.25rem and sets line-height: calc(2.5 / 2.25), which is 40px. On the spacing scale (--spacing: 0.25rem), p-9 and size-9 are 2.25rem.

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

font-size: calc(36rem / 16); /* 2.25rem */