What's the point of font-size:100% on body? doesn't seem to make any difference

i use a combination of ems and %'s (i barely know why i choose one over the other to be honest) to size fonts and widths of a div say etc. all’s fine. in a thread just recently someone was talking about using ems for fonts but putting font-size:100% on body first. i’ve never done that. a site i’m doing at the moment i’ve just put font-size:100% on body right near the start/top of the css cascade for each page. it’s made no difference so far as i can tell.

what’s the point of font-size:100% on body?



If you set the body font size at 100% then that will mean it will be at the default size which means that there will be no difference as you found out.

It is commonly set at 100% to avoid the IE bug where ems are subject to an exaggerated scaling factor when text is resized. Setting the body in percentage kills the bug and allows ems to scale correctly.

i see so it’s not intended to have any effect in any browser apart from fixing em sizes in ie (6 and 7 according to that article). right, worth doing then. great, thanks.

It doesn’t hurt to have anyway. It should be common sense to not screw with anything. 100% means 100% of what it was supposed to be so logically it shouldn’t cahnge at all (if it would change in your head logically, what value wouldn’t change?)

Personnaly, I go for something like that:

html {
    font-size: 81.25%;    /* 62.5% -> 1em = 10px / 75% -> 1em = 12px */

body {
    font: 13px/1.615385 Verdana, Helvetica, Arial, sans-serif;

Then I use ems for each different element:

p {
    font-size: 1em;

It gives the same size of text in every browser. And it’s easy to modify if needed.

Except you should avoid using pixels when using font size as IE users (all of them) won’t allow text ressizing when set in pixels

That statement is only true sometimes. There are lots of factors that can affect how many pixels correspond to an em to start with - not everyone starts at 16px = 1em and no matter what percentage you set it to different people are still going to see your text at different sizes (even before they do anything to resize it).

Well at least that works for IE7+, Firefox, Google chrome, Safari…

Can you give me an example of browser which would not display a consistent font size please? I would like to make some tests :slight_smile:


The html rule is pointless because you over-ride it in the body with a 13px pixel size!

For one example, I have set one of my browsers to default to a 13px (≈10pt) font size instead of 16px (≈12pt). Your 62.5% yields 1em as an 8px font size, not the 10px you expect; too small to render a complete glyph set.



That’s because there are lots of factors that affect the default size and so the 1em = 16px that some people assume in setting it to 62.5% to get 10px is wrong. Whatever percentage you are using to get 13px will give a font 25% bigger than you are seeing on some browsers.

I don’t give it a thought anymore. I just put font size 100% on the body, and eyeball all the innards with em’s.

Well, I just tried to set my default font-size to 10px on Firefox and nothing changes.
(The body { font: 13px/1.615385 } makes sure it goes back to something normal).

Maybe it can change something on some browsers, or in some special situations but… it’s like trying to get a pixel-perfect website on IE6. That’s just insignificant details.

You should NEVER set font sizes in pixels. Doing so blocks IE6 users from being able to resize the text big enough to see (for example those who have their screen resolution set to a high level where there are possibly 500 pixels to an inch and they don’t have a microscope to view your text through and need to make bigger in order to see it properly).

Always use:

body {font:100%;}

I know I was, and I imagine Tsedaka was also talking about setting the browser’s default font size. I was not referring to setting the base size for a document.

My example demonstrated that using a small percentage, e.g. 62.5%, as a base size presumes the user has not reduced his default size; a potentially fatal error.



I guess we’re arguing the same thing for different reasons then.

Setting the screen resolution to 1600x1200 on a 15 inch CRT monitor would would give you approximately 200 pixels to the inch and so even at 100% gives you text under 6pt in size. So assuming that the person can actually read 5pt text and so hasn’t increased their default font size someone setting their page to 62.5% would reduce the text to just over 3pt in size which is sure to be too small to read.

There is no what yo tell how big text defined in pixels will be since depending on screen resolution you could have anything between 72 and several hundred pixels to the inch. That 62.5% assumes that each pixel is one point in size (72 to the inch) and few people use screens where they have the resultion set anywhere near that these days. That’s why the browser default is bigger than that - since at a typical screen resolution using 100% gives you around 9 - 11 point text (which is about as small as you would normally want to go).

Not just IE6, IE in general (I think I was reading an article saying IE8 still has issues with this)

Setting sizes in pixels makes them invisibly small for anyone using a high resolution regardless of which browser is being used so even if IE does fix it so that text specified in pixels can be resized it will still be inappropriate to define text that way. Specifying font sizes less than 9pt is a bad idea since text that small is getting difficult for anyone to read and since depending on screen resolution and screen size 9pt can be anywhere between 9px and 90px specifying any font size in pixels less than 90px should be forbidden (of course then it ends up huge for anyone using lower screen resolutions so using any font sizes in pixels over 72px should be forbidden as well).