The EmChart

February 8th, 2009

categories
code collection, css
tags
, , , , , , ,

Converting pixels to EMs is a pain so I created the EmChart pixels to EMs lookup table. I’ve been using it for months and have been relying on it quite heavily, but am finally getting around to posting it here.

EmChart screen shot

I’ve added a new ‘Code‘ section to this site where I’ll be posting more things like the EmChart. I’ve got some 2008 housekeeping to do which will include posting more in the Code section.

Check out the EmChart page.

Comments, Quips & Protestations

  1. 1 February 9, 2009 6:59 pm Jason Reed

    So… here’s a comment. There- are you happy now?

  2. 2 February 10, 2009 1:10 pm Piotr Lewandowski

    You can also use Em Calculator: http://riddle.pl/emcalc/ (not my app)

  3. 3 February 10, 2009 1:35 pm Andy Ford

    Yes, you can. But you could do that on any ordinary calculator. I created a look-up table to avoid constantly punching numbers into a calculator.

  4. 4 February 10, 2009 4:38 pm Daniel Howard

    Is this so you can specify the space between the lines? Is that worthwhile? It always seemed a bit psychotic to me but I’m more engineer than graphic designer.

    Anyway, five cheers for web design that does not break when I turn the font size up!

    Cheers,
    -danny

  5. 5 February 10, 2009 6:55 pm Andy Ford

    @Daniel Howard
    I believe you are talking about leading known in CSS as the ‘line-height’ property. Yes, you can use the EmChart for calculating line-height values. The line-height property does not require a value (EM, px, etc.) as it is inherently relative to the value of the ‘font-size’ property.

    For example, the comments on my blog are (under most default conditions) 13 pixels with an effective pixel line-height of 18 pixels. To arrive at 18 pixels, I set the line-height property is set to a value of ’1.385em’ (although the ‘em’ unit is not necessary) because 18/13 = 1.385

  6. Pingback: Wie rechne ich Pixel in em um? » Guru 2.0

  7. 6 March 9, 2009 3:12 pm Thomas Scholz

    Note that downsizing may collide with the user’s minimum font-size – resulting in higher real values than you see in the table.

  8. 7 December 15, 2009 3:09 am Don

    Hi,
    have you read:
    http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/
    … you must have as I can see on your Blog :)
    I still have to figure out the composition of line-heigt to font-size and margin to keep the vertical rythm fluid.
    So for exampl.: if u got a basic line-height of 1.5 (lets say 12px) and have a font-size of 3em (for heading) you need
    the formular: base-line-height/font-size = new line height.
    expl. 1.5em/3 = .5em for (heading) line-height.
    Is that correct?

Post a Comment

Your email address will not be published. Required fields are marked *

*