SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot trickyjw's Avatar
    Join Date
    Nov 2006
    Location
    Melbourne, Australia
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    font size in the body tag

    What is the best font size to define in the body tag?

    For example from something I read years ago I've always set the body font-size to 67.5%. From this I can define my fonts for the rest of the css doc in em's that are easy to understand.

    So by doing this 12px would be 1.2em 16px would be 1.6em.

    I've now seen something saying you shouldn't define the body font-size lower than 80-85%. Bit confused now.

    So what is wrong with 67.5%? What should I be using?

    Thank you.

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I assume you mean ON BODY, and not on the tag? (since that's presentation and as such has NO BUSINESS in the markup?!?)

    the 67.5% BULL is 100% flawed and pure manure... why? because not all machines are 96dpi so that alleged 10px ends up 12px (rounded down from 12.2) on my workstation and 15px on my media center machine (120dpi and 144 dpi respectively).

    Which is the POINT of declaring %/em fonts -- they will adjust automatically to the size the user wants WITHOUT them having to dive for the zoom!!!

    On top of which, it's moronic to declare a default font size on all elements (since all inherit from BODY) that is smaller than you'd actually want on the page -- and for the majority of people anything smaller than 85% is usually USELESSLY SMALL... since that's 10px 72dpi, 14px 96dpi, 17px 120dpi and 21px 144dpi...

    NOT ALL COMPUTERS ARE 96DPI, no matter how much the dips working on Webkit try to claim otherwise.

    Quite some time ago I made a small demo to show the font size rendering differences across OS platforms and by font-metric, and how certain browsers are USELESS from an accessibility standpoint (webkit/gecko based)

    http://battletech.hopto.org/html_tut.../template.html

    Just another reason many people actually stay with IE... or the fringe whacko's like myself who use Opera... since Mozilla has a "accessibility, what's that" attitude to match the "WCAG, what's that?" attitude most developers practice.

  3. #3
    SitePoint Zealot trickyjw's Avatar
    Join Date
    Nov 2006
    Location
    Melbourne, Australia
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. Seems to make some sense. Looks like I may have made some dodgy websites then adding 67.5% font size in body. Yikes.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by trickyjw View Post
    Thank you for your help. Seems to make some sense. Looks like I may have made some dodgy websites then adding 67.5% font size in body. Yikes.
    If you then correct it by scaling the text size back up on all other elements, so that it appears at about '100%' (ie default) then you probably won't have done too much harm for many people, but it's still a completely messed up way of working.

    People started using the 67.5% rule back when we first started saying "don't specify font sizes in pixels", because they thought that by using 67.5% they were getting a 10px baseline and they could then specify exact font sizes using % from that 10px baseline without having to do any difficult maths. Of course, that assumes that everyone has the same dpi and default font settings, which as DS60 said is complete rubbish. Scaling down to 67.5% and then back up to 100% doesn't achieve anything (other than the chance of errors) that just leaving it at the default size wouldn't have achieved.

    Far better to just leave the body text at its default size and scale up or down as you need it for text that is larger (eg headings) or smaller than normal.

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I've never used the Clagnut base font size technique, but isn't it supposed to be 62.5% of an assumed browser default size of 16px?

    16 x .625 = 10

    67.5% assumes a browser default font size of 16.75px. Googling suggests the error is widespread.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You need to specify a percentage to fix an IE bug but 100% is as good a figure to use as any since whatever percentage you use isn'g going to allow you to convert em to pixels. The 62.5% figure only works for computers configured a particular way which was common at the time people started using that figure but which is far less common now.
    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="^$">

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The 62.5% figure only works for computers configured a particular way which was common at the time people started using that figure but which is far less common now.
    From where I've sat as someone who's used the 8514/120dpi/large font settings since windows 3.0 it was NEVER that uncommon a choice.

    I always figured it came from Mac users (like the webkit obsessed since one of them ran their mouth about 96dpi being on EVERYTHING) where you don't even have the choice to change the default sizes of the OS elements.

    Just another reason NOT to use MacOS/OSX since they too have the "Accessibility, what's that?" attitude.

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    As several people have already said, Richard Rutter's 62.5% sizing deal was popular for a while, but its flaws have relegated it to the obsolete pile. There are a lot of knowledgeable people still advocating its use, and a lot of older articles out there still plumping for it, so no shame in thinking it's okay, but it's best not used any longer.

  9. #9
    SitePoint Zealot trickyjw's Avatar
    Join Date
    Nov 2006
    Location
    Melbourne, Australia
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Well it's fair to say I may have picked this habit up around 2006/2007 so it probably explains the time when it was being used. So am I ok setting 100% font size in the BODY?

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    There are a lot of knowledgeable ignorant people still advocating its use, and a lot of older articles web rot out there still plumping for it, so no shame in thinking it's okay, but it's best not used any longer.
    There, fixed. First time I encountered it my reaction was "well what ignorant fool came up with this?!?" -- and I've seen nothing to revise that opinion. It had to be something like a Mac user where you can't resize anything, as nobody who actually knew anything about computers OR browsers OR the POINT of using %/EM's (or PT for that matter) would be dumb enough to come up with that in the first place.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by trickyjw View Post
    So am I ok setting 100% font size in the BODY?
    Yes. It makes no difference what percentage you set as long as you set one so as to fix the bug in IE.
    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="^$">

  12. #12
    SitePoint Zealot trickyjw's Avatar
    Join Date
    Nov 2006
    Location
    Melbourne, Australia
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I appreciate all your help.


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
  •