Handy Em Chart for Web Designers

February 27, 2009 - 2:00am ||| 0 Comments | Add new

Professional web designers do a lot of translating. Not language translating, but translating a "look and feel" Photoshop, Illustrator or InDesign web page design into something a web browser would understand.

So they do a lot of measuring with pixel rulers — how many pixels wide is this sidebar? how many pixels between the bottom of the headline and the top of the body copy? and so on — and then include those measures in the CSS, the style sheets that do the web page formatting.

The problem is that if you specify actual pixel measures for text attributes in CSS, you end up with a fragile design, one that's easily broken by any user who makes the text larger or smaller by pressing Command/Ctrl-plus or minus. (Try it yourself on a few web pages.)

The solution, as most CSS 101 courses teach, is to use a variable spacing unit, the Em, instead of pixels. Ems are expressed in the CSS as a decimal amount: 1.5 Em, .25 Em, and so on. (In web design, a single Em — 1.0 Em — is the height of the text. If the text is 16 pixels., an Em is 16 pixels.)

Using Ems instead of absolute pixel measures for something like linespacing (leading, in print-ese) or padding makes the web page layout flexible. If a user increases the text size, the Em percentages increase proportionately.

The concept is explained in many fine books and tutorials, but I'm especially fond of the article that UK web designer Jon Tan posted a couple years ago on his blog:

The Incredible Em & Elastic Layouts
http://tr.im/elastic

Okay, so back to the translating. You're looking an Illustrator rendering of a home page design. The designer spaced out the body text (14 pts) paragraphs by 22 pts (space above = 22 points), a little more air than the default of a single empty line. To translate that to an elastic CSS layout, you have to figure out how much 22 pts is in relation to 14 pts, in Ems. It's one-point-something.

So you can either haul out the calculator, or you can use an incredibly useful Em chart created by web developer/designer Andy Ford of Aloe Studios and Blue River Interactive Group.

You can view the EmChart demo here:
http://aloestudios.com/tools/emchart/

Or read the explanation and download the chart here:
http://aloestudios.com/code/emchart/

Hope this helps save some brain cells out there!

  

  

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.