Should I set the default font-size on the body or html element?
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
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.
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).