🔡 PX / EM / REM Converter
Convert between pixels, em and rem for CSS — set your base (root) font size and enter a value in any unit to see it in the other two.
Two different divisors
Whichever of the three boxes you type in is converted to pixels first, then the other two are recalculated. The whole tool is these four lines:
px = em × parentFont px = rem × baseFont
em = px / parentFont rem = px / baseFontThat is why there are two font-size fields. rem always divides
by the root size - the one on the html element - while
em divides by the computed font size of the element's parent. At
the 16px defaults, 24px is 1.5 of either. Change the parent field to 20px and the
same 24px becomes 1.2em but stays 1.5rem. Results are rounded to three decimal
places, so 14px against a 16px root shows as 0.875rem exactly, while 15px gives a
repeating 0.938rem.
Which unit to reach for
- rem for type scales, spacing and layout. One divisor for the whole document means a size you set in one place cannot drift.
- em for things that should scale with their own text - button padding, an icon sized next to a label, a letter-spacing tweak.
- em compounds, and that is the trap. Nest three elements each at 0.9em and you get 0.9³ = 0.729, so 16px becomes 11.66px by the third level. rem never does this.
html { font-size: 16px }. It looks
harmless but it overrides the default size a reader has chosen in their browser,
and every rem on the page then ignores it. Leave the root alone, or set it as a
percentage.Frequently asked questions
How many px is 1rem?
16px in every browser out of the box, because that is the default root font size. It is 16px only until the user or your stylesheet changes the size on the html element - which is the entire point of the unit.
What is the difference between em and rem?
rem is measured against the root element's font size and is the same everywhere on the page. em is measured against the parent's font size, so it changes with context and multiplies when elements using it are nested.
Should I use em or px in media queries?
em, and note that in a media query it is always relative to the browser's default 16px, not to your root font-size. A breakpoint of 48em is 768px and will move correctly if the reader has enlarged their default text.