EM to PX Converter – PX, EM & REM
Convert em or rem to pixels, or pixels to em and rem. Set root and parent font sizes and see the effect of nested font sizes.
Formula and sources updated · Data sources · 1View algorithm, constants and default inputs (JSON)
About this calculator
For font-size, em uses the inherited parent font size, while rem uses the root font size. With a 16 px root and a parent multiplier of 0.8, the parent is 12.8 px. Then 1.5 em = 19.2 px, while 1.5 rem = 24 px. Select em or rem to enter a relative size; select px for the reverse conversion.
Worked example
calculated with the default values below
Input unit px · Root font size 16 px · Pixel size to convert 24 px · Size to convert 1.5 · Parent size relative to root 1 × · Type scale ratio Major third (1.25) · Scale steps 5 Size in em 1.5000 em · Size in rem 1.5000 rem · Equivalent in root em 1.5000 em · Pixel result 24.00 px · Type scale from the root size +4: 39.06 px / 2.441 rem | +3: 31.25 px / 1.953 rem | +2: 25.00 px / 1.563 rem | +1: 20.00 px / 1.250 rem | base 0: 16.00 px / 1.000 rem · Note With a parent size of 1 em, em and rem are identical
Data sources
Disclaimer
These calculators give general estimates. Sizing, pricing, availability and standards vary by brand, retailer and country, so treat the output as a starting point and confirm it against the seller's or authority's own figures.
Implementation source
This record describes the implementation used by this page. It is not independent validation. External references, when available, support only the stated formula or definition; estimates and custom rules retain their own assumptions.
Formula and variables
em = px ÷ (b × ep); rem = px ÷ b; px = em × b × ep = rem × b; px_i = b × r^i (i = 0 … steps − 1)
- px
- pixel size
- b
- root font size in pixels
- ep
- parent size as a multiple of the root
- em
- size relative to the parent
- rem
- size relative to the root
- r
- type scale ratio
- px_i
- scale step in pixels
- steps
- number of scale steps
For font-size, em uses the inherited parent font size, while rem uses the root font size. With a 16 px root and a parent multiplier of 0.8, the parent is 12.8 px. Then 1.5 em = 19.2 px, while 1.5 rem = 24 px. Select em or rem to enter a relative size; select px for the reverse conversion.
Frequently asked questions
Why does a nested em differ from a rem in this converter?
A rem is always anchored to the root font size of 16 px, so 1.5 rem is 24 px no matter where it sits. An em compounds with its parent: the converter multiplies the pixel size by the parent factor, so a 24 px value inside a 0.8 em parent becomes 19.2 px compounded em. That is why the 'nested' output can read lower than the plain em even with identical inputs.
How do parent and root font sizes affect em to px?
For font-size, em uses the inherited parent font size, while rem uses the root font size. With a 16 px root and a parent multiplier of 0.8, the parent is 12.8 px. Then 1.5 em = 19.2 px, while 1.5 rem = 24 px. Select em or rem to enter a relative size; select px for the reverse conversion.