SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    web development aconic's Avatar
    Join Date
    Dec 2005
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When should I draw the line on font sizes?

    I have been wondering this for a while as I am blessed with 20/10 vision, I can't simply forget what others are seeing when they view my websites.

    So my question to you is:

    1.From a visitor standpoint, what font size simply draws the line between regular viewing and squinting (ie. reaching for glasses)?

    I want to make sure I stay away from fine print.

    2.What sizes should never be used and what is the universally used font and size?

    Arial, Verdana, Tahoma, or is that a personal preference really.

    Personally, I favor Tahoma 11pt for all my websites. Should I reconsider?

    I'd like to know your 2cents.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's best to reserve "pt" for print stylesheets.

    I suggest you read these two older threads:
    Best Practice for font-size?
    em vs. px
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NRLMedia View Post
    1.From a visitor standpoint, what font size simply draws the line between regular viewing and squinting (ie. reaching for glasses)?
    I doubt there's an answer to this one that suits all people. That's why it's important to make designs that don't break if a user decides to resize the text in their browser.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NRLMedia View Post
    1.From a visitor standpoint, what font size simply draws the line between regular viewing and squinting (ie. reaching for glasses)?
    That can be anything between 9px (for an eagle-eyed 14-year-old) to 72px or more (for people with severe visual impairment).

    Quote Originally Posted by NRLMedia View Post
    2.What sizes should never be used and what is the universally used font and size?
    Sizes in fixed units (pixels, points, millimetres, inches, ...) should never be used, because they cannot be resized in some browsers.

    There is no universal font, but the universal size is 100%, i.e., whatever the user has set as his or her preferred font size.

    Quote Originally Posted by NRLMedia View Post
    Personally, I favor Tahoma 11pt for all my websites. Should I reconsider?
    Yes. You should never specify font sizes in points for screen use. Points are for print, and fixed units are bad for accessibility. Use em or % to specify font sizes.
    Birnam wood is come to Dunsinane

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For plain text use 100%. For headings use 110% and 120% etc as required.

    Anyone with real difficulty reading small content will probably have their own stylesheet installed that makes all the text 144px high regardless of what you set it to. All the popular browsers (eg. IE6) allow your visitor to define their own stylesheet to override yours.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Anyone with real difficulty reading small content will probably have their own stylesheet installed that makes all the text 144px high regardless of what you set it to. All the popular browsers (eg. IE6) allow your visitor to define their own stylesheet to override yours.
    You can't make that assumption. A lot of elder citisens won't know how to do this.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but Stephen also said to use 100&#37; for plain text, which will allow those senior citizens to increase the text size using the built-in functions in their browsers.

    Someone who really needs a 144px font size will most likely have a custom style sheet set up (or have someone help them do it) because few sites, even with relative sizes, scale up that high. It's also possible that such a user will have a screen magnifier instead of a custom style sheet, of course.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always start with:

    body {
    font-size: small;
    }
    * html body {
    font-size: x-small; /* for IE5/Win */
    f\ont-size: small; /* for other IE versions */
    }

    Then using &#37; values for all my other font sizes. This sets a common size that (probably) works in 'all' browsers.
    Here he also recommends (unless you have to) to never use pixel font sizes for the reason that they don't scale with the browser.

    Although I'd like to say this was mine, I've pulled this from the 'Bulletproof Web Design' by Dan Cedarholm which has been invaluable for developing quality 'best practices' in regard to css/xhtml design.

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by secoif View Post
    body {
    font-size: small;
    }
    * html body {
    font-size: x-small; /* for IE5/Win */
    f\ont-size: small; /* for other IE versions */
    }
    This is just a really verbose way of saying
    Code:
    body { font-size:81.25%; }
    Simon Pieters

  10. #10
    web development aconic's Avatar
    Join Date
    Dec 2005
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the responses thus far.

    I was totally unaware of the use of ems or percentages for font sizes.

    Thank you for the head's up on that and I will read the suggested links you guys have provided.



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
  •