Thinking In Ems

Thinking In Ems

Well, I made it almost a month since the last design change. However, this redesign is a little more extensive.

The Little Stuff

First, I went to an all-Helvetica font scheme. My typography was all over the place on the last view versions, and I feel much more comfortable with choosing one font and sticking to it. Second, but related, I moved the title and navigation to their own bar under the opening graphic, and moved the quotes under the section heads to the right of the section heads.

The Grid

The next thing I needed to change was the vertical spacing. I chose 1.5 ems as my baseline height, and went with it. Everything now lies on a 1.5 em baseline grid. You can imagine (or maybe you know from experience) that this seems like it could be a pain. It is. What was my secret weapon? Rob Goodlotte's Syncotype . What it does is place a horizontal grid over the page you're viewing, at any size you'd like. 1em converts to 16px, so I was able to line everything up to a 24px horizontal grid. It's awesome.

The Em

The biggest change, which might not be all that visible at first, is that the entire site (except for a couple borders) is now in ems. The entire structure, the images, and of course the fonts, now resize with the text. The effect is that when you increase font size in your browser, the entire web site zooms. Try it out (cmd/apple + to increase size, cmd/apple - to lower size).

Seems like an easy concept; just divide all of your pixel values by 16, like I mentioned before, and you're set, right? Well, at first, yes. For the overall structure, that's all I had to do. The problems arise when you change the font size of an element. Whenever you change the font size of an element, like a paragraph or a heading, the rest of the attributes of that element are measured against the new font size, instead of the body font size. To get the margin or padding that you want, you have to divide the margin you'd like by the new font size, and that number is your new margin. Ideal margin / new font size = New margin.

I had my calculator program running the entire time.

Inspiration and guidance for this redesign came from Wilson Miner's Setting Type On The Web (on A List Apart ) and Richard Rutter's Compose to a Vertical Rhythm (on 24Ways ).

It's been a fun (and trying) experiment. Hopefully this version will last longer than a month before I'm fed up with it!

Comments (archived for posterity)

  • Nate Klaiber commented


    Looks great! The sources you mentioned were the main sources I used when I started moving to em based layouts. The best tool when doing all of this is the calculator, hands down. Getting a nice baseline helps give everything breathing room. I like the iterative changes you are making!

    So, September 11th is the next meetup, you driving back here to visit with us :) he.

  • Brad Dielman commented

    The new design rocks! Love how the entire site scales.

  • Eric Wiley commented


    I hit your site with “ctrl” “+” phasers set to full power. After ten direct hits I felt a shock wave, but your new framework contained the bulk of the explosion.

  • Mike Robinson commented

    Excellent work, scales perfectly :) I usually only use ems for fonts, but maybe I should look into a scalable layout for my next redesign.

  • Dan commented

    Guys -

    Thanks for the kind words. It was fun.

    @Nate - I wish I could! I’m actually going to be in town for a couple days, but not until the night of the 13th

    @Eric - I love that.

    @Mike - You should! It’s fun; just make sure you put Calculator on your toolbar.