1 Reply Latest reply on Sep 25, 2010 11:27 AM by Nancy OShea

    Better method to convert pixels to ems

    HealthcareHelper Level 1

      Don't know if my Dreamweaver CS5 can help me do this:


      I'm experimenting with making my site more accessible for vision-impaired people by using ems in my CSS style sheet for image sizes as described at http://sperling.com/examples/zoom/


      The problem I have is calculating the ems. I have to open the image in Photoshop, use Image Size to figure what the height and width pixels would be at a slightly smaller size, then go to an online site that lets me convert pixels to ems. What a hassle. Shorter path?


      - Keith Purtell

        • 1. Re: Better method to convert pixels to ems
          Nancy OShea Adobe Community Professional & MVP

          First you must establish the base font-size in your CSS like so:  This assumes 1em = 100% = 16px (standard browser default).


          html {font-size: 100%}


          body {font-size: 1em}


          Then define your page layout and division widths in ems using the following formula:


          1 divided by 16 = 0.0625

          multiplied by the number of pixels required

          = value in ems.


          0.0625 X 900px = 56.25em

          0.0625 X 300px = 18.75em

          0.0625 X 150px = 9.375em


          #wrapper { width: 56.25em}

          #divName {width: 18.75em}

          #divName img {width: 9.375em; height: 9.375em}


          IMPORTANT!  If you don't wrap elastic images inside elastic containers, your page will fall apart when people increase text size in browser.


          You can see a working DEMO of this method here:



          Good luck,


          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists