How this calculator works
A pixel is an absolute size on a screen. An em is relative to the font size of the element, so 1.5 em means one and a half times the current font size. A rem is relative to the root element's font size, which makes it more predictable than an em in nested elements. A percentage in font-size works like an em. The browser default root size is usually 16 px, but a user or a style sheet can change it, so the calculator asks for both sizes rather than hiding them.
Formula
px = em x base font size. em = px / base font size. rem = px / root font size. percent = em x 100. When the base and root sizes are both 16 px, 1 em, 1 rem and 100 percent all equal 16 px.
Worked example
24 px at a 16 px base is 1.5 em, 1.5 rem and 150 percent. 2 em at a 16 px base is 32 px. At a 20 px base, 24 px is 1.2 em or 120 percent.
Advertisement
Frequently asked questions
What is the difference between em and rem?
An em is relative to the font size of the element where it is used, so ems compound in nested elements. A rem is always relative to the root font size, so it stays predictable at any nesting depth.
Are pixels always a fixed physical size?
No. A CSS pixel is a reference unit that the browser maps to device pixels using the display density. On a high-density screen one CSS pixel may cover several physical pixels, but the layout still treats it as one pixel.
Why does 1 em not always equal 16 px?
Sixteen pixels is the browser default, not a law. A style sheet, an accessibility setting or a relative parent can change the base font size, and the value of an em changes with it. That is why the base size is an input.