20px to rem

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

At other root sizes

root 16px (default)    20px = 1.25rem
root 10px (62.5%)      20px = 2rem
root 18px (112.5%)     20px = 1.1111rem

At 18px the rounded 1.1111rem is 19.9998px, a difference no reader will see; calc(20rem / 18) is exact if you want it.

em or rem at 20px

20px is a common size for a lead paragraph or a small heading. Sized in em, it depends on where it’s placed: 1.25em inside a parent that is already 1.25em comes out at 25px. Sized in rem, a heading is the same everywhere. Padding is the opposite case: on a button with 20px text, padding: 0.5em 1em grows with the button’s own font size, which is usually what you want.

Why rem and not px

A reader who raises the browser’s default font size to 20px gets 1.25rem at 25px; 20px stays 20px. Zoom scales both, so px text still zooms; it just ignores the default the reader chose.

In Tailwind, Sass and CSS

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

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

font-size: calc(20rem / 16); /* 1.25rem */