Specify a maximum width for em-based layouts

As someone who likes to bump up text size a notch or even two on many sites, I often notice that this behaviour is not something that web designers in general anticipate. However, layouts do tend to be a little bit more robust now than a few years ago, at least at a moderate increase in text size. That's good, though I think in many cases it is just a matter of luck that nothing gets obscured as text size is increased.

One technique that can easily make reading a site a lot more uncomfortable is using an elastic, or em-based, layout such as the one I use here (and talk about a bit more in detail in Fixed or fluid width? Elastic!) without specifying a maximum width in another unit. I've come across a few of those recently, which could perhaps be explained by the fact that the preset fixed width layouts created by YUI Grids CSS are of this kind.

Since the em unit is tied to the browser's text size, increasing that size will have consequences. Let's say you have specified that the total width of a layout is 60em. As text size is increased, so is the entire width of the layout. In the absence of a max-width CSS property that uses another unit, like pixels or percent, that will rather quickly lead to horizontal scrolling - and plenty of it - unless you're browsing with a very wide window on a very wide screen.

And how is that a problem? Well, if you need larger text, you're likely not going to appreciate that in order to get larger text you will have to put up with a lot of horizontal scrolling to find parts of the site. It doesn't make the site completely inaccessible or impossible to use, but it does make things harder for anyone who likes larger text and does not use a very wide browser window. Alastair Campbell talks more about the issues this can cause (and why "elastic" may not be the ideal name for em-based layouts) in Elastic layout - wrong term?.

So just a heads-up: when creating an em-based layout, consider using max-width instead of width. As for IE 6, which does not understand max-width, I tend to either use a dynamic property to give it a maximum width in pixels or just give it a fixed width (again, in pixels). I think both options are better than setting a fixed width in ems since they are less likely to cause massive horizontal scrolling at large text sizes.

Posted on March 3, 2008 in Accessibility, CSS, Usability