SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    font size - pixels or points?

    Which is the best to choose? My tutor suggested using pixel sizes, going no lower than 10. But from what I understand, point sizes allow the end-user to rezise the font in their browser.

    Any tips or advice with regards to what sizing (point or pixel) to choose?

  2. #2
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you should use either ems or % sizes for maximum usability. They are both relative font size specifications.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also the use of ems allow the designer to set the entire page design to react to the user changing font sizes eg.
    margin-top: 3.5em;

  4. #4
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    em
    Mike
    It's not who I am underneath, but what I do that defines me.

  5. #5
    SitePoint Enthusiast Traduim's Avatar
    Join Date
    Feb 2003
    Location
    Catalonia
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to use xx-small/x-small/small/medium/large/x-large/xx-large. But now I know there are browsers such as Mozilla that allow users resize pixel-sized fonts, I've started using 10px,12px...
    Josep Tarrés,
    traducción
    traductor

  6. #6
    SitePoint Addict tempyyyst's Avatar
    Join Date
    Nov 2001
    Location
    Kent, UK
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At the risk in appearing stupidly inconsistent I use the appropriate method dependiing on the site. If it's text heavy then I go with ems. If I'm being anal about appearance I go with px.

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vargz
    ...point sizes allow the end-user to rezise the font in their browser.
    Just as a point of order, MSIE/Win is the *only* major browser that doesn't allow the resizing of px-sized fonts.

    It's possible (I won't say probable) that MS will see the error of their ways and 'fix' this issue in one of the next versions of MSIE/Win to bring it into line with every (other) modern browser.

    MSIE/Mac can resize px-sized fonts.


    Personally, I say use px and damn the small portion of the MSIE/Win user base for whom resizing fonts is essential to hell for their ignorance.

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tempyyyst raises a good point. One must weight up the more important aspect of the site - design or accessibility.

    Bill, that's interesting that IE/Win is the only browser version that doesn't support resizing px-sized fonts. I to will probably use px sizes most of the time. But I will keep in mind that IE is the most commonly used browser and does have this accessibility problem.

  9. #9
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For text that needs to fit inside a certain box (for a menu or such), I use point (pt). For standard text, I use pt at the moment, but will change to em when I reprogram my site with PHP. Pt is also better if you want to print the pages. Most times 12pt is sufficient for that.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  10. #10
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by reptilianfeline
    For text that needs to fit inside a certain box (for a menu or such), I use point (pt).
    Your other option would be to size the box using ems. That way, the size of the box would increase/decrease in relation to the text size. Not the answer for every situation, I know, but it is an option.

    Quote Originally Posted by reptilianfeline
    For standard text, I use pt at the moment, but will change to em when I reprogram my site with PHP. Pt is also better if you want to print the pages. Most times 12pt is sufficient for that.
    You can always make a seperate stylesheet for printing. You can then use ems on the screen and 10/12 pt on paper. That also allows you to make other changes such as setting your navigation div's display to none, adding in page breaks, etc.

  11. #11
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there any convertion table? from px to em etc?

    thx

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by astericks
    is there any convertion table? from px to em etc?

    thx
    Since em is a relative size, you can't really compare directly. I know with default browser settings, 1em equals roughly a 12pt font though.

    Quote Originally Posted by Bill Posters

    It's possible (I won't say probable) that MS will see the error of their ways and 'fix' this issue in one of the next versions of MSIE/Win to bring it into line with every (other) modern browser.
    If MS even bothers with a new version of IE! It's been almost two years since IE6 came out and I haven't heard anything about a new release. The only thing to be added to IE6 was SP1, which as far as I know was security fixes, not enhancements. I think MS has been resting on their laurels too long, and they need to start supporting some new standards as well. </rant>

  13. #13
    SitePoint Enthusiast abbey's Avatar
    Join Date
    Apr 2003
    Location
    Chicago
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For usability, you want the viewer to be able to resize the fonts. That's also another reason why ems are a good idea since that allows people with vision problems to read what you're writing.

    Point is a print measurement and while lots of people use it, it's not meant for the web.

    For a comparison of browser/platform renderings between pixels and points, see http://developer.apple.com/internet/...s_gallery.html

    That also demonstrates the vast difference between points on the different browsers/platforms.

    Another font resource: http://www.webstyleguide.com/type/cross.html
    <abbey />
    HTML/XHTML/CSS coding
    Abbey Ink

  14. #14
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found another interesting/helpful resource to share

    CSS font size test

  15. #15
    Matt Williams revsorg's Avatar
    Join Date
    Jun 2002
    Location
    Planet Vorcon-5 in sector cx-37-b
    Posts
    1,136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even if the next version of IE could resize fonts that were specified as px it wouldn't help. It will take years for the IE6 user population to become a minority.
    work: revs | ecru
    reviews: films | mp3s
    projects: Glastonbury Tor | London IT support

  16. #16
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, can someone please answer the following:

    What is the main benefit of using px sizes?

    Pixel sizes are scalable in all browsers but IE/Win, so is this the only usability/accessibility downfall of using px?

  17. #17
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your box is a certain size in px, makeing the text px as well will hopefully mean that the text will always fit inside the box. Not sure if this is correct, but that's my theory.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  18. #18
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by reptilianfeline
    If your box is a certain size in px, makeing the text px as well will hopefully mean that the text will always fit inside the box. Not sure if this is correct, but that's my theory.
    That's what I thought, but if you can resize px fonts (in all browsers except IE/Win) does this still hold true?

    Then what is the benefit of using ems over px??

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically ignoring the browser compatibility issues; em and ex differ from the pixel since the pixel can be used for more than just text.

    Furthermore em relates to the 'font-size' of the relevant font whereas the ex relates the 'x-height' of the relevant font in contrast to pixels, which are relative to the viewing device.

    Therefore the pixel size is determined by your computer display and will use a reference pixel whereas the ex is relational to the specific font height in question.


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
  •