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

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

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...

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 (http://www.thenoodleincident.com/tutorials/typography/) 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. :D 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...

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.

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 (http://www.thenoodleincident.com/tutorials/typography/index.html).

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 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 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)?

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.