CSS Font sizes: Conversion from Points to Pixels to Em to %

I recently had to convert fixed font sizes in a sites CSS to and was wondering if there were any formulas to convert from Points to Pixels to Em to % …

As usual the answers were to be found at the http://webstandardsgroup.org/:

  1. To go from Pixels to Em’s, simply divide by 16
  2. Use Reed Design’s table which lists conversions from Points to Pixels to Em to %. It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

7 thoughts on “CSS Font sizes: Conversion from Points to Pixels to Em to %”

  1. I came across this page while searching for a way to do exactly that, but in Javascript.

    I eventually just used a trick that works in both FFox and IE to figure out the DPI, so that conversion is easy.
    —–
    function findDPI() {
    var outer=document.createElement(“div”);
    document.body.appendChild(outer);
    outer.style.position = “absolute”;
    outer.style.width=”1in”;
    var ret=outer.offsetWidth;
    outer.style.display=”none”;
    return ret;
    }
    —–
    Mind you, it only works on square-pixel displays (for example, at 1280×1024, your pixels aren’t square. I wrote a complement function to get the vertical dpi; all you have to do is change the ‘width’s to ‘height’s)

    For percent conversions, it works like this: Pv * document.body.offsetWidth / 100 (or Height, depending on the dimention the % is for).

    For font size %’s, it’s much the same, but you do it like so: Pv * FSz * DPI / 7200

    1 Pt = DPI / 72

    EM’s are equal to the font size, so 1 EM == FSz * DPI / 72

    In all, Pv is % value, FSz is font size.

    The most common DPI is 72, but my screen does 96. YMMV.

  2. By the way, STORE your DPI; don’t go running the function repeatedly. If you do, you’ll find that your DOM tree has a whole buncha DIVs at the end that do nothing but eat up memory.

  3. Neerav,

    Thanks a lot for this essential piece of information. I have read so many articles about using ems for image sizes and none of them tell the most essential clue necessary to achieve the feat: divide dimensions by 16!

    I tried by myself and got to 16.4 which was not giving the most accurate measurements after the conversion.

    Well done.

    Cheers,

    Luis

  4. I never really understood the difference and until now have just been making changes blind and hoping they look good. Hopefully this will reduce the amount of refreshing I need to do

Leave a Reply

Your email address will not be published. Required fields are marked *