Tools — 08
Four units, one number underneath.
px is what the screen does, rem is what the reader chose, pt is what the printer expects. They are the same measurement seen from three different places — and the conversion should never be the reason a layout is wrong.
Root font size
This is the browser default, or whatever you set on html. Changing it moves rem and em only — px and pt are absolute and stay where they are.
Conversion
Absolute. Ignores the root font size.
Relative to the root font size.
Relative to the parent — here, the root.
Print unit. 1pt = 1.333px at 96dpi.
Copy-ready output
/* 16px at a 16px root */
--size: 1rem; /* 16px */Reference
To convert px to rem, divide by the root font size — 24px ÷ 16 = 1.5rem. rem is always relative to the root element; em is relative to the current element's font size. Points convert at 0.75pt per px, so 16px is 12pt.
What is the difference between rem and em?
rem is relative to the root element's font size and is therefore the same everywhere in the document. em is relative to the font size of the element it is used on, so it compounds through nesting.
That compounding is a feature for component-internal spacing — padding in em scales with the component's own text — and a bug for a global scale, where a nested list can end up at a size nobody chose.
Why is 16px the default root font size?
Because every major browser ships 16px as the default, and that default is a user preference someone may have changed. Expressing sizes in rem honours the change; expressing them in px overrides it.
This is why the converter lets you set the root size: if your CSS sets html { font-size: 62.5% } to make 1rem equal 10px, every conversion on the page shifts with it.
Should CSS use px or rem?
rem for type, and for spacing that surrounds type. WCAG 2.2 success criterion 1.4.4 requires text to scale to 200% without loss of content, and text sized in px does not respond to the browser font-size setting at all.
px remains correct for hairline borders, shadow offsets and anything that should stay one physical pixel regardless of text size.
| px | rem | em | pt |
|---|---|---|---|
| 12px | 0.75rem | 0.75em | 9pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 32px | 2rem | 2em | 24pt |
| 48px | 3rem | 3em | 36pt |
Common questions
- How many px is 1rem?
- 16px by default, because that is the default root font size in every major browser. If the root font size has been changed, 1rem equals whatever that new value is.
- How do I convert px to rem?
- Divide the pixel value by the root font size. At the default 16px root, 24px is 1.5rem and 12px is 0.75rem.
- Is pt a valid CSS unit for screens?
- It is valid but not appropriate. pt is an absolute print unit fixed at 1/72 inch, defined in CSS as 1.333px. Use rem for screen typography and reserve pt for print stylesheets.