CSS Unit Converter — px, rem, em, pt, %

What you can do here

• px to rem and rem to px
• px to em and em to px
• px to pt (point) and pt to px
• px to percent and percent to px
• rem to em and em to rem
• rem to pt and pt to rem
• em to pt and pt to em
• rem to percent and percent to rem
• em to percent and percent to em
• pt to percent and percent to pt
• All five units at once from any input
• A whole stylesheet: every px value to rem, em or pt

Pick a pair from the list under the tool, or choose Convert to in the menu. Each pair has its own address, such as /css-unit-converter?mode=px-to-rem or ?mode=point-to-em, so you can bookmark the one you use most.

How each unit resolves

Unit	Relative to	Formula from px
px	Nothing — it is the absolute reference. One CSS pixel is 1/96 of a CSS inch, independent of screen DPI.	—
rem	The root font-size (the font-size on <html>), 16px by default.	px / root
em	The current element's font-size — in practice the parent's, for properties other than font-size itself. Compounds when nested.	px / parent
pt	A fixed ratio: CSS defines 1in = 72pt = 96px, so 1pt ≈ 1.333px.	px × 0.75
%	For font-size, the parent's font-size. For other lengths, a measurement of the containing block. This tool uses the parent font-size.	px / parent × 100

When to use rem vs em

Reach for rem by default. It is anchored to one number — the root font-size — so 1.5rem is the same everywhere on the page and your spacing scale stays predictable. Reach for em when you want a value to track its local context: padding of 0.75em inside a button grows automatically if that button's font-size grows, and a 1.2em line spacing follows whatever text it wraps. The trade-off with em is compounding — nest three elements that each set font-size: 0.9em and the innermost text is 0.9 × 0.9 × 0.9 ≈ 0.73 of the outer size.

Accessibility: rem and the user's font-size

Browsers let people raise the default font-size in their settings, and that changes what 1rem resolves to. A layout built in rem — type, margins, padding, max-widths — scales up with that preference, so the page stays proportional and readable. The same layout hard-coded in px ignores the setting entirely. Keep font sizes and generous spacing in rem; px is fine for hairline borders, shadows, and 1px details that should not scale.

Common px values

Assuming a 16px root and 16px parent (the browser default):

px	rem	em	pt	%
4	0.25rem	0.25em	3pt	25%
8	0.5rem	0.5em	6pt	50%
10	0.625rem	0.625em	7.5pt	62.5%
12	0.75rem	0.75em	9pt	75%
14	0.875rem	0.875em	10.5pt	87.5%
16	1rem	1em	12pt	100%
18	1.125rem	1.125em	13.5pt	112.5%
20	1.25rem	1.25em	15pt	125%
24	1.5rem	1.5em	18pt	150%
32	2rem	2em	24pt	200%
48	3rem	3em	36pt	300%
64	4rem	4em	48pt	400%

The classic 62.5% trick sets html { font-size: 62.5% } so 1rem = 10px and the arithmetic gets easier. It works, but it forces every third-party component that assumes a 16px root to be re-tuned, so most design systems now keep the 16px root and let this kind of converter do the math.

Formulas for every unit pair

R is the root font-size and P the parent (reference) font-size, both 16px by default. 1pt = 4/3 px, so dividing by 0.75 turns points into pixels.

Worked examples: em to px and px to em

em depends on the font-size where it is used, so the same number gives different pixels in different places:

Value	Reference (parent) size	Result
1em	16px	16px
1.5em	16px	24px
0.875em	16px	14px
1.5em	20px	30px
24px	16px	1.5em
18px	20px	0.9em

Watch for compounding: if a component sets font-size: 1.25em on itself and then uses padding: 1em, the padding is measured against the enlarged size. Convert against the font-size that will actually be in effect at that point in the tree, not against 16 by habit.

Converting a whole stylesheet from px to rem

The Convert a stylesheet tab rewrites every length in the unit you choose. With a 16px root, this:

.card { padding: 24px 16px; font-size: 18px; border: 1px solid #e2e8f0; }

becomes:

.card { padding: 1.5rem 1rem; font-size: 1.125rem; border: 1px solid #e2e8f0; }

1px hairlines stay in px by default, because a border that scales to 1.25px at a larger font-size tends to render blurry. Colors such as #e2e8f0 and unitless numbers are never touched.

Questions