Page zoom and CSS typography

With most browsers now using Page Zoom rather than just enlarging text is this the end of the road for em based typography?

Em based typography

Em based typography is a concept I discovered through Richard Rutter and his excellent article How to size text using ems and the 24 Ways article Compose to a Vertical Rythmn. I began to use em based typography in my CSS work and recognised that giving the eye a vertical hierarchy is as important as vertical grids.

I discovered that using ems to set up typography is more time consuming and more difficult to maintain. When a client asks to increase padding, you can end up having to revisit all of your typographic CSS rules and return to the calculator to run through numbers running to ten decimal places. But the effort is well worth it. I began to notice sites that used vertical rhythms and they all seemed more usable and intuative. Typesetting on the web is an underestimated craft and for me the results were worth the additional effort of using ems.

Zooming in

Fast forward a couple of years and browsers now use Zoom view as the default way of enlarging a site. It was Dave Shea's article that got me thinking about this. Dave notes that in all but Safari browsers now use zoom and not the older method of resizing the text. He notes that the responsibility for how a site appears is now in the hands of the browser and not the designer. One of the main reasons for using em based typography is to ensure that a vertical rhythm is not broken when the text is resized. The Zoom view removes that requirement as the browser enlarges the entire page rather than just the text.

The end of ems?

So will I be returning to using pixels to set up vertical spacing and rhythm. The answer is a resounding no!

My reasoning is that using ems for typography in my opinion helps designers to see the vertical rhythm of a page as a coherent whole. You can smash typography with the pickaxe of pixels but elements are then their own entities with no relationship to others. Ultimately my decision is with the user in mind. My opinion is that it is quicker for users to learn and consume layouts if there is a consistent vertical rhythm. The best way to achieve that is to use ems. So even though page zoom takes the technical aspect out of the equation I still consider from a usability perspective that vertical rhythm is extremely important.

Comments

Leon Paternoster Oct 11 2008

That’s good to see. Of course, using ems also respects the user’s settings (even if most users don’t change them).

I find that using ems is actually pretty hassle-free; especially when setting up a grid. Also, the same fractions keep appearing, so you get to know them without having to reach for the calculator (e.g. 1.5/0.875 = 1.714).

And you only need 3 decimal places ;)

webhosting Oct 20 2008

Very helpful

Jann Nov 16 2008

When I’ve tried using ‘ems’ I get a different [presentation] result in FF3….the text is extremely small in comparison to IE7 —??— Am I missing something or is that to be expected ??

On the projects that I do, the presentation between the different browsers has to be REALLY close to being the same. Just wondering how others are handling this—??—

Jann