PX to EM Calculator — Pixel to Em & Rem Converter
Convert a pixel size to em, rem, pt, and percent CSS units — with a configurable parent and root font size for precise real-world results.
px
px
px
Relative to the parent element font size
- 1
rem = px ÷ root font size
24 ÷ 16 = 1.5rem is always relative to the root (html) element font size. - 2
Points = px × 0.75
24 × 0.75 = 18At 96 dpi, 1 px = 0.75 pt exactly. - 3
em = px ÷ parent font size
24 ÷ 16 = 1.5000
How does this calculator work?
em = px ÷ parent-font-size; rem = px ÷ root-font-size. Both default to 16 px in browsers, so 16 px = 1 em = 1 rem, 24 px = 1.5 em, and 14 px = 0.875 em. Enter a custom parent or root size for accurate results inside components where the inherited font size differs from 16 px.
Formula
How this is calculated
Browsers lay out content in device pixels, but responsive design relies on relative units so text and spacing scale with user font-size preferences. The two most common relative units are em and rem.
An em is relative to the computed font size of the element's parent. If the parent is 16 px, then 1 em = 16 px, 1.5 em = 24 px, and 0.875 em = 14 px. You can inspect the actual parent font size in browser DevTools under Computed Styles. A rem is always relative to the root (html) element font size, which is the same across the whole page and defaults to 16 px in every major browser unless the stylesheet overrides it. Because rem does not compound with nesting, it is less error-prone for layout spacing.
Percent expresses the same ratio as em but in hundredths — 1 em = 100 %. Points (pt) are a physical unit used in print: at the web standard of 96 dpi, 1 px = 0.75 pt exactly. This calculator shows all four equivalents for any given pixel value so you can pick the unit that fits your CSS context.
Frequently asked questions
em scales relative to the parent element's font size, so it compounds with nesting — a nested em-based rule can grow or shrink unexpectedly. rem always scales relative to the root html font size, which is constant across the page, making it more predictable for spacing and layout.
All major desktop browsers set the default root font size to 16 px unless a user or stylesheet overrides it. Since the browser default parent size is also 16 px, 1 em = 1 rem = 16 px out of the box.
Use em when you want a value to scale proportionally with the local text size — icon sizes, line-height, or padding inside a component that is meant to grow with its own font size. Use rem for site-wide consistent spacing and sizing that should not be affected by nesting.
Also known as
TG we-Calculate Editorial Team. (2026). PX to EM Calculator — Pixel to Em & Rem Converter [Online calculator]. TG we-Calculate. https://we-calculate.com/calculator/px-to-em-calculator
TG we-Calculate Editorial Team. "PX to EM Calculator — Pixel to Em & Rem Converter." TG we-Calculate. 2026. https://we-calculate.com/calculator/px-to-em-calculator.
TG we-Calculate Editorial Team, "PX to EM Calculator — Pixel to Em & Rem Converter," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/calculator/px-to-em-calculator
@misc{wecalculate_px_to_em_calculator, title = {PX to EM Calculator — Pixel to Em & Rem Converter}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/calculator/px-to-em-calculator}}, year = {2026}, note = {TG we-Calculate} }
Did this calculator help you?