🔤 px ⇄ em Converter
Transform pixel values into em/rem scales for responsive typography.
Developers and designers can translate absolute sizes into scalable units in seconds.
Typically the parent element’s computed font size.
The <html> font size for rem calculations.
em: 1.5
rem: 1.5
Percent: 150%
Reverse check: 24 px (em) · 24 px (rem) · 24 px (%)
How to Use This Calculator
Set the pixel size
Start with the absolute pixel value you want to convert.
Provide base and root sizes
Use the computed font size for em and the root `<html>` size for rem.
Copy scalable units
Use the em/rem/percent outputs in responsive stylesheets or design docs.
Formula
em = px ÷ baseFontSize
rem = px ÷ rootFontSize
Percent = (px ÷ baseFontSize) × 100
px = em × baseFontSize = rem × rootFontSize = Percent × baseFontSize ÷ 100
Use the formula breakdown to confirm the calculation logic or perform the conversion manually if needed.
Full Description
Modern CSS favors relative units like em and rem for accessibility. This converter bridges the gap between pixel specs from design tools and responsive-friendly units in code.
Provide the actual computed base font size when converting to em, since it can differ from the root size due to cascading.
Designers can also use the percent output to communicate scaling relative to the parent element, ensuring consistent visual hierarchy across breakpoints.
Frequently Asked Questions
What if base and root sizes are the same?
Leave both at 16. em and rem will match, useful for quick conversions when the parent inherits the root size.
Can I convert rem back to pixels?
Yes. Use the reverse check or multiply rem by the root font size you entered.
Why allow decimals in pixel values?
Design tools may output fractional pixels. Browsers handle sub-pixel rendering, so the calculator supports decimals too.
Does this handle viewport units?
No. It focuses on font-relative units. Extend it if you need conversions involving vw/vh or clamp().