PX to REM Converter
Free tool No sign-up
About this tool
Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.
Advertisement
Why use REM instead of PX?
Respects user accessibility settings
When a user increases their browser font size, REM-based layouts scale automatically. PX-based layouts stay fixed and can become unreadable.
Proportional scaling
Change one root value and your entire type scale and spacing system scales proportionally — no need to touch dozens of individual values.
Consistent design systems
REM makes it trivial to build a spacing scale (0.25rem, 0.5rem, 1rem, 1.5rem…) that stays coherent across breakpoints and components.
Better cross-device behaviour
Different devices have different default font sizes. REM adapts; PX does not — your layout just works on more screens.
Worked examples
Example
/* 24px at 16px base */ font-size: 1.5rem; /* 24 ÷ 16 = 1.5 */
62.5%
/* Change root to 10px for easy math */
html { font-size: 62.5%; } /* 10px */
.card { padding: 2.4rem; } /* 24px */ Type scale
:root { font-size: 16px; }
h1 { font-size: 3rem; } /* 48px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */ The formula
rem = px ÷ base font size
Default browser base font size is 16px
Pro tips
01
Set base on :root, not body
Always set font-size on :root (or html). Some libraries override body font-size, which breaks em-based REM calculations.
02
62.5% trick for easy math
Set html { font-size: 62.5% } to make 1rem = 10px. Then 24px becomes 2.4rem — much easier to reason about.
03
Use REM for spacing too
Apply REM to padding, margin, gap, and border-radius — not just font-size. This gives the whole layout scale coherence.
04
Avoid REM for borders
Keep border-width in px (1px, 2px). Borders should not scale with font size — a 1px border should always be 1px.
Advertisement