CODEWITHSUNDEEP
htmlcss
Avraam Mavridis
Avraam Mavridis

Reputation: 8920

Does the <html> contain the browser's default font-size?

I really googled a lot but I can't find a clear answer. I want to use rem which according to the specs

The rem unit is relative to the root—or the html —element.

So my question is:

Does the <html> tag's font-size attribute override the browser's default font-size? Is it reliable to set my element's rem based on that assumption?

e.g. Some users from China have set their browser's default font-size to 12px, while the users from Europe usually have 16px. I want my designs to scale correctly for both. If the <html> tag contains this setting it would be relatively easy to do scalable designs using rem.

Upvotes: 0

Views: 303

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

I may not have understood your question completely, in which case I apologise.
Anyway, I hope this helps.

1rem is equal to the font size of the html element. No matter if your stylesheet assigns a font-size to html or not.

So for example, if a user has 15px for a default font size, then a stylesheet saying

div {font-size:2rem}

will display all divs with a font size of 30px.

If, on the other hand, you have this for a stylesheet

html {font-size:12px}
div {font-size:2rem}

then 1rem will be 12px, and all divs will display at 24px, regardless of the user's default font settings.

html {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>

So if you want 1rem to remain at the user's preferred size, but still want to display most of the website at a size of your choice, the trick is to not change the font size for html, but only for body.

body {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>

Disclaimer: If you do change the html font size in your stylesheet, the user settings for "minimum font size" may mess things up.

Also note that you will only see the difference between these two snippets if your own default font size is not 12px!

Upvotes: 1

Related Questions