codefrontsroot font size 16px

PX to REM Converter

Convert

Direction

Pixels

Root font size

16px unless your CSS sets html { font-size }. The 62.5% trick makes it 10px.

Quick pick (px)

Result

24px ÷ 16 =

1.5rem

px: 24px
rem / em*: 1.5rem
% of root: 150%
pt: 18pt

Common sizes at a 16px root
px	rem at 16px	Copy
	0.5rem
	0.625rem
	0.75rem
	0.875rem
	1rem
	1.125rem
	1.25rem
	1.5rem
	1.75rem
	2rem
	2.25rem
	2.5rem
	3rem
	3.5rem
	4rem
	4.5rem
	5rem
	6rem

* em equals rem only where the parent's font size is the root size; inside a resized parent, em follows the parent.

About this tool

Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.

?

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.