px to rem — a CSS unit table of 120 sizes
16 px is 1 rem and also 12 pt. Every size from 1 to 120 px, with its rem, pt, pc, inch and millimetre value on one line.
Sizes you meet most
Body text at 16, small text at 14, spacing at 8, 24 and 32 — the values that keep coming back.
Why rem divides by 16
Because browsers default the root font size to 16 px, and rem is a multiple of it. When a reader enlarges text in their browser settings, only the parts written in rem grow — anything pinned in px stays put.
On screen, pt and inches are still pixels
CSS fixes one inch at 96 px and one point at 1/72 inch. So 16 px is exactly 12 pt — but hold a ruler to the screen and that "inch" will not measure an inch.
Sizes that come out whole
The rem comes out whole on multiples of 16, and the pt on multiples of 4 — because 4 px is exactly 3 pt.
From 1 px to 120 px
How to read this
- rem = px ÷ 16, because browsers default the root font size to 16 px.
- pt = px × 0.75, since CSS fixes an inch at 96 px and a point at 1/72 inch.
- One pc is 12 pt, and one inch is both 96 px and 72 pt.
- Use rem for text and spacing; keep px for hairlines such as borders.
Frequently asked questions
Q. How many pixels is 1 rem?
16 px by default. If the reader has enlarged text in their browser settings, it grows with that — which is exactly why rem is worth using.
Q. Should I write px or rem?
Prefer rem for text and spacing, so everything scales when a reader enlarges type. Keep px for hairlines like a 1 px border.
Q. Why do people set font-size: 62.5% on html?
It makes the root 10 px so 1.6 rem reads as 16 px. The catch is that it also shrinks the page for anyone who deliberately raised their default font size.
Q. Why is pt still around?
It comes from print and survives in print stylesheets and email templates. On screen it converts cleanly: 16 px is 12 pt.
Q. What is the difference between em and rem?
rem always measures against the root font size; em measures against the element’s own font size, so nested ems multiply.