Sorry if silly question but when I was reading about rem I understood it to mean
" 1rem equals the font size of the html element". So if you set the font size in the html element to say 20px. Then you set font-size of a h1 element to 1rem and font size of p element to 1rem, why are they different? I understand that they are supposed to be different sizes, but why are they not the same since I am referencing the relative font-size of html element? Again sorry if silly question but I cant seem to understand this one.
Hi there,
rem unit help you achieve a harmonious and balanced design.
the rem units refer to the property’s initial value, This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).
consider design deep nested elements. it can be highly effective in this situation.
I read this article and it is the source of my answer:
@najame, thank you for your response, I have read that article . But I still dont understand if I have set the html font-size to 20px (or even if I dont - so default 16px) , when i set h1 font size to 1rem and p to 1 rem, why are the font sizes different on those elements?
Hi @baconsoft!
I am also a beginner and I think this is a good question. I am sure one of the professional developers on here is going to have a much better explanation for why this happens but here is my guess.
So we know there is a hierarchy in heading tags right. An h1 is going to have more importance than h2-h6. We should want to have a structure on the page. H1 is usually used for the main title where as h2-h6 is used for sub sections.
But if we get rid of that and everything is the same then where is our structure. If p tags look the same as h1 tags and h2, etc. then how can we tell the difference between a main title, versus a subsection versus a paragraph.
So that would be my best guess as to why when you set the html font-size to 20px the h1 is still going to have more importance than a p tag.
Hopefully that helps a little.
They should be exactly the same size. I would hazard a guess that you’re adjusting them without realising it somewhere else in the CSS.
Edit 
https://codepen.io/DanielCouper/pen/XWKvmVQ
That has a font size of 20px set on the html element, then a size of 1rem set on everything, everything is the same size.
@jwilkins.oboe, thanks for response. I understand there are differences to h1 and p tags. But say I wanted, for some reason, to set font size of a number different elements to exact same size relative to the font size of html element. How do I know what elements rem works on and ones it doesn’t work on? I just used h1 and p as examples because it doesn’t work when applied to them. I just want to understand the logic behind it not working…
You need to post the code, because there shouldn’t be any difference. a rem is relative to the root font size, which is the font size on the root element ( <html>). 1rem will be 16px by default, and in your case should be 20px (with a few caveats, for example input font styles need to be specified). It doesn’t matter what element you set it on, it will be 20px. The only way it won’t be that is if you have some other CSS rule overriding it.
Was this your code?
html {
font-size: 20px;
}
h1, p {
font-size: 1rem;
}
Because you mentioned that you were getting different results. When I threw it into codepen, my result looked like this.
@DanCouper, thanks for reply. I see my error. I had the font size declared in an id selector for a div.
1 Like
So then my question becomes, if I set font-size on the parent div containing the p and h1 children to 1rem. Do the p and h1 tags not ‘inherit’ this font-size of 1rem from the parent div? Or do they revert back to html default of 16 px? What is the mechanism at work here?