CSS px to rem, em & Percent Converter
Convert CSS sizes between px, rem, em, and percent using configurable root and parent font sizes for responsive frontend layouts.
To convert px to rem, divide pixels by the root font size. With a 16px root, 24px equals 1.5rem.
To convert rem to px, multiply rem by the root font size. em and percent depend on the parent font size.
Set the real root size
Most projects use 16px, but design systems can override the html font size.
Use parent size for em
em values change with local context, so parent font size matters when converting nested UI.
Use rem for consistent spacing and typography based on the root font size. Use em when a value should scale with its local context. Use px for precise borders, icons, and fixed assets.
Percent values in this tool are based on parent font size, which is most useful when comparing font-relative sizing.
Example
With a 16px root font size, 24px equals 1.5rem because 24 / 16 = 1.5.
Assumption
rem uses the root font size, while em and percent in this tool use the parent font size you enter.
Limitation
Layout percentages for width, height, or transforms can use different reference boxes. This tool focuses on font-relative sizing.
Typography tokens
Convert pixel font sizes into rem values for accessible, scalable type systems.
Spacing scales
Translate design spacing values into CSS units used by your component library.
Component migration
Convert legacy px values into rem or em while preserving visual sizing.
Frontend QA
Check whether rendered sizes match design specs when root or parent font sizes differ.
What is 16px in rem?
With the common 16px root font size, 16px equals 1rem. If the root font size changes, the rem result changes too.
What is 24px in rem?
With a 16px root font size, 24px equals 1.5rem because 24 ÷ 16 = 1.5.
Why does em depend on parent font size?
em is contextual. A 2em value equals two times the relevant parent or current font size, so nested elements can produce different pixel values.
Does this tool send CSS values to a server?
No. The calculations run locally in your browser and do not require a backend or external API.
Suggested workflow
Responsive CSS sizing path
Convert CSS units, check proportional math, and pair final sizing with color or layout decisions.