px vs em design

quick recap

I assume most of you will know the basic difference between a px and em design, but I'll provide a quick recap anyway. px is a unit used for screens. It's an absolute measure that defines the size of an element based on the resolution of the client. On the other end we have em, which is a unit based on the value of the font-size. 1em equals the height of the current font-size (translated to px).

A good time ago em designs became in fashion as people starting thinking about the best way to handle font resizing using the browser. In an em design, the whole design is supposed to zoom with the font-size, making sure that none of the text spills over or out any graphical elements. Traditional px designs are not that flexible and retain their measures in absolute values, no matter what the font-size might be, often causing the layout to break.

Opera was the first to put a lid on the whole px/em argument by introducing a visual zoom to their browser. Rather than size the font, the whole site was visually zoomed. A nice feature, though you'll probably know that none of the browsers today can provide a perfect graphical zoom. Besides that, the method is somewhat flawed at its core because any images used will turn out fuzzy and unclear. Using em designs and simple font-sizing often gets you the better results (if it is designed as such of course).

designing for flexibility

The reason why px designs "sound" easier is because it is assumed that lengths are definite and unchanging. Once you receive the design, you can determine the width of elements, so trickier visual elements with rounded corners and drop shadows can be cut in lesser images. If you use images to create a box with rounded corners, inner fade and outer glow you'll quickly end up with 8 extra non-semantic and non-structural elements simply to accommodate all the background images. In a px design, you'll only need three.

At least, that's the common way of thinking. Which isn't exactly accurate if you like to write css with flexibility in mind. Assuming a width is definite is always a dangerous thing. I still have to participate in the first project where the design didn't receive some small touch-ups halfway through the development phase. Including changes in general layout, fe widening or reducing the width of side bars.

And even if you leave out the possibility of mid-project design changes, there's always the chance that a component will need to be used in an unforeseen area of the site. It isn't the first time I have to include an extra alert message in some or other component. If your css isn't flexible enough to accommodate these changes, you haven't done a very good job.

So even though you could start constructing your design in px values again, there is still the need to make the design of components flexible enough. An em design inherently focuses on this flexibility, making it clearer to incorporate this flexibility into your css. A px design might appear more definite, but if you're aiming to do a good job, you'll end up with just as much unnecessary html wrappers and just as many images.

so there's no difference?

There is one major advantage that px designs have. The little css rule above defines a basic grid for all children of a certain parent. Since we are working with ems here, the actual size of the margin is dependent on the font-size of the children. While the rule gives the impression of ending up with an evenly spaced grid, the reality is that some of the children (often headings) will end up with a bigger margin because they have a larger font-size.

This is actually a pretty annoying problem (and my main reason for inserting a span element inside each heading I define). When applying a px design, you won't have this problem as the margin will be an absolute measure unrelated to the font-size of the child. The negative side is that when you size the font, the spacing between elements won't size accordingly, creating a somewhat muddled impression the more you size your font.

conclusion

While the need to avoid px for font-sizes is fading little by little, this doesn't mean you should simply switch back to the px design of the olden days. And when you do, make sure to remember that flexibility is a very strong asset in your work. Make sure that content can size horizontally and vertically without breaking the design, no matter whether you're implementing a px or em design.

As long as we'll have the need to use css background image to create certain graphical effects, the need for flexibility will stay and the difference between px and em design will remain rather futile.

The main thing to keep in mind is that whatever method you use and whatever design you are fed, designs are subject to change and implementations that are built to be resistant to such changes are of far more quality.