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.
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 (%)|
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:
width: 46.15em; /* for non-IE */
*width: 46.04em; /*for IE */
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.