The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Ems, Percent, Pixels, Points

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #31568

    I am sure this has been discussed before, but I was just wondering, what is the best unit of measurement (ems, percent, pixels, points) for fonts when it comes to cross-compatibility with other browsers? Is it purely an aesthetic choice? Or is there an actual reason behind why we have four ways to measure a font. I found a nifty conversion chart, but I was wondering which one is the best to use. Thanks in advance!


    We touched upon this at the New Adventures in Web Design conference last month.

    I believe that ems and percent are relative font sizes, whereas pixels and points are absolute.

    The general consensus is you should be leaning more towards responsive web design and that ems is probably the best way to go


    Thank you for your advice. Responsive web design is definitely the way to go.


    The em is originally the width of the lowercase letter m in any given font. The en is similar the width of the letter n. However, this is not the case in css, where an em is the same as the font size given in pixels.

    The default size in most browsers is 16 px. But if you change the font size on the html or body element it will change the way that em works all over the site. So the em is indeed a relative measure.

    The argument for using em’s is that users easily can scale the size on your website (using the zoom functionality of the browser) without screwing up the layout. When you zoom in the browser would just adjust the font-size on your html-tag and thus increasing the size of all elements on your website accordingly – using the correct scaling given by the em values on the elements.

    However, from quick testing i have not been able to see any difference in the scaling from a layout using exclusively pixels and a layout using pixels as fontsize on the html element and ems everywhere else.

    So I cannot help thinking if this advantage of using em’s is only theoretical or if there are some browsers which screw up the scaling. I was only testing it in a few modern browsers.



    I think ems is better for mobile/tablet browsing


    @TT_Mark Agreed. I’ve developed for not-smart phones before and I used “small”, “medium”, “large” font-sizes as well as percentages. This worked perfectly.


    I was wondering the same thing. Px vs. Ems. And the reset of the body element. I would preferably use px instead of ems. Are there any other negative aspects of using px instead of ems, except the old IE6 text-sizing?

    Is there a “rule” for default body size in px in the css, when most browsers have a default of 16px? Like the resetting of percentage in 62,5% and 100% for relative measure? I mean, should you define a value like 16px, or none at all.

    How does px scaling behaves on hand held media like iPhone/iPad etc.


    When designing for smartphones I have found percentages to be a no-go. When you use ems or px it will scale as you expect, but %’s will mess it up.

    My personal experience is that it is not that important whatever you use, as long as you are consistent. If you use px’s for something and em’s for other stuff, you can end up with designs that act weirdly especially on smartphones and tablets.

    If you think that it is unpleasent to use ems with the default 16px size, you could define your basic font size as something else – e.g. 10px on the body. That would make 1em = 10px and would be less of a change.

    Personally, I think that 16px is a neat number, as it is easily divisible with almost any number.

    A little thing that can be confusing with ems is that it uses the font-size on the element you are styling, and not the same value all over the document. Take a look at this example:

    body { font-size: 16px; }
    p { border: 0.5em solid #000; }
    h1 { font-size: 2em; border: 0.5em solid #000; }

    At normal zoom, the border around the p tags would be 8px where the border around h1 tags would be 16px. To achieve the same thickness on the borders, the width on the h1 border should be divided by two, making it 0.25em.

    Personally, I’m using em’s for everything, besides the font-size: 16px on the body element – which I have made a part of my css reset. Even though the advantage with em seems to be only theoretical in some cases, I like to work with it this way.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Other’ is closed to new topics and replies.