I like to work in em
s 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?
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size.
The short answer is, you can use either. Since every displayed element is a descendant of the body element, and the body element itself is the child of the html element, all elements that inherit the font-family property will happily adopt it from either.
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
The HTML <font> size Attribute is used to specify the size of text which is present inside <font> element. Attribute Values: It contains a single value number that specifies the size of the text. The font size lies between 1 to 7. The default value of font size is 3.
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).
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With