68

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?

4
  • 3
    On an unrelated note, why 100.01%? If I remember correctly, it fixes a bug that's present in only some old version of Opera that isn't even used anymore.
    – thirtydot
    Aug 2, 2011 at 0:13
  • 1
    @thirtydot: It was a way to compensate for older versions of opera and safari rounding errors, whereby they would render 100% as either too small or too big.
    – tw16
    Aug 2, 2011 at 0:31
  • @tw16 So I assume it is no longer needed? What version of Opera?
    – joshnh
    Aug 2, 2011 at 1:57
  • 5
    I think we are talking like Opera 5/6! It was a long time ago.
    – tw16
    Aug 2, 2011 at 2:21

3 Answers 3

60

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).

3
  • 3
    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. Sep 30, 2012 at 17:54
  • 3
    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.
    – BoltClock
    Oct 4, 2013 at 11:08
  • 2
    i would be grateful if there was a provided example.
    – armen
    Aug 1, 2014 at 6:35
29

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.

5
  • 1
    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.
    – nvreez
    Dec 2, 2014 at 15:00
  • 1
    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.
    – Ninj
    Apr 16, 2015 at 10:20
  • 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!
    – Alex MM
    May 21, 2016 at 12:53
  • @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)
    – Ninj
    May 23, 2016 at 9:28
  • @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.
    – Alex MM
    May 24, 2016 at 17:33
27

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
9
  • 6
    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.
    – joshnh
    Aug 2, 2011 at 2:00
  • 2
    @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.
    – tw16
    Aug 2, 2011 at 2:19
  • 7
    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?
    – bernk
    Mar 21, 2013 at 13:22
  • 7
    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."
    – notapatch
    Feb 7, 2014 at 11:09
  • 2
    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? Jan 5, 2020 at 22:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.