I went to the Edward Tufte talk on Tuesday with a bunch of people, including Michael Chu. Michael showed his Cooking for Engineers Tiramisu recipe card design to Tufte during office hours, and then he showed it to us at lunch. We talked a bit about how to redesign it. The design must be done with just standard HTML and CSS — no images.

Here’s my version, and my motivations:

• Verdana is the default font. Michael points out that Gill Sans is not available on Windows, but (I think) Verdana is. Verdana is heavily influenced if not directly based on Gill Sans but was designed for on-screen display. It looks better than Gill Sans does on-screen, and better than Helvetica/Arial. (interesting trivia: Apple’s system font was commisioned by Microsoft — yet only Apple has the sense to use this excellent screen font as the default font in their OS.) Edit: I was wrong: OSX’s system font is Lucida Grande.
• I removed all of the grid lines in favor of very light grey boxes. Solid tinted boxes are less intrusive than grid or row lines, and they still let the eye pick out vertical and horizontal alignment. If the tint is light enough, it won’t activate the white space where corners come together. Grey is also less intrusive than solid colors, even very faint colors. If the site had a non-white background, two variations of the background color at slightly different luminosities would work too. (The grey is actually very faintly tinted blue — that’s because using the exact same value for red, green and blue looks slightly brown at high luminosities.)
• I rearranged the vertical order of the ingredients so that it could double as the ordering of layers in the actual dish. The design on the business card has a separate layering chart at the bottom (like this one).
• I put the name of the ingredient first, and the units afterwards. The units are also set in a smaller font and grey instead of black. About half the time it’s instantaneously clear that I have enough of an ingredient without having to think about the exact amount. “Do I have sugar? Yep, my sugar jar is completely full.” Whether I need ½ cup or 4 cups, I know I’ve got enough. And when I’m walking around the supermarket with the recipe, I don’t care too much about the units either; Unless you need a huge amount, the options are usually buying too much, or buying way too much.
  
• I only show one measurement system at a time. I’ve only needed metric units once; when I was in Denmark cooking brownies for my cousins, and I needed everything in metric. (Can you believe they don’t have brownies in Denmark?) The units don’t change in Safari, because Safari 2 doesn’t support the disabled attribute on style tags yet. (I don’t know about Safari 3.) A real implementation could work around Safari’s shortcomings. It would also probably remember the user’s units preference site-wide, and each page would load with those units pre-selected.
• It uses ems instead of pixels, so it looks right at different font sizes (try it).

Here’s Michael’s post with his redesign ideas, and check the comments for ideas from his readers.