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.
Try a common CSS size
px
16px
absolute pixels
rem
1rem
root font size
em
1em
parent font size
%
100%
parent font size
Example CSS
font-size: 1rem;
Base pixel value: 16px
rem uses 16px root size. em and percent use 16px parent size.
This conversion depends on the root and parent font-size assumptions above. Verify the final size in the component where the CSS will run.
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.
Using the wrong root size
px to rem depends on the actual html font size. Check your design system before assuming 16px.
Treating em like rem
em is local and can compound through nesting. Use the relevant parent size for component-level values.
Using font-relative math for layout percentages
Percent widths, heights, transforms, and gaps can reference different 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.
How are CSS values processed?
The calculations are handled in the browser for this tool based on the current public implementation.
Suggested workflow
Responsive CSS sizing path
Convert CSS units, check proportional math, and pair final sizing with color or layout decisions.