Globally set font size for body

Question

css

Good evening Habr.

Not so long ago, when I was looking at layout projects of leading studios, both ours and foreign ones, I noticed one regularity: different ways of globally setting the font size for the entire site are used - accordingly, different ways of changing the font for an individual element relative to the global value. This shook my unshakable faith in how to do it right after all.

Actually, there were at least 4 options, however, if everything has been clear with the first ones for a long time, then doubts arose regarding the following:

body {font-size: 100%;}
.element {font-size: 0.625em;}

(possible with a value of 100.01%, not the point).

and

body {font-size: 62.5%;}
.element {font-size: 1em;}

Actually, the question is:
What problems can we get using method number 2?

Answer 1

There are no obvious problems. This is normal practice. It should be understood that scalable units of measure are used in these options. Maybe this is due to adaptive layout, maybe specific font sizes and vertical rhythm in layouts. The only thing to remember is that in such situations the font size is calculated based on the parent's font size. Those. if you suddenly set the block font-size: 0; then the font size of the child will be exactly the same.

Answer 2

100.01% is a hack for some of the ancient (really ancient) versions of Opera. Those who use it are stupid copy-pasteers who do not understand what they are doing. Now in all browsers (including IE6) 100% is the default font size (i.e. 16px). And setting font-size to 100% doesn't make much sense.
About percentages. Percentages allow you to increase the font using the browser. At least that's what the CSS standard was supposed to be. However, in reality, except for IE6, all other browsers use their own page enlargement algorithm, and even if the font size is specified in pixels, they will still scale it. T. arr. specifying a font size in % makes sense either for the sake of IE6 or out of a sense of perfectionism.
It is especially important if, for example, you have a button, and it is made with pictures, and its size is fixed in px, it is strange for such a button to specify the font in em or %. Those. where there is a hard binding to pixels, they should be specified for the font.
Em is usually used not to indicate the relative size of the font (this can be done using percentages), but to set sizes, paddings, margins, proportional to the font size.
I personally define the default font of the page on the html element.

Answer 3

At least problems with the fact that you can get confused. It is much clearer to consider the dimensions relative to 100% than from 62.5%, and you still need to remember this figure, it is much easier to forget.

Answer 4

To complete the experience: what is the difference

... {font-size: 100%;}

... {font-size: 100.01%;}

Answer 5

body {font-size: 62.5%;}
.element {font-size: 1em;}
This is an English guy who suggested it.
the point is, if you're used to putting pixels, but want to use em so that the text can adapt to the drum on browsers and so on...
then 62.5% of the default 16px in most browsers = 10px.
So if you have a 10px body in pixels in your mind and 1em is also 10px.
Then it is convenient to set em to count.
For example h1 2.6em would be 26px in your mind.
The main thing is to follow the nesting, just a little, you can use rem.