CSS px / rem / em Converter
Convert pixels to rem, em and points for any root font size — the quick way to keep CSS typography consistent and accessible.
px, rem, em and pt — and why rem matters
CSS lets you size things in several units, and mixing them up is a common source of layout bugs. A pixel (px) is an absolute, fixed size. A rem is relative to the root font size — the size set on the <html> element, which browsers default to 16px — so 1.5rem equals 24px when the root is 16px. An em works the same way but relative to the parent element's font size, which makes it powerful but harder to track. A point (pt) comes from print; on screen, 1pt equals 1.333px (because 96px = 72pt).
This converter turns any value into all of these at once. Change the root size and the rem values update, which is exactly how a real page behaves when a user bumps up their default font size for readability.
Why use rem instead of px for fonts?
Accessibility. When you size text in rem, it scales with the user's chosen browser font size, so people who increase their default for readability get larger text everywhere. Text sized in fixed px ignores that preference. The W3C and MDN both recommend relative units for text for this reason.
Quick px to rem reference (16px root)
| Pixels | rem | Typical use |
|---|---|---|
| 12px | 0.75rem | Small print, captions |
| 16px | 1rem | Body text (the default) |
| 18px | 1.125rem | Comfortable body text |
| 24px | 1.5rem | Sub-headings |
| 32px | 2rem | Section headings |
| 48px | 3rem | Page titles |
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the usual 16px root, 24px is 24 ÷ 16 = 1.5rem. Change the base in the tool above if your site sets a different root size.
What is the difference between rem and em?
rem is always relative to the root (html) font size, so it is predictable across the whole page. em is relative to the current element's font size, so it can compound when nested. rem is generally safer for consistent sizing.
Why is 1pt not equal to 1px?
Points come from print, where 72pt equals one inch. On screen CSS defines 96px per inch, so 1pt equals 96/72 = 1.333px. The converter applies that ratio automatically.
Should I use px or rem for font sizes?
Use rem for text so it scales with the user's chosen browser font size, which is better for accessibility. px is fine for borders, shadows and fixed details that should not scale.
Does changing the root font size affect rem values?
Yes. rem is defined relative to the root, so if you set the html font size to 18px instead of 16px, every rem value represents a larger number of pixels. The tool recalculates when you change the base.
This tool runs entirely in your browser — nothing you type is sent to our servers. Tudug is reader-supported and may earn from ads.