Pixel to Em conversion...

Discussion in 'HTML' started by Maxx Pollare, May 30, 2007.

  1. Maxx Pollare

    Maxx Pollare Guest

    I'm in the process of creating some new CSS for my site (same as email)
    and wanted to try something other then pixles for everything...

    Unfortunately I couldn't get Google to give me a simple page that gives
    me a relationship between Em and Pixels, as in "What the hell is an Em,
    and how big is it in pixels?". So far I've scraped the experimental CSS
    layouts twice because I can't things to work right with Em...

    I am still learning all this CSS stuff, and for now most of my HTML is
    either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
    PHP next, once I've pick up some good books on it, and after I'm
    finishing this HTML 4.01/CSS 2.1 stuff...

    Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
    a junker box... Which will probally be never...

    --
    Maxx Pollare, only a "small god" within this minds eye...
     
    Maxx Pollare, May 30, 2007
    #1
    1. Advertising

  2. Maxx Pollare

    Chaddy2222 Guest

    On May 30, 12:49 pm, Maxx Pollare <> wrote:
    > I'm in the process of creating some new CSS for my site (same as email)
    > and wanted to try something other then pixles for everything...
    >
    > Unfortunately I couldn't get Google to give me a simple page that gives
    > me a relationship between Em and Pixels, as in "What the hell is an Em,
    > and how big is it in pixels?". So far I've scraped the experimental CSS
    > layouts twice because I can't things to work right with Em...
    >
    > I am still learning all this CSS stuff, and for now most of my HTML is
    > either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
    > PHP next, once I've pick up some good books on it, and after I'm
    > finishing this HTML 4.01/CSS 2.1 stuff...
    >
    > Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
    > a junker box... Which will probally be never...
    >

    1em is equivalent to 100%. I hope that helps a bit. Working with CSS
    is a different mind set to udeing the old tables for layout, although
    tables are easier for some things, mainly laying out for and other
    items that you need in a grid type structure.
    Use "%" if it's easier to work with.
    --
    Regards Chad. http://freewebdesign.awardspace.biz
     
    Chaddy2222, May 30, 2007
    #2
    1. Advertising

  3. On May 30, 3:49 am, Maxx Pollare <> wrote:
    > I'm in the process of creating some new CSS for my site (same as email)
    > and wanted to try something other then pixles for everything...
    >
    > Unfortunately I couldn't get Google to give me a simple page that gives
    > me a relationship between Em and Pixels, as in "What the hell is an Em,
    > and how big is it in pixels?". So far I've scraped the experimental CSS
    > layouts twice because I can't things to work right with Em...


    An em is the font height (or the font height of the parent element
    when you are specifying the font-size).

    Since this eventually means you are describing something as a ratio of
    the font size of the parent element of html, this means that you are
    describing things as a ratio of whatever font size the user as
    selected as their preference.

    Since you don't know what the user's preference is, you can't convert
    from pixels to ems or the other way. If you could, then there would be
    no point in using ems instead of pixels.

    Just keep your body text (i.e. the main text) at 100% (trusting that
    the user has their preference set to something comfortable to read
    (and the browser defaults before changing are good for most people -
    vendors have done a fair bit of usability testing) and adjust up and
    down for headings, small print and similar.

    --
    David Dorward
    http://dorward.me.uk/
    http://blog.dorward.me.uk/
     
    David Dorward, May 30, 2007
    #3
  4. Maxx Pollare

    Jim Moe Guest

    Maxx Pollare wrote:
    >
    > Unfortunately I couldn't get Google to give me a simple page that gives
    > me a relationship between Em and Pixels, as in "What the hell is an Em,
    > and how big is it in pixels?". So far I've scraped the experimental CSS
    > layouts twice because I can't things to work right with Em...
    >

    The default setting for browsers is 1 em = 16 pixels. The user has the
    option to change that value to suit their preference.
    Normally you would set font-size:100% for <body> and adjust the other
    font sizes from there using per-cents or ems. There is really no need to
    know the actual pixel setting for an em, it's all relative to the user's
    preferred font size.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, May 30, 2007
    #4
  5. Maxx Pollare

    Ben C Guest

    On 2007-05-30, David Dorward <> wrote:
    > On May 30, 3:49 am, Maxx Pollare <> wrote:
    >> I'm in the process of creating some new CSS for my site (same as email)
    >> and wanted to try something other then pixles for everything...
    >>
    >> Unfortunately I couldn't get Google to give me a simple page that gives
    >> me a relationship between Em and Pixels, as in "What the hell is an Em,
    >> and how big is it in pixels?". So far I've scraped the experimental CSS
    >> layouts twice because I can't things to work right with Em...

    >
    > An em is the font height (or the font height of the parent element
    > when you are specifying the font-size).


    Technically it's a measure of width (of an 'M') rather than of height.
    An ex is supposed to be a measure of height (of an 'x'), but most
    browsers don't bother to get exes exactly right.
     
    Ben C, May 30, 2007
    #5
  6. Maxx Pollare

    Neredbojias Guest

    On Wed, 30 May 2007 02:49:40 GMT Maxx Pollare scribed:

    > I'm in the process of creating some new CSS for my site (same as email)
    > and wanted to try something other then pixles for everything...
    >
    > Unfortunately I couldn't get Google to give me a simple page that gives
    > me a relationship between Em and Pixels, as in "What the hell is an Em,
    > and how big is it in pixels?". So far I've scraped the experimental CSS
    > layouts twice because I can't things to work right with Em...
    >
    > I am still learning all this CSS stuff


    1 em is the current local font size. There is no consistent relationship
    to pixels.

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, May 30, 2007
    #6
  7. Scripsit Ben C:

    >> An em is the font height (or the font height of the parent element
    >> when you are specifying the font-size).

    >
    > Technically it's a measure of width (of an 'M') rather than of height.


    No it isn't. This disinformation used to be regularly presented and refuted
    in various newsgroups, but recently it has been more quiet. Anyway, if in
    doubt,
    a) check the CSS specifications
    b) make a simple test:
    <div style="width:1em; height:1em; line-height:1; background:yellow:
    color:black;font-size:300%">M</div>
    and see if the width of M equals the width of the em square. To save your
    time: it doesn't, except perhaps in some very fancy font - for most fonts,
    it's considerably narrower.

    > An ex is supposed to be a measure of height (of an 'x'), but most
    > browsers don't bother to get exes exactly right.


    Most browsers implement ex as 0.5em, which is exactly wrong for almost any
    font - though perhaps a rough _average_ over fonts. Firefox 2 gets ex right.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 30, 2007
    #7
  8. Ben C wrote:

    > Technically it's a measure of width (of an 'M') rather than of height.


    In traditional typography, yes. But the modern definition of an 'em' is
    that an em is the same as the font height.

    The font height itself is quite a wishy-washy concept, but it can normally
    be thought of as the height of most capital letters and lower-case letters
    with ascenders (e.g. 'b', 'd', 'f', etc.). However, in certain fonts, some
    of these letters may be smaller or taller than the font-height.

    The CSS spec says that browsers are supposed to use the 1 em = font height
    definition. So when using, say, a 13 px font, 1 em is supposed to be 13 px,
    and doesn't depend at all on the width of the capital M, which could be
    slightly larger or smaller than 13 px. The font may not even *have* a
    capital letter M -- it may only have, say, Japanese Katakana characters
    and no Western characters at all!

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 95 days, 17:14.]

    Non-Intuitive Surnames
    http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
     
    Toby A Inkster, May 30, 2007
    #8
  9. Maxx Pollare

    Andy Dingley Guest

    On 30 May, 03:49, Maxx Pollare <> wrote:

    > "What the hell is an Em, and how big is it in pixels?".


    There's no such relationship, and to even think that there is is a
    major error in CSS design. Read the groups' archives, as this gets
    discussed to death.

    To convert from pixels to ems, then converting 12pixels to 1em won't
    go far wrong.

    1em is 100%, so you can use percentages if you prefer.

    Then after you've done that, normalise all em settings so that nothing
    is less than than 0.75em. Possibly unreadable legal boilerplate might
    go to 0.67em, but that's hard to read and anything less is impossible.

    Then go through and delete (nearly) all the em settings anyway. It's
    just not necessary in competent web design to set this explicitly
    (thinking it's appropriate to do is again a major error, as it betrays
    that you don't realise how little the author controls and how much the
    reader controls).

    If you set
    body { font-size:1em; font-size:100%; }
    then that's enough for nearly all web pages. <h*> will be bigger, but
    the default style sheet will probably take care of that adequately
    anyway. Semantic HTML markup (marking up your "headings" with <h*>
    elements) will take care of most needs to set bigger sizes.

    It's extremely rare to need to set a font-size > 2em, for anything.
    Thinking this is a good idea is usually an indication of simple poor,
    garish "eBay style" design.

    If you still think you need to set em sizes all over the place, then
    post again with example pages for where and why you think it's needed.
     
    Andy Dingley, May 30, 2007
    #9
  10. Andy Dingley wrote:

    > Then after you've done that, normalise all em settings so that nothing
    > is less than than 0.75em. Possibly unreadable legal boilerplate might
    > go to 0.67em, but that's hard to read and anything less is impossible.


    I often drop superscripts down to .67em as they can otherwise disturb line
    spacing. In my own writing, superscripts are nearly always footnotes, so
    the readability of the textual content is not completely vital, as long as
    the link can be followed.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 95 days, 17:51.]

    Non-Intuitive Surnames
    http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
     
    Toby A Inkster, May 30, 2007
    #10
  11. Maxx Pollare

    Ben C Guest

    On 2007-05-30, Toby A Inkster <> wrote:
    > Ben C wrote:
    >
    >> Technically it's a measure of width (of an 'M') rather than of height.

    >
    > In traditional typography, yes. But the modern definition of an 'em' is
    > that an em is the same as the font height.


    Thanks, I didn't know that.

    > The font height itself is quite a wishy-washy concept, but it can normally
    > be thought of as the height of most capital letters and lower-case letters
    > with ascenders (e.g. 'b', 'd', 'f', etc.). However, in certain fonts, some
    > of these letters may be smaller or taller than the font-height.
    >
    > The CSS spec says that browsers are supposed to use the 1 em = font height
    > definition.


    Do you know where it says that? I have in 4.3.2 of CSS 2.1 "em: the
    'font-size' of the relevant font". 'font-size' is hyperlinked to 15.7,
    which says, "The font size corresponds to the em square, a concept used
    in typography."

    But you said that in traditional typography, em did mean width of 'M'.
    So I am confused. In any case it says "em square" which implies no
    distinction between width and height. Are Ms always square?
     
    Ben C, May 30, 2007
    #11
  12. Ben C wrote:

    > Do you know where it says that? I have in 4.3.2 of CSS 2.1 "em: the
    > 'font-size' of the relevant font".


    Consider:

    div {
    font-size: 12px;
    width: 10em;
    /* width is 120 px */
    }

    In practice "font size" and "font height" are synonyms.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 95 days, 18:28.]

    Non-Intuitive Surnames
    http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
     
    Toby A Inkster, May 30, 2007
    #12
  13. Scripsit Toby A Inkster:

    > Ben C wrote:
    >
    >> Technically it's a measure of width (of an 'M') rather than of
    >> height.

    >
    > In traditional typography, yes.


    No, the em unit was originally related to the square in which inscription
    letters were designed, so it related both to the width and to the height of
    "M", but the connection was lost almost two thousand years ago.

    > The font height itself is quite a wishy-washy concept,


    Rather, it is redundant. It is meant to help people to get a rough idea:

    > but it can
    > normally be thought of as the height of most capital letters and
    > lower-case letters with ascenders (e.g. 'b', 'd', 'f', etc.).


    No, their height is considerably smaller than the font size ("font height").
    Try it. Use a 1em by 1em element with a border, with line-height: 1, with a
    single character inside it, and see how much space there is both above and
    below any of those characters.

    If you take the distance from the lowest descender up to the highest
    ascender, you get close. Few characters have both a descender and an
    ascender; lowercase ("small") thorn is one of the few exceptions. But you
    really need a diacritic on it, too, e.g. &thorn;́ (thorn with acute,
    not used in any human language) to get a character that occupies the full
    height of the font - roughly speaking.

    In fact, ascenders, descenders, and diacritic marks may extend a bit past
    the limits set by the "font height".

    The font size, or "font height", is really a typographic design concept, as
    the CSS specifications tell us. When a typographer starts designing a font,
    he uses an em square as a tool, designing characters so that they
    comfortably fit into it, and some font designs use a larger part of the
    square than others, and use it differently. Any normal character is expected
    to remain within the em square boundaries, or at most touch them or cross
    them just a little.

    In a sense, the em square is the drawing board of a font designer. How he
    uses it is up to him

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 30, 2007
    #13
  14. Maxx Pollare

    Bergamot Guest

    Ben C wrote:
    > On 2007-05-30, David Dorward <> wrote:
    >>
    >> An em is the font height

    >
    > Technically it's a measure of width (of an 'M')


    Alas, if only that were true. There currently isn't any CSS unit that
    corresponds to character width. :(

    --
    Berg
     
    Bergamot, May 30, 2007
    #14
  15. Maxx Pollare

    Bergamot Guest

    Andy Dingley wrote:
    >
    > body { font-size:1em; font-size:100%; }


    You don't really mean to suggest setting both, do you?

    font-size:100% is a better choice because it prevents some bizarre
    scaling issues IE has with em units.

    --
    Berg
     
    Bergamot, May 30, 2007
    #15
  16. Scripsit Bergamot:

    > Andy Dingley wrote:
    >>
    >> body { font-size:1em; font-size:100%; }

    >
    > You don't really mean to suggest setting both, do you?


    Andy's code sets font-size to 100% (of parent element's font size). The
    first declaration is ignored, since here we have two settings for a property
    of an element, all other things being equal except their order, so that the
    latter wins.

    Don't ask me why Andy included the declaration that will always be ignored.

    > font-size:100% is a better choice because it prevents some bizarre
    > scaling issues IE has with em units.


    And even that setting isn't needed except for dealing with some browser
    bugs. After all, by default the <body> element inherits the font size of
    <html>, so there's little point in setting <body> font size to 100% of
    <html> font size - except as a workaround to some bugs.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 30, 2007
    #16
  17. Maxx Pollare

    rf Guest

    "Jim Moe" <> wrote in message
    news:...
    > Maxx Pollare wrote:


    > The default setting for browsers is 1 em = 16 pixels.


    Rubbish.

    --
    Richard.
     
    rf, May 30, 2007
    #17
  18. Maxx Pollare

    Andy Dingley Guest

    On 30 May, 13:50, Bergamot <> wrote:
    > Andy Dingley wrote:
    >
    > > body { font-size:1em; font-size:100%; }

    >
    > You don't really mean to suggest setting both, do you?


    Of course.

    In practice I usually boilerplate a referenced explanation of why
    they're both in there, citing the IE bug.

    Some of you have the luxury of writing HTML pages that stay with the
    same content _you_ put into them. I unfortunately don't (a bad local
    infestation of code pixies).
     
    Andy Dingley, May 30, 2007
    #18
  19. Maxx Pollare

    Bergamot Guest

    rf wrote:
    > "Jim Moe" <> wrote in message
    > news:...
    >> Maxx Pollare wrote:

    >
    >> The default setting for browsers is 1 em = 16 pixels.

    >
    > Rubbish.


    I think he just meant that the usual "factory setting" for default font
    size is 16px. That is true for mozilla-based browsers, but I can't say
    it's true for all browsers.

    --
    Berg
     
    Bergamot, May 30, 2007
    #19
  20. Jukka K. Korpela wrote:
    > Scripsit Ben C:
    >
    >>> An em is the font height (or the font height of the parent element
    >>> when you are specifying the font-size).

    >>
    >> Technically it's a measure of width (of an 'M') rather than of height.

    >
    > No it isn't. This disinformation used to be regularly presented and
    > refuted in various newsgroups, but recently it has been more quiet.
    > Anyway, if in doubt,
    > a) check the CSS specifications
    > b) make a simple test:
    > <div style="width:1em; height:1em; line-height:1; background:yellow:
    > color:black;font-size:300%">M</div>


    Jukka: this is true in it's application, but Ben was talking about it's
    'technical' origin. This is something different. Read a bit about
    typography (I am a typographer myself) and you will find out, that Ben
    was right. The 'em' unit goes back to the Romans using the width of the
    letter 'M' to refer to the size of their letters...
    Don't only look at how the 'em' unit is implemented in the CSS-specs,
    it's sometimes good to know the historical origin of things.

    hth
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, May 31, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sangeeta

    Pixel Width of Char in Web App

    Sangeeta, Aug 14, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    1,094
    Jerry III
    Aug 15, 2003
  2. Kirk Graves

    point to pixel conversion

    Kirk Graves, Mar 4, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    19,182
    Kirk Graves
    Mar 4, 2004
  3. =?Utf-8?B?cGJ1bQ==?=

    GDI+ - limits for pixel dimensions in a bitmap object

    =?Utf-8?B?cGJ1bQ==?=, Jun 18, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    359
    =?Utf-8?B?cGJ1bQ==?=
    Jun 18, 2004
  4. Psiman

    pixel width of a string in a label

    Psiman, Sep 22, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    501
    Psiman
    Sep 22, 2004
  5. André Wagner

    Fastest pixel by pixel operation

    André Wagner, Mar 17, 2008, in forum: Java
    Replies:
    12
    Views:
    1,051
    Larry A Barowski
    Mar 19, 2008
Loading...

Share This Page