I’ve been toying with the use of ems—a typographic space typically equivalent to the width of an upper-case letter M—to define the width of my columns for a while now. I’ve been doing this to create elastic designs wherein the body text is of a comfortable width. I’d like to think I’ve succeeded in some small way, though I’ll always have room for improvement.
The benefit of using an em as a unit of measurement is that an em is based on the width of text itself. As text size is altered by stylesheets, by scripting, or by user agent controls the number of characters in any given line doesn’t change. By contrast, percentages are based on the width of the parent and pixels are static and unchangeable. A change in text or window size in which the containing element has been set in percentages or pixels will cause the text to shift. This may create a paragraph that is uncomfortable on the eye as it is too wide or too thin. Without also altering line height the overall appearance of the text might be lessened. To illustrate the advantage of setting column widths with ems I whipped up this quick little example page
Without knowing it I had been working towards a typesetting standard that has been used with success for centuries: the grid. To be fair, my use of the em has no particular connection to the grid. I could have just as easily been working with pixel measures and arrived at this point. Because my primary concern was a comfortable reading width I found it quite reasonable to consider the rest of the page equally.
Grid systems for the web
Two excellent slideshows from South By Southwest Interactive 2007 have been posted to the web. In Web Typography Sucks Richard Rutter and Mark Boulton describe the dismal state of online typography and what can be done about it. It includes a section on grids. In Grids Are Good Khoi Vinh constructs a fake web portal on a grid. Both presentations demonstrate how much more pleasant your content can be when applied to classic rules of layout and style.
Inspired, I whipped up a few simple background images that you can use to put your own sites on grids. In the archive you’ll find a number of small images designed to be tiled as background images. It has columns from 3 em to 6 em (with 0.5 em gutters) for text size equivalent to 12 px. It also has line height guides for most of the common heights. Set them as the background image on a containing element to help fine tune your grids.
Download: gridtools.v1.00.zip
These were developed specifically for a project I’ve been working on for the past few weeks and may or may not be of use to you. Try them out, see if they help you, and drop me a line if you have any comments or complaints.
