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 [...]

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.

This entry was written by adam, posted on 14 Feb 2007 at 10:30, filed under blogging, design and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. avatar
    adam
    Posted 14 Feb 2007 at 11:16 |
    Permalink Quote

    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. avatar
    Scott
    Posted 14 Feb 2007 at 12:04 |
    Permalink Quote

    Long live the em!

  3. avatar
    adam
    Posted 14 Feb 2007 at 12:10 |
    Permalink Quote

    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.

  4. avatar
    Scott
    Posted 14 Feb 2007 at 1:43 |
    Permalink Quote

    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.

Post a Comment

Your email is never published nor shared. Comments that do not follow the guidelines may be removed. By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution. Required fields are marked *
↓ Preview