Em Typography

Chris Messina links to this somewhat handy Em Calculator. It claims to make it easier to do pixel-perfect design without compromising accessibility. My understanding was that this is kind of innacurate. most browsers don’t render more than two decimal places worth of Em. Since I prefer to set the default at 10px (it makes the math easy), that means setting my em’s to \frac{5}{8} (0.625) which most browser will truncate to 0.63. I’ve always (since reading it in Matthew Stephens‘ hilariously commented CSS) used the 76% method in my body, from sane CSS typography, and then used em’s to style the remaining elements.


4 thoughts on “Em Typography

  1. adam Post author

    posting really special characters like ⅝ is really a pain when the rich text editor double encodes your ampersands.
    UPDATE: it’s easier now with latex: \frac{5}{8}

  2. adam Post author

    hear hear!

    sizing in px is really bad. i was just looking at spartan, and saw that you’re using % on the body there as well.

  3. Scott

    If you set the body’s font size in a % and everything else—including layout widths, margins, padding, etc.— in ems, it becomes this perfectly elastic theme. It’s much fun.

Comments are closed.