Please Explain This Font Sizing Structure

The css of a major site I am looking at has what appears to be a strange way of managing their font sizes in CSS. First, the body selector has this:

body {
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif;
}

Then later on to get a custom开发者_如何学C size for the h2 font they do:

h2 {
font-size:3em;
}

If you change the font directives in either of these places, the font size of h2 will change and look incorrect. So they are clearly managing the font size via the combination of these directives, and I want to know why they would do it this way....

Questions:

1. Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....

2. What is the motivation for this design?

Thanks, Jonah

---

Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....

Because in CSS, em is a relative unit of measure. Thus 3 ems of 62.5% of the base size means 187.5% of the base size for <h2> elements.

What is the motivation for this design?

Setting a percentage value for the body element means that — % being a relative unit of measure too — the user can resize text in an entire page using his browser's text size setting. I would guess that a value like 62.5% is in case the browser default font size makes the entire body copy too large (remember that this is being applied on the body element). My site uses 90%, which isn't that small but you get the idea.

---

1em is equal to the default font size. The default text size in browsers is 16px. Unless you change the default, that is.

Here the default is being defined as 62.5% of the browser's default, with a line height of 1.5.

3em is 3 times the default size set.

So when you change the body default it affects every place the em size unit is used, including the h2 tag with is 3 time the default setting.

---

Usually the browser defines a default font size of 16px. em however, is a relative unit. So for example, if you have a setting a font size for a container/div of

1 em   = 1 times 16px = 16px
1.5 em = 1.5 times 16px = 24px
2 em   = 2 times 16px = 32px

Therefore by setting it to 62.5%, it reduces down to your reference font size to 10px default.

which means this technique makes it easier when you are visualizing your font sizes in px,

1 em = 10px
1.5em = 15px
2em = 20px