1. Home

CSS PX to EM Conversion

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:

    px

    Convert PX to EM:
    px

    Convert EM to PX:
    em

    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.

    function fillTable(x) { var t = ""; t = t + "

    " t = t + "" t = t + "" t = t + "" t = t + "" t = t + "" for (i = 5; i < 26; i++) { t = t + "" t = t + "" t = t + "" t = t + "" } t = t + "
    pxempercent
    " + i + "px" + (i/x).toFixed(4) + "em" + ((i/x) * 100).toFixed(2) + "%
    "; document.getElementById("demo").innerHTML = t; } fillTable(16); function wrong() { document.getElementById("myInput2").disabled = true; document.getElementById("myInput2").value = ""; } function wrong2() { document.getElementById("myInput").disabled = true; document.getElementById("myInput").value = ""; } function works() { document.getElementById("myInput2").disabled = false; document.getElementById("myInput2").value = ""; } function works2() { document.getElementById("myInput").disabled = false; document.getElementById("myInput").value = ""; } function myFunction() { var x = document.getElementById("myInput").value; var z = document.getElementById("myInput2").value; var y = document.getElementById("pix1").value; var res = document.getElementById("result1"); if (x) { res.innerHTML = x/y + "em"; } else { res.innerHTML = z*y + "px"; } if (isNaN (x) || isNaN (z) || isNaN (y)) { res.innerHTML = "Wrong input! Use numbers"; res.style.color = "red"; } else { res.style.color = ""; } }

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US