Whilst supporting browsers that have no full-page zoom and keeping the accessibility at a maximum, the use of ems in your style sheet is a must. This is not a difficult thing to do and you can still think in terms of pixels, thanks to great tools like the Em Calculator.

A word of warning however. If you don’t specify your font-sizes with enough accuracy, it can lead to some strange problems. I came across this when creating a multi column list. I used the method where each column is created using a left and a negative top margin. The problem was that because I only used two decimal places for the sizes, my line-heights did not translate a whole number of pixels.

This meant that for each item in the list, the fraction compounded and the total height of each column was not what what I thought – I ended up with a slanted set of columns. This may have not been an issue except each of the browsers interpret the fraction of pixels in a different manner – some round up and some round down.

It turns out that using three decimal places for all Em sizes will solve this and ensure that fractional pixel sizes are eliminated. This way you get no size differences across the different browsers and more predictable layouts. You can adjust the number of decimal places with the Em calculator by clicking on the settings tab and adjusting the value there.