20px to rem = 1.25rem
20 pixels equals 1.25rem at the default root font size of 16px. Adjust the root size below to recalculate.
What’s 20px used for?
20px (1.25rem) sits between body and heading — used for lead paragraphs, small section headings, large body text on landing pages, and pull quotes. It's a useful size when you want emphasis without dropping into heading hierarchy. Tailwind's text-xl lands at 20px.
How it works
To convert 20px to rem, divide by the root font size: 20 / 16 = 1.25. The rem unit is relative to the root element’s font size, which browsers default to 16px.
20px to rem at different root sizes
If you’ve overridden the html root font size, the rem equivalent of 20px shifts. Here’s 20px at common root sizes.
| Root size | 20px in rem |
|---|---|
| 16px (default) | 1.25rem |
| 12px | 1.6667rem |
| 14px | 1.4286rem |
| 18px | 1.1111rem |
| 20px | 1rem |
| 24px | 0.8333rem |
20px in CSS
Use 20px for a lead paragraph or comfortable reading body.
.lead {
font-size: 20px; /* 1.25rem */
line-height: 1.6;
}FAQ
Is 20px the same as 1.25rem?
Yes, at the browser default root font size of 16px. If the root has been changed (some sites use html { font-size: 62.5% } or similar), the conversion changes — see the table above for 20px at other root sizes.
Will 20px scale with user font preferences?
No. Pixel values are absolute and ignore the user’s browser font-size preference. If you want 20px to scale when users enlarge their default font size, use 1.25rem instead — same visual size at the default root, but it grows or shrinks with the user’s setting.