What Does Font-size: 100% On The Html Element Do?

I am in the process to start a new project. I am asking myself: Why should I add font-size: 100% on the html element when I am using the em unit anyway? What does this 100% to -

Solution 1:

font size 100% on html is equal to browsers default font size, which can be 14px or 16px.

Solution 2:

There are many types of declaring the font-size as the same value for the browser.

1. font-size: 1em;

2. font-size: 100%;

3. font-size: 16px; // this is default

This way, you can get the default font-size. But note that 16 px will alter the font-size, however em and % will depend on the font-size used in the body tag.

Fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/5Wkus/

So you'll see, em depends totally on the font-declared in body. Or you can say, it runs from child to parent. It keeps looking for the font-size change in the nearest parent. Which in most cases directs the code to the body element or the user agent default stylesheet.