SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Point vs Pixel

  1. #1
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone tell me when I should set the font size using point and when using pixel. It seems that if I want to have my text look the same size regardless of what resolution the user has set then use pixel otherwise Point.

    Should I be taking more into consideration than this?

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But even then you cannot guarantee the end result. Some monitors have a 96dpi resolution instead of 72.

    One of the best overall units to use is em. That way you are not tied into any OS specific measurements. It's all browser.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Enthusiast malleron's Avatar
    Join Date
    Feb 2001
    Location
    Arlington, Texas
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this article from A List Apart:

    Give Me Pixels or Give Me Death

    Deciding which to use is ultimately up to you, but it always helps to have a little perspective on the issue.

    Good luck!
    Jenny

    ==========================
    ...living the backstory...

  4. #4
    Rusted & Weathered HumanClay's Avatar
    Join Date
    Sep 2000
    Location
    Milwaukee, WI
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    creole, what is the exact size of em? Say I want to make my fonts appear to have size of -1 (or 2) using the normal font tags. What would I set the size to be using em?

    font-size: xx em; ??
    Steve Caponetto - [profile] [e-mail]
    CreedFeed.com - feed your need for Creed!

  5. #5
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, an "em" is the height of a capital letter in the current font.

    An "ex" is the height of a lowercase "x" in the current font.

    Therefore when you apply "em" or "ex" to a font-size, it is relative to the current font.

    For example a font-size: 1.5em would mean that the font is 1.5 times the height of a usual capital letter "M"

    If you need absolute font size, then this is the wisdom (ie it is the theory):

    Using 12px means that the font height is 12 pixels.

    Using 12pt means that the font is the height of a 12pt font in your operating system. If you have large fonts installed, it will be more than 12 pixels.

    So I'd recommend using 12px if you need it to be a DEFINITE number of pixels high, otherwise use 12pt.

    And use "em" if you have a default paragraph font, and want it to be relative to that default font.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  6. #6
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    human clay...

    "1" is the default em size. To go larger, you go 1.1, 1.2 etc. and the opposite for smaller.

    mmj...good link.

    www.zvon.org is another good reference.
    Last edited by creole; Apr 6, 2001 at 11:07.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    Rusted & Weathered HumanClay's Avatar
    Join Date
    Sep 2000
    Location
    Milwaukee, WI
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the info guys!
    Steve Caponetto - [profile] [e-mail]
    CreedFeed.com - feed your need for Creed!

  9. #9
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)


    According to CSS, the 1em is supposed to be the size of the parent class, but in IE3.x this is not so. I guess nobody needs to worry about IE3 anymore, though

    So if you have a

    <p class="classone">home<span style="font-size: 1.2em">work</span></p>

    Then the word "work" will be 1.2 times the size of "home", and "home" will be the size defined in the "classone" class.

    As far as I know...

    [edit]
    However, I believe if you had a
    .classone span { font-size:16pt }
    defined, then the "work" would be 1.2 times the size of the "classone span", rather than 1.2 times the size of "classone"
    Last edited by mmj; Apr 6, 2001 at 13:12.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •