Dave Woods - Freelance Web Design Warwickshire

Converting px to em or percentage

I’ve always created font sizes and elements of a page that I need to resize in % or em but when you’ve created a mock-up of what the site will look like in Photoshop then it can sometimes be a bit of a pain trying to figure out what size % or em you need to use in order to replicate your design within a web browser.

Why bother

If you’ve got perfect vision or are using a modern browser then this may not be important to you but for those with poor eye sight or those that just find larger text easier to read it’s vital that either % or em’s are used to size the text. All browser’s have built in functionality to resize text but if you use px or pt then older browser’s ignore this function and leave the font at the size specified so for the user, it’s tough luck.

Obviously you want as many people as possible to be able to access and use your site so by using % or em you can allow this functionality to work in all browsers.

Converting pixels (px) to percent (%)

There’s some great information on this at http://developer.yahoo.com/yui/fonts/ which I’ve replicated in the table below.

If you want this size in pixels (px) Declare this percent (%)
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197

Converting pixels (px) to em

Using em’s is a little more difficult but I’d recommend using them for fluid layout’s that should expand with the font-size.

For all non-IE browsers the width should be divided by 13.

So for example, you have a width of 600 pixels that you want to display using em’s.

600 / 13 = 46.153846……

Em’s can be displayed to two decimal point and I’d always recommend rounding down so 600 pixels becomes 46.15em.

However, typically IE’s conversion is slightly different so take the number that you’ve just calculated and multiply this by 0.9759 to give you 45.041538…… or 45.04 after rounding.

So now that you have these two width’s you’ll need to apply them within your CSS using the following:

#container {
width: 46.15em; /* for non-IE */
*width: 46.04em; /*for IE */
}

Summary

And that’s all there is to it. They’re useful conversions to know and understand and whilst there’s nothing wrong with using a fixed width layout for the design it’s imperative that either em’s or % are used for the font to ensure accessibility.

3 comments on “Converting px to em or percentage

  1. Henk Wijnholds

    Once you’ve declared that the body has a font-size of 75%, then an em is 12px. From then on it is possible to declare width’s of images and other elements in em’s.

    My example on this is http://www.machinenet.nl. It was my first experiment on this. The 12px em size is perfect to divide standard banner sizes etc.

  2. Peter Schreiner

    Thanks for the tip. I just sat down this morning in an attempt to convert px to percent, but then thought to Google it–and better, yet ended up here. Do you know if IE9 has the same factor as its predecessors?