Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Body tag - font size...

    Hi all,

    I've been reading about css font sizing - from this read something have become a bit clearer but somethings remain a bit of a mystery.

    I've also peeked at a few source codes (of people's sites I think know what they are doing) to get a glimpse of the css involved... more confusion I'm afraid.

    I think that by declaring a font size in the body tag you are setting a default font size - this will be used whenever there is no other styling applied - right?

    Or... do you do so to set a reference for subsequent font sizing. For example: If I set the body selector to:

    font-size: 1em

    Does this set up using percentages? Would {font-size: 85%} on a later selector be 85% of 1em? Or not?

    From peeking at a the style sheets of some pages I have seen a lot of different methods used... some examples would be:

    font-size: 62.5%; (peeked at yours Richard )

    font-size: 0.84em (Eric Meyer)

    Then I read over at W3 that there is such a concept of using "large, medium, etc... I don't get that at all... what is the standard reference there? "Larger" than what?

    I guess I was hoping there was a standard or "best" way to do this. I'm trying to have an eye toward the "right" way these days.

    Also - as a side note... I read a lot about how however you set it up it should be friendly to those who may need to resize for accesabilty reasons. I'm all for that but can't a resize also break a layout?

    Anyway - thanks for any insight into this.

    Dodge

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I too wonder about font sizing with CSS, and would like to know if it is possible to have a certain range within which the user can resize the text.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    There are a few schools of thought on this matter, but I'll try and tackle a few.

    The em is based on the default browser size. So if the default browser size is 12px or 11pt or something, then 1 "em" equals 12px or 11pt or whatever. Usually 1 em is larger than most people like it to be, so by declaring a percentage at the very beginning...
    Code:
    body {
     font-size: 70%;
     }
    ... 1 em is now 70% smaller than it would have been. Tricky, no?

    Obviously, because each browser has different settings, the font sizes will be somewhat different in each browser. Check this out for a decent explanation.

    Breaking a layout when resizing text is possible, unless you get equally tricky and define all margins/padding/whatever as relative sizes as well. So instead of "margin: 20px" you could use "margin: 2em" or something similar. To be honest I'm still working on this technique. To be more honest, I'm still using px for all my text, as except for IE it resizes just fine. And really, anyone using IE doesn't know about resizing text, anyhow. But I do see the advantages; a non-breaking layout being just one.

    Keywords (small, large, etc) are defined by the browser, and so can vary widely. The article mentioned above explains that in a bit more detail.

    Hope this clears things up a bit...

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by whizard
    I too wonder about font sizing with CSS, and would like to know if it is possible to have a certain range within which the user can resize the text.

    Dan
    hmmmmmmmmrrrrrmmmm...

    I don't think so on this one. I'm guessing that resides soley within the browser preferences. I tried a few sneaky-ish things, and the browser simply overrides everything until the text gets to a certain size.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    s'more cents

    Let me throw in a couple of cents to further complicate the matter:

    Using keywords (small, medium, large, etc.) would be a very predictable way of defining font sizes if it weren't for IE, which is still used by most, to get it wrong.
    The tricky thing with percentage sizes is that font sizes get inherited down from parent elements to their children; this is why defining a font size for the body element provides a base size for all decendant elements.
    Using percentages elsewhere however may cause unexpected results when these values are inherited down the chain.

    On of the more somewhat consistent ways is using a single percentage on, say the html or body element, and use ems everywhere else. The benefit of em values is the relationship to the user's resolution settings; combining it with a percentage takes care of 1em usually being too large.
    This method is decribed by Owen Briggs: Sane CSS sizes.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New Coder
    Join Date
    Jan 2004
    Location
    London, England
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Knock me down with a feather, I've come on here with a question right up this street. I've inherited a style sheet which says
    Code:
    body {font-size: 81%;}
    All the tags within the doc inherit this attribute except tables, within which the font is full-size. If, however, I put
    Code:
    table {font-size: 100%}
    in the style sheet, the table now renders the same size as everything else, i.e. 81% of full size. That is, size attribute is now being (correctly?) inherited.

    Should I expect this? Is it a bug in the browser (IE 6.0.2800)?

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Tables are weird, man.

    I think it's only IE where a table doesn't inherit the font size set by the body tag (I know I end up redeclaring the font-size all the the time for tds, for example); setting the font to "1em" or whatever is set for the rest of the page should also do the trick.


  •  

    Posting Permissions

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