Why would I apply a relative font-size to the body tag?

Question

I saw that some people use to set a font-size:80% for the body tag in CSS properties.

Why would I do something like that? Why can't I simply add a relative font size to the specific properties (e.g. p{ font-size:90%})?

Answer 1

You set it for the body tag to serve as a default for all the elements that you don't set a font-size to. You can also set the common font-size for the body, and just set font-size for the elements that are different than that of the body.

Answer 2

Because you might not have a p tag around everything that you want the font-size to apply to.

Not everyone wraps a paragraph around every piece of text (i.e. some people work with a mixture of divs and ps...)

Answer 3

Another example of this use is if you want to create a javascript function that enlarges or shrinks the text size, then you can just append a change to the body font size and it will work on everything.

Answer 4

Setting the body font size to 62.5% sets every other element so that 1.0em == 10px. So if I want my h1 to 20px and my p to be 14, I just have to set them to 2.0em and 1.4em respectively.

Setting the font-size in ems rather than px allows for more flexible text-resizing in certain browsers (FF2 and IE6 come to mind).

Answer 5

Another use is taking advantage of font-size inheritance.

If you use relative font-sizes that base off the body tag, then providing multiple sizes now becomes the task of changing the body tag's font size.

Answer 6

Most browsers are shipped with a default font size of 16 pixels. But this is for most authors too large. So instead of setting a fixed font size and thus overriding the user’s settings (additionally the IE <= 7 cannot zoom pixel font sizes), they just scale browser’s default value down.

Answer 7

Setting the font-size in percents or ems on the BODY element is a trick for cross browser font-size consistence. In addition it does allow IE6 to resize fonts when you use the text size option in the menu or when you use the Alt + Mousewheel combination.

That said since the new IE and Firefox 3 have adopted the whole page zoom as default, and seeing as IE6 is slowly disappearing out of the frame, using relative font sizes on the body purely to support IE6 Text resize is probably no longer worth the trouble.x

Answer 8

One neat trick I've found for defining font-size as percentage in the body is for creating a pseudo-page zoom for browser that don't have one.

If you use ems for both your font size and layout dimensions in your site, everything will scale relative to the font size. So if the user chooses to set their browser's font-size to 12pt (as opposed to the usual default of 16pt), your whole page (sans images) will scale with the text.