#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    31

    Why most sites use em than px in width, height, fonts, etc.


    I usually use px for my font size or dimensions of elements in my page, but I have been told by other developers and seen on most websites that they use em.

    The problem I have with em, is that I am more use to using px than em in general and that I do not make my sites, with liquid or flexibility in mind. If the user changes the browser view properties for text, my site looks out of whack if I did it in em.

    I heard that 1em = 16px. So its a pain having to calculate the values.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2007
    Posts
    141
    Rep Power
    13
    Originally Posted by rePete
    I usually use px for my font size or dimensions of elements in my page, but I have been told by other developers and seen on most websites that they use em.

    The problem I have with em, is that I am more use to using px than em in general and that I do not make my sites, with liquid or flexibility in mind. If the user changes the browser view properties for text, my site looks out of whack if I did it in em.

    I heard that 1em = 16px. So its a pain having to calculate the values.

    Good Question, looking forward to seeing how people answer this one. It always seems that the main people who use em are either "experts" or else idiots who want to sound like experts. It's generally the latter in my experience
  4. #3
  5. K-Mart-ian Legend
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Location
    United States
    Posts
    299
    Rep Power
    50
    It would make more sense to use em if you could get a higher resolution on dimensions, but as far as I know you still can't sub-divide a pixel on a web browser.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    128
    Rep Power
    0
    Use em, you can't really do much with px anymore...
  8. #5
  9. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Location
    Kostolac, Serbia
    Posts
    855
    Rep Power
    1391
    Originally Posted by rePete
    I heard that 1em = 16px. So its a pain having to calculate the values.
    1em is not equivalent to 16px nor it is equivalent to any other static value because em's are used to represent relative units bound to typographical parameters such as font size. I.e. if a div container is defined inside a document body with an CSS attribute containing a 2em value that very attribute is going to be twice as big as the one used for the body element.

    ems are generally a good thing because they allow CSS designers to create very adaptive templates. However not everyone can master them and in lot of cases using them would consume much more time than using simple units such as px, % leading to situations in which people usually avoid using ems.
    PHP Code:
    <?php
    abstract class Ignorance extends Stupidity implements Unavoidable 
         public static 
    $humiliation

         private function 
    __construct(){
            
    parent::__destruct();
         }; 

    ?>
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    52
    Rep Power
    4
    so for example if everything in your page was 12px, but you wanted all headings twice the size as regular text you could use 2em, and then when you changed the 12px to something else, the headings would still be twice as big and you wouldn't have to change them also? (if you still wanted them twice as big of coarse)
  12. #7
  13. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    13,959
    Rep Power
    9397
    It's easy to make pixel-perfect designs using px units, but it relies heavily upon the browser and sometimes the operating system. Thus all these browser-detection libraries and CSS hacks.
    They break if someone tries to resize the font in their browser, but the browser makers got smart and made their default resizing be a zoom instead. Which still has little quirks, especially with rounding, but it let the web designers get lazy.

    Relative units like % and ex/em are harder to make into a "perfect" site because people still have this mentality of making stuff appear exactly the same on every single freaking browser. Spoiler: it's a pain in the arse to do it, even with px units.
    Example: had a site that looked markedly different when viewed in Firefox and in IE. But you know what? It didn't matter because on each browser the site looked right. So what if the header was a few pixels lower in one place - everything else was adjusted in the same ways so it all appeared correct. Even did some overlay stuff and, except for actual bugs (farking box model) I didn't have to do anything special to get it to work everywhere.

    I use ex/em units myself. Am I a CSS guru? No. Do I need a pixel-perfect layout? Generally not. But it makes some things quite a bit easier. For example, 2ex is the height of a normal line. Want something spaced down two lines? 4ex. Want text indented by a couple characters? 2em.

    There are still times when I want pixels, though. Mostly when I'm dealing with purely visual stuff like borders and images.
    Last edited by requinix; September 19th, 2010 at 04:31 AM.
  14. #8
  15. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Location
    Kostolac, Serbia
    Posts
    855
    Rep Power
    1391
    Originally Posted by thegaffney
    so for example if everything in your page was 12px, but you wanted all headings twice the size as regular text you could use 2em, and then when you changed the 12px to something else, the headings would still be twice as big and you wouldn't have to change them also? (if you still wanted them twice as big of coarse)
    In general yes however you might want to remember that with ems it all about the font size, particularly the font size of the body element since it the "oldest parent" of the web page.
    PHP Code:
    <?php
    abstract class Ignorance extends Stupidity implements Unavoidable 
         public static 
    $humiliation

         private function 
    __construct(){
            
    parent::__destruct();
         }; 

    ?>
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    31
    The sites I build do not look great if you decide to increase text size on your browser, plus my images are exact dimensions.

    I can see where em would be great if your design is based on a liquid layout, but if it's designed to look specifically at the dimensions you designed it for, what use would em be?

    I really do not get the purpose of ems in fonts, because if the fonts do not look in size how it is meant to look originally, it looks unproportional in your whole layout.
  18. #10
  19. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    13,959
    Rep Power
    9397
    Originally Posted by rePete
    plus my images are exact dimensions.
    Images typically are :P

    Originally Posted by rePete
    I can see where em would be great if your design is based on a liquid layout, but if it's designed to look specifically at the dimensions you designed it for, what use would em be?
    And what use is a design with some certain dimensions if your visitors have something else?

    Originally Posted by rePete
    I really do not get the purpose of ems in fonts, because if the fonts do not look in size how it is meant to look originally, it looks unproportional in your whole layout.
    "originally", huh. And what exactly would that be? The browser, operating system, resolution, and font set you use yourself?

    If you make a design with a certain font in mind, and I don't have that, what will happen? Your assumptions about line/character width and height will be wrong. Your pixel-perfect layout will not work.
    What if I have Large Fonts? What if I have poor eyesight and I browse the Internet at 125% text zoom?


    What's a specific problem you have that you solve using pxes?
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    66
    Rep Power
    4
    I heard that 1em = 16px. So its a pain having to calculate the values.
    What I think you might have read was that the default size for medium text in all modern browsers is 16px.

    The thing I learned about ems is that it is all about what you end up declaring in your body or whatever element because ems size according to their ancestry and that's where the math can get difficult but the formula is child pixel divided by it's parent pixel = em. If you put a font size measurement deceleration whatever in a parent then the child would be divided by that parent to get your em measurement and this applies to the grandchildren too.

    If you wanted your math to be easy you could declare your body element like this :BODY {font-size:62.5%} That then makes your body medium text go from 16 px to 10 px and then your math would be a little more simple.

    LB
  22. #12
  23. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Aug 2005
    Location
    Bucharest ROMANIA
    Posts
    2,557
    Rep Power
    604
    As em are relative measurement units, sounds logical (and professionals do care about that) to be used only in case of fonts. So that in a document it would be more likely (and recommended) to use rather px instead of em (except, as I said, the fonts)
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Sunny England
    Posts
    2
    Rep Power
    0
    Originally Posted by KorRedDevil
    As em are relative measurement units, sounds logical (and professionals do care about that) to be used only in case of fonts. So that in a document it would be more likely (and recommended) to use rather px instead of em (except, as I said, the fonts)
    Glad somebody said it.

    However I'd like to point out, though don't quote me on this, this is only based on what I've read over the years.

    em is the relative measurement of the 'M' character of a font. Therefore KorRedDevil is right in using em/ex for just simply fonts.

    px and % should be used for layout and dimensions.

    I personaly use % instead of px. but utilise min/max height/width to build a template for a page. Example:

    Code:
    body {
    width: 80%;
    height: 100%;
    min-width: 960px;
    margin: 0 auto;
    }
    This would let you structure the body so that you got a centred document, at 80% of the browser viewport, no less than 960px width so that you can still maintain the right look.

    (960px because nowadays the majority of resolutions are 1024x768+)

    Some may argue my methods, but they work seemingly well for me
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Sunny England
    Posts
    2
    Rep Power
    0
    Originally Posted by Black Sheep
    What I think you might have read was that the default size for medium text in all modern browsers is 16px.
    That's what I've read also.

    Browser's "Normal" view/zoom:
    16px - 12pt - 1em - 100%

    They are relative/approximate - never absolute since all OSs, browsers and even user preferences are different.

IMN logo majestic logo threadwatch logo seochat tools logo