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

HtmlCssFont Size

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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 - Html

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 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjoshnhView Question on Stackoverflow
Solution 1 - HtmljoshnhView Answer on Stackoverflow
Solution 2 - Htmltw16View Answer on Stackoverflow
Solution 3 - HtmlNinjView Answer on Stackoverflow