em vs px vs pt

Discussion in 'Web Design and Development' started by torndownunit, Mar 2, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    I know it's a never ending debate, but I was just curious on updated perspectives on each. Which one you guys use, and why?

    I have been trying to use ems lately because I like the control it gives me. But I will admit beyond that I don't really know the benefits. I tend to still use pixels with some things just because I am still used to them coming from a graphics background, not a web design background.

    As for pts, I really know nothing about this method or why one would use it over pxs and ems.

    There are wars about this on other forums I find when I do a Google search. People on this forum seem more level headed and helpful, so I am curious what your opinions are.

    Thanks for your input
     
  2. geoffreak macrumors 68020

    geoffreak

    Joined:
    Feb 8, 2008
    #2
    I just use px because I will know what to expect. Sometimes I use em for fonts, but I never use pt.
     
  3. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #3
    We mostly use Pixel. Mostly because a lot of our back-end interfaces require exact measurements and it's hard to design an interface with variable width's and heights. I must say if I had my preference I love the idea of EM's and I enjoy reading websites in EM. My 17 mbp, 12px is very small :)
     
  4. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #4
    So if you were designing sites without a complicated backend, you would consider using em? I mainly do smaller, fairly static sites.
     
  5. geoffreak macrumors 68020

    geoffreak

    Joined:
    Feb 8, 2008
    #5
    The issue is more of one that em varies depending on the resolution of the monitor. As long as your design can scale well, there is no reason not to use it.
     
  6. Tankgunk macrumors regular

    Tankgunk

    Joined:
    Aug 2, 2007
    #6
    In my opinion, em is the right choice most of the time. Honestly, the only reason to use pt/px is for something that you absolutely can't scale (for me, not very often).
     
  7. jordanste macrumors member

    Joined:
    Feb 25, 2006
    #7
    I tend to use pxs almost all of the time, I know I should us ems for the scalability factor but old habits die hard... I know what 16px looks like. I have a harder time knowing what 0.92ems looks like before I do it.
     
  8. frankblundt macrumors 65816

    frankblundt

    Joined:
    Sep 19, 2005
    Location:
    South of the border
    #8
    I'm stating this based on what I've been told rather than on rigourous personal testing, but if you don't base your font sizing on pt then IE6 users can't resize the text.

    Personally, I find pt and ems wacky and unpredictable compared to px, but all of them are simpler to deal with if you stick to one declaration for the body style and declare everything else relative to that using %.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    You might be misremembering, but the statement about needing to use pt for IE to resize fonts is incorrect. Use of em or % will allow IE to resize text. Though, IE will need the body font size set to 100% (or other values) in order for it to scale the same way as other browsers. You say you prefer using %, but find em wacky. They are actually the same, they just have the decimal place in a different spot e.g., 1em = 100%, 1.5em = 150%.

    Myself, I use almost entirely em for font sizes and even widths a lot of the time. I use px when it makes sense for me. I use pt only for print style sheets and that's the only place they should ever be used. The pt measurement only makes sense for print because it's based on physical dimensions such as the inch or centimeter and does not directly scale to pixels, which our screens use. I've even used the inch measurement in my CSS, though it was a very special case.

    It seems a lot of designers opt for the px measurements on the design because they have design backgrounds and want everything to be in the exact position they planned for without much regard for how the user will be interacting with the site. It's the type of precision that is perfectly fine for print, but I personally feel the web should be a little bit more flexible. I like to deign my sites so they can move without breaking and still have it feel natural. It's not always possible, but it's what I aim for.
     
  10. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #10
    angelwatt speaks the truth. It takes a bit of practice to "get" working in a "relative" measurement like EMs, but if you want to create websites that are flexible and accessible by multiple types of devices, ems are the measurement to use.

    To paraphrase Chris Pullman "What we used to COMPOSE, we now must CHOREOGRAPH". Modern web design is all about dynamic relationships of both content and form.
     
  11. frankblundt macrumors 65816

    frankblundt

    Joined:
    Sep 19, 2005
    Location:
    South of the border
    #11
    Thanks, brilliantly elucidated explanation, as usual :)
    I shall attempt this more coherent approach from now on (and in retrospect also, this being one of the singular delights of web development).
     
  12. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #12
    I have started using em for all my font sizes on the last 2 sites I have worked on. I really like the results, and how they look across systems.
     
  13. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #13
    I agree completely with angelwatt's comments, but would like to add on snippet of info. I recently learnt that all browsers recognise the size 'small' at the same size. So to get a consistent scale, you set html or body {font-size:small;} and work from this, p {font-size:0.7em;} would set paragraph font size at 70% of the mystery 'small' size for example.
     
  14. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
  15. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    Location:
    In a sidewalk.
    #15
    I use pixels myself in most circumstances, simply because on any monitor 1px is 1px is 1px and I know what it will look like relation to the rest of the layout.

    Agreed. I've never used points since they are a print measurement and I just don't like mixing print with web - it's confusing when it doesn't need to be.

    I'll use EMs once in a while, and only on fluid layouts. The only thing to keep in mind with EMs is that some users (granted, very few) may have a different font size specified in their browser. Any time you use EMs you have to realize your design, if it's very precise, may break if the user has their font size set larger; or conversely look silly and empty if they've got it set smaller. EMs work great in theory, but for most designs they're really unnecessary. (imo)

    I can see where you're coming from; In my case I will use stylesheet swapping if they need to change proportions. For me this just gives the best balance between my design (that I slaved over for hours) and their screen. But then again, I came from a print background so I put more emphasis on the layout than might be usual for the next web designer. (on a more comforting note, I am *not* anal about keeping things microscopically precise...)


    So I'm not adverse to using EMs, but for most intents and purposes, PX for me.
     
  16. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #16
    I'm looking forward to the day (hopefully soon) when all commonly used browsers have the page zoom function, rather than only the text zoom. This will allow for designers to utilise pixel perfect design without feeling guilty.
     

Share This Page