In with the Em's and Percentages

For the past few projects I've thrown out all use of pixels and relied heavily on an em's and percentages for layout and font sizing. Why would someone take such drastic measures? Two simple reasons: usability and flexibility.

The current Domaki, circa Fall 2006, uses this practice which makes the liquid layout possible with ease. A non-liquid example would be the Ellington site which uses a container set in EM's with all inner layers set to percentages. When you increase the font size the layout scales appropriately, thus demonstrating good usability (or accessibility -- I think they are one in the same).

Have you ever stood back and wondered, "should this site be wider?" Well with one miniscule change it can. Simply alter the container layer and everything follows suite as long as your inner layers have all been assigned percentages. The biggest caveat to this is dealing with IE not behaving well with 100% in certain situations. I've gotten around this by trying not to be so pixel perfect and looking at things more loosely. Upon doing more and more complex column layouts I've come to love this method of styling.

It's time to see more liquid layouts or at least taking into consideration that the canvas we have is not fixed. Most of the software applications on our computer are liquid why not web sites?

Tip: Set the font-style property of the body tag to 62.5%. This makes 1em look like 10px, and so on.

Comments

Jeff Croft http://www.jeffcroft.com/

(Disclaimer: Nathan already knows everything I'm able to say, so I'm really saying it for posterity to anyone else that might read this.)

I've been doing this a good bit myself recently. I tend to prefer the EMs over percentages, though, because it seems I can maintain the pixel-precision and get the benefits of the "elastic" layout.

In one project at work, I've even sized all of the images in EMs, such that they also scale with the font size. I personally think this is really cool. The images do, of course, get pixelated as they get larger. I've combatted this by using a larger image than the default display size, such that you can make the font size at least one notch larger before images start getting pixely. Little more bandwidth, but I think it's worth it with the broadband penetration these days.

Also, I just want to say that the extra work to do this (and yes, it is extra work -- it's definitely a bit more of a challenge to achieve than your typical layout) shouldn't be necessary, in my opinion. IE7 and Opera already do page scaling instead of text scaling, and I personally think all browsers should do this. To me, it's a much better method than the typical text-only scaling of Firefox and Safari. In an ideal world, we'd be able to get this effect without having to jump through the hoops of using EMs or percentages for all our length units in CSS.

I still not real big on liquid layouts, mostly because of line length issues, but with IE7 supporting min-width and max-midth, hopefully this will become less of an issue.

Nathan Borror http://www.playgroundblues.com/

It is a little tricky, but having a ubiquitous stylesheet that holds a lot of redundant code helps a ton :)

Kyle Johnston

I tried out Yahoo's CSS library last week; they use the same approach. From a layout perspective, it makes it really easy to experiment with different widths. Just change the width of the wrapper (px, em, or %) and everything changes to fit. I'm torn about their grid approach... it really sped up development, but it also turned into quite a snarl of nested DIVs.

Back to the fonts, they have a nice little table that lists font sizes in px with its corresponding size as a percentage: http://developer.yahoo.com/yui/fonts/index.html

With a little thought behind most layouts, and some compromise with IE7, it's amazing what you can do on the Web.

Nathan Borror http://www.playgroundblues.com/

Thanks Mark -- hopefully you're reading more ;)

Nathan Borror