Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad.
Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). You can check the actual font-size in pixels using Firebug by checking “Show Computed Style” in the Options menu in the upper right corner of the CSS/Style panel while viewing in HTML mode.
You’ve checked the design comp and measured exactly 9 pixels of bottom margin under the H3 until the next element. Of course you can set the bottom-margin of the H3 to 9 pixels and move on. But that won’t scale when a user bumps up their text size in their browser and your vertical rhythm will crumble as the H3 grows in size but keeps the same 9 pixels of bottom margin.
The formula for computing the EM multiplier is:
desired pixel size / current pixel size = multiplier
So for the H3 example: 9/24 = .375
I use the EmChart all the time when converting design comps to HTML/CSS templates – which is basically all day every day. I find it very useful for calculating bottom margins, line-heights (which are unitless, but the formula still applies), top margins, and top/bottom padding among other things. It’s also really handy for keeping nested relative font-sizes straight.
As I mentioned, it doesn’t matter how your current font-size is set. So this will work for you regardless of what font-size or unit is (or isn’t) set on the HTML element, BODY element, or any other element. You just need to know the effective pixel size of the current element you’re working with.