CSS PX-EM Converter
Set a default font size:
PX to EM Converter
- Set a default font size (usually 16px)
- Then, convert a pixel value to em, based on the default size
- Or, convert an em value to pixels, based on the default size
Set a default font size:
<input class="conv" type="text" id="pix1" size="8" value="16"> px
Convert PX to EM:
<input onfocus="wrong()" onblur="works()" class="conv" type="text" size="8" id="myInput" value=""> px
Convert EM to PX:
<input onfocus="wrong2()" onblur="works2()" class="conv" type="text" size="8" id="myInput2" value=""> em
<button class="btn btn-lg ws-green w3-round" onclick="myFunction()"> Convert</button>
Result:
Body Font Size
In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table.
Tip: The default font size is usually 16px.
What is the difference between PX, EM and Percent?
Pixel is a static measurement, while percent and EM are relative measurements. Percent depends on its parent font size. EM is relative to the current font size of the element (2em means 2 times the size of the current font). So, If the font size of body is 16 pixels, then 150% will be 24 pixels (1.5 * 16), and 2em will be 32 pixels (16 * 2). Look at CSS Units for more measurement units.