pt versus em

Discussion in 'Web Design and Development' started by 7on, Jun 25, 2008.

  1. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #1
    Coming from a print background I am used to using pt, however all the articles I've read said em is the way to go.

    Is there a reason to use em over pt?
     
  2. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #2
    Em is the best way to achieve a consistent font size cross-browser. Also, in IE (iirc) users can't adjust pt sizes, but can em. That would be better accessibility to let users control the font size and plan for that. A List Apart has some good screenshots showing the various ways to describe measurements, and for fonts, em is the most consistent.

    See: http://www.alistapart.com/articles/howtosizetextincss/

    Also, I use a handy widget called Designers Toolbox by Michael Preidel, which on the last tab has a handy px to em converter.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    The pt measurement should only be used for print style sheets. The pt measurement will render differently across monitor sizes and monitor resolutions. It's not a reliable method to achieve a consistent look. That's the short of it anyways.
     
  4. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #4
    I tried to use a pt to em convertor, and the text on the site I'm working on got real small (10pt = 0.8em?)

    Is that about right?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Depending on the monitor, yea, that sounds reasonable as far as the conversion. I usually try to stay close to 1em for content text when possible, depending on what font you're using.
     
  6. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #6
    I just realized that you have been saying point and not pixel, so I'm not quite sure how closely they relate.

    A normal base font size of 16px equals 1em. Em's are a ratio compared to what you set the default text size as, so 1em could be visually equivalent to 25pt size, if you set your base text size to something like 25px... It's relative, see?
     
  7. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #7
    Oooooo ok, that sounds reasonable :)

    How would I go about setting 1em = to 10pt?

    10pt is roughly 13px and 16px is roughly 12.3pt
     
  8. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #8
    Can we agree to start referring to 10px as points of printing doesn't exactly correlate? It will allow everyone to be on the same page for the remaining discussion.

    I think the idea is that the scale is set by the default browser font size, which in most cases is 16px. There is no way you can change a browser's default size. I read a nice article somewhere about setting up what you want em's to equate to in your coding, but I can't recall where that was.... I just spent 5 minutes retracing my fav dev links and still couldn't find it.

    16px base / 10px desired font size = .63em.

    so for your 13px desired hight, it would go like this:

    16px base / 13px= .81em

    But I don't think you should even be bothering with "point" sizes. Web can't directly match your print world aesthetics. Decide what looks good on screen in physical pixels, and describe that with ems.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
  10. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #10
    From my quick skim that seemed to be an informative article.

    But you can't help but get a sort of twisted smile of pain/entertainment viewing that page. :)
     
  11. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #11
    Ok ok, I've been converting all my pts I use into ems with a 1em equaling 16 px. Maths, bleh.

    Anyway, something can't be right because when I tell my H1 tags to be 1.3em in size, they look way smaller than 16pt/20.8px using previous sizes.

    Compare the attached image with www.favoritestaffing.com and look at the text.
     

    Attached Files:

  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Yea, I kind of felt the same way. I didn't read it in detail either. The article was written in 2002, but is surprisingly relevant. I guess the dating on the site also explains its umm, unique look.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    It's likely a cascading issue. If you have,
    Code:
    #content{ font-size: .9em; }
    p { font-size: .9; }
    Paragraphs will have a pixel size of 12.96 (16px * 0.9 * 0.9) assuming the paragraphs are inside the #content block. That's the type of thing I would look for.
     
  14. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #14
  15. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #15
    Well my boss doesn't want the page to scale, she wants it hard-coded pixel by pixel. Oh well, I did go ahead and convert my pt to px, just for consistency sake :)

    But this has been a useful experience and I learned alot.
     
  16. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #16
    The page WILL still scale, just not for IE. Its against accessibility practices to try to keep it from scaling. It's not like using em's suddenly puts a big juicy button saying "You can scale this page!" on the site.

    People who know how to scale a page already and try to use it on your site will be doing so because they want to. Probably because they have poor eyesight or hi-res monitors that make everything look very small. And those same people, if unable to scale your site, will dislike your site. Maybe not enough to keep from returning, but it will aggravate them.

    And like I said, em's don't suddenly make it something your boss needs to worry about, so, as it's better practice, you should still use them as practice. Also, why not plan your code for the eventuality that someone DOES zoom your site? Just some clever included things can let it scale.

    Not the best example, but on this site I did http://marybainton.com/oil.html you can up the font size a few bumps, and see how on the lefthand navigation, the background and gold line scale to stay behind the links? It gets bigger with reasonable zooming. That took just a little forethought when doing the element in PS and the page doesn't "break" when someone decides they can't read the text. Other parts of the layout don't hold together as well, but it was good practice to think about that.
     
  17. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #17
    This is an interesting topic, and one I've been trying to come up with a mental list of "best practices" for, but I keep thinking of one thing that most of these articles don't seem to cover much.

    Theoretically speaking, in a world of monitors with different, and potentially very high, pixel densities, wouldn't pt actually be the best long-term solution? I'm not saying this is possible with current software and hardware, but just thinking ahead.

    That is, if 1pt = 1/72", and I wanted "regular sized" text on screen, which is say about .2" tall, AND the computer knows what the pixel density of the screen is AND it supplies this info to the browser, then if I set the font as 14pt, the browser would calculate the correct pixel height for that size regardless of whether the monitor was 96dpi or 200dpi. Whereas if I use px explicitly anywhere I'm now going to end up with entirely unreadable text on a 200dpi screen, or giant fonts on a 96dpi one.

    Again, this is a pure hypothetical at this point, and it would also probably require a way to appropriately size images to match screen pixel density (I suppose that's what IE's zoom feature is trying to accomplish), but I've always wondered if we wouldn't come back around to pt again some day.

    Of course, if you use ALL em, and never refer to any explicit px heights, and if the browser has its default font size set to something reasonable for the screen, then it'll work anyway. So maybe even then we'll stay with em and it'll just be more important than it is now.
     
  18. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #18
    I think you sort of argued yourself into the right direction. Monitors of varying pixel densities in the future mean that displaying information (in browsers, or apps) should move away from using pixels as measurement. Pixel independent. Or "resolution independence" as Apple is calling it. But the point is to not describe info in px, describe it in something like em that will all be correctly proportionate to eachother, and let the browser or the user set what the base of that ratio is. ie right now the 16px default for browsers.
     

Share This Page