[CSS] Px to Em based on Context

gistfile1

target ÷ context = result
If we assume the body’s default type size to be 16px, we can plug each desired font-size value into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px):

24 ÷ 16 = 1.5
So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.

h1 {
    font-family: Georgia, serif;
    font-size: 1.5em;        /* 24px / 16px = 1.5em */
}