Pixels vs. Ems – my proverbial 2 cents

Friday, June 19th, 2009

A wise man once said: “A moving target is not so easy to hit”.
At least, I think that’s what he said. He was running past me rather quickly at the time.

As a conscientious web developer, I aim to create clean & accessible code, using currently accepted best practices. Unfortunately no-one can seem to agree on what those best practices might be and in any case they keep changing, so it’s difficult to keep up.

In the 90’s
We all made websites using tables. They allowed for absolute positioning of elements and enabled us to create beautiful websites that looked exactly like the Photoshop mock ups we’d lovingly crafted. The world rejoiced and everything was fine for a while, until someone told us this was completely wrong.

Then came CSS…
Having been informed that actually, we should be separating style from content for a myriad of very good reasons, we all set about forgetting everything we knew about creating websites and started again from scratch.

But it didn’t stop there
Gradually, we came to understand that there are various ‘right’ and ‘wrong’ ways to build sites even if we’re using CSS to style our content. Phrases such as ‘Semantic Markup’ and ‘Progressive Enhancement’ began to emerge and simultaneously excite and terrify.

Accessibility
Of course, there’s a genuine reason for all this mucking about behind the scenes – making our content accessible to the widest possible audience, on any device, under any condition. To that end, we were told that we should be using relative units for our text sizes, (and if the design calls for it, our layout as well) allowing users to zoom in and out at will. Helpful for those with high resolutions, with visual impairments, with small screens. Whatever.

A return to the Old Skool
Lately however, browser manufacturers have taken it upon themselves to create page zooming functionality that zooms the entire page, regardless of whether relative units have been used.

No sooner have we all got our heads around calculating Ems, and everyone’s talking about going back to pixels… because it’s easier.
Apparently we were only using Ems in the first place, to take advantage of the text zooming functionality of browsers.

I disagree, for a number of reasons
Ems are relative to the default font size of the browser. This is usually 16 pixels, but many people with visual impairments will have this default set higher. Possibly, they’ll have set the font size at the operating system level. Some people using high resolutions on small screens will have changed this setting also. I attended Jon Tan’s talk on typography a few months back and a member of the audience recounted his experience of using a laptop with the font size increased at the OS level. He was unable to click a button on a high profile website, because at his text size, the button was hidden underneath another element. Clearly if we disregard the possibility of text being resized, if we assume we have total control over the size of text in our layouts, we’ll come unstuck pretty quickly.

In any case, not everyone is a fan of the new style page zooming. Personally I find that many layouts break fairly quickly using page-zoom, and even if they don’t, it’s very quick to display the dreaded horizontal scroll bar. In Firefox, I’ve set my zooming to ‘text only’. I can’t be the only one, or the option wouldn’t be there.

Above all though, I won’t be changing back to pixel font sizes because Ems are better suited to the job. Pixel sizing may be easier, but a correctly executed complex Em layout gives me a zen-like feeling of satisfaction. I just like being a web-ninja.

Tags: best practice, css, Rants, website

Filed under: General, Website Development.