working out em's..

Ems are easy, target divided by context.

Target is the target size for the font you're sizing. Let's say for this example we want 18px.

Context is the target size you're converting FROM. This means wherever in the CSS cascade that your current font is sized from is the measure you want to use. Let's say in this case, we're defining a base size and have not defined any font-sizing anywhere, which means we'll be using the default of 16px.

Now the base is simple, it's target (18px) divided by context (16px). So we might write something like

body { font-size: 1.125em; /* 18px/16px */ }

Now let's say we want to define an H1 as a 24px target. Remember, you now have cascade to consider so our context is now 18px.

h1 { font-size: 1.333333333em; /* 24px/18px */ }

This complexity, BTW, is one good reason to use rem instead of em if you don't need to support an non-rem supporting browser. http://snook.ca/archives/html_and_css/font-size-with-rem Instead of having to reconsider your context constantly, you can just define a root size and use that for all ems calculations.

But that's all there is to it, it's a simple division problem, you just need to be clear about your target and context numbers.