PX to REM Converter
What is 24px in rem? How many pixels is 1.125rem? Enter a value in any CSS unit — px, rem, em, pt, or percent — and see it in all the others, at whatever root font size your project uses.
browser default: 16
px (input)
24px
rem
1.5rem
em
1.5em
pt
18pt
%
150%
rem = px ÷ root, pt = px × 0.75 (CSS fixes 96px = 72pt), % = rem × 100. At the 16px default, 24px = 1.5rem = 18pt = 150%. rem tracks the root element; em tracks the parent, so nested em values compound.
Why REM Wins for Font Sizes
All the math hangs off the root font size, 16px by default: rem = px ÷ root, so 24px = 1.5rem = 150%, and CSS fixes 96px to the inch (72pt), making pt = px × 0.75 — 24px = 18pt. The accessibility payoff: users who raise their browser's default font size see rem-based text scale with their preference, while px-based text ignores it. Em looks similar but is relative to the parent's font size, so nested em values compound (1.2em inside 1.2em is 1.44×) — handy for spacing that should track local text, risky for the text itself.
Common sizes at the 16px default root
12px = 0.75rem = 9pt 20px = 1.25rem = 15pt 14px = 0.875rem = 10.5pt 24px = 1.5rem = 18pt 16px = 1rem = 12pt 32px = 2rem = 24pt 18px = 1.125rem = 13.5pt 48px = 3rem = 36pt rem = px ÷ root pt = px × 0.75 % = rem × 100
Frequently Asked Questions
Should I use rem or em for font sizes?
Prefer rem for font sizes: it's always relative to the root element, so 1.5rem is 24px everywhere (at the 16px default) and it respects the user's browser font-size preference. Em is relative to the parent's font size, so nested elements compound — 1.2em inside 1.2em is 1.44× — which makes em better suited to padding or margins that should scale with the local text.
Why is 1rem equal to 16px?
Browsers ship with a default root font-size of 16px, so 1rem = 16px, 1.5rem = 24px, and 0.875rem = 14px. But it's a default, not a constant: users can raise it in browser settings, and rem-based layouts scale along with that choice — px-based ones don't.
How do pixels convert to points in CSS?
CSS fixes the ratio at 96px = 1 inch = 72pt, so 1px = 0.75pt and 24px = 18pt. Note this is the CSS reference pixel, not your screen's physical pixels — print stylesheets are where pt sizes actually map to physical points on paper.
Why shouldn't I set font sizes in px?
Many users raise their browser's default font size (Settings → Appearance) instead of zooming. Px values ignore that preference entirely, while rem values scale with it — a 1rem paragraph becomes 20px for a user who set their default to 20. WCAG-friendly practice is rem for type, with px reserved for things like borders that shouldn't grow.