Should I set the default font-size on the body or html element?

Question

I like to work in ems when creating websites. Therefore I set a default font-size of 100.01% on the body element.

My question is should I set the default font-size on the body or the html element? What are the pros and cons (if any) of both?

Solution 1

Now that the rem unit is starting to become popular, setting the base font-size on the root element (html tag) is advised (rem stands for root em).

Solution 2

I don't believe there is any advantage or disadvantage to setting the base font-size on either html or body to allow for sizing with ems; they will both have the same effect.

Not related to the question:

I would however suggest using a different default font-size. I would set it as:

body {
    font-size: 62.5%;
}

Doing this reduces the default font-size from 16px down to 10px. This then makes choosing font-size much easier as there is no need for difficult calculations. It means that 1em is equal to 10px and so calculating the px size is a matter of multiplying by 10:

• 1.0em = 10px
• 1.4em = 14px
• 1.8em = 18px
• 2.2em = 22px

Solution 3

If you really want to follow the rules and still keep flexibility, you should consider this:

• html's font-size is the root font-size, which means it will be used as a base for rem calculation, but that's it, nothing else. It shouldn't be used for real text size calculation: it's just a kind of trick for some browsers.
• body's font-size is the text's default font-size: all your text should have this size, unless overriding definition
• special elements should have sizes in rem, with a fallback in pixels

So that is how it looks in CSS:

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

Note that, while all page's elements should inherit from the body definition, you could use an all-tag-inclusive definition instead, like often seen in HTML resets:

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

I don't recommend this reset however. Standards are made to help you avoid this kind of tricks.

Comments

[joshnh]

The mathematics isn't the issue, no matter what the body font-size is the numbers are still going to get messy when it comes to line-height and margin-bottom. Thanks for the answer though.

[tw16]

@joshuanhibbert: The maths part was a recommendation as an addition to my main answer i.e. there is no advantage/disadvantage to choosing one over the other.

[joshnh]

Just a little bit of info: if sizing in rems you will need to set the default font-size on the html element, as rems uses the root.

[tw16]

@joshuanhibbert: That is correct, but as you only asked about ems I decided to stay away from talking about rems. However, using the above maths trick in conjunction with rems is even better, as the figures are far more consistent. If you do chose to use rems though, make sure to set a similar px font-size first in the css rule (much easier to work out with the maths above), because if rems are not supported it will fall back to the px font-size.

[Bill Rosmus]

Careful with REM and IE9. I tried using it on more than just fonts and IE did not recognize REM the same way that all the other browsers did. Looked terrible.

[bernk]

Just out of curiosity, why would you set the body font-size to 62.5% to get 10px assuming the browser's default is in fact 16px...when you could just set it to 10px? Then you could still use rems based on this 10px. No?

[BoltClock]

Remember that if you need to provide a fallback in px or em, it's as simple as specifying an extra declaration such that you have the fallback value preceding the rem value. Of course, the complexity lies in having to calculate the absolute value you would need, which would otherwise have been obviated by the use of the rem unit.

[Satya Prakash]

@bernk wont that will make it unresponsive with px value?

[notapatch]

CSS Wizard wrote an article against using 62.5% unless you actually want a base font of 10px. "The main reason, I feel, behind using the 62.5% method is laziness, and that’s a good thing. Good developers are lazy. However that laziness is misguided; it’s actually causing you more work. You have to define font-sizes on all elements rather than just once and letting them inherit and you have to tackle those horrible inheritance issues when an explicitly sized element is placed inside another one."

[armen]

i would be grateful if there was a provided example.

[Ninj]

I'm convinced CSS Wizard is wrong here. See my answer for explanations.

[nvreez]

This last all-tag suggestion makes <a> elements inside <p> elements 75% smaller, which is (probably) not what you want. Similar behaviour for other nested elements. You could fix it with rem, but I don't agree doing this all-tag "reset" in the first place. Just only set the <body> tag and maybe add font-size: inherit; for the reset.

[Ninj]

Oops, had to be "rem". Note that i neither like this all-tag reset, but it's a good workaround sometimes for browser with strange behaviours (who said IE?). I'm correcting it, thank you.

[Alex MM]

Hi @Ninj, short question, is there any reason why you set the <body> font-size in em units instead of in rem units? I guess the result is the same cause <html> is the parent of <body> and <html> is also de root element, but it may be more clear to use rems if you finally are using rems as your main size unit. Thanks!

[Ninj]

@AlexMM As far as i remember (that's an old case), it's because "rem" is, precisely, refering to the body's font size, which would look like an infinite loop (even though it probably work in practice)

[Alex MM]

@Ninj hi!, according to the first paragraph of your explanation and also to the rem definition found in the MDN CSS length data type docu and also in the MDN font-size docu the rem unit (aka root em) is related to the root element size, which is the <html> tag. It was just to know the reason why you did it in that way, but i believe in that case both em and rem would make same result.

[Stephen M Irving]

what about this.... html { font-size: 62.5% } body { font-size: 160% } This way, you can still make 1rem == 10px, but the size of 1em still starts off the same (at 1em == 16px) in the body of the document. Best of both worlds?