CODEWITHSUNDEEP
cssfont-size
yossi
yossi

Reputation: 3164

in css, How come that 1rem is smaller than the root?

In this code the <a> keeps its original 30px size with the 1rem that is applied using the .a (As it should).
but the <h2> turns smaller.

why?

@import url('https://fonts.googleapis.com/css2?family=Assistant:[email protected]&family=Bellefair&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 30px;
}

.a {
  font-size: 1rem;
}

a {
  font-family: Assistant;
}

h2 {
  font-family: Bellefair;
}
<h2>some text</h2>
<a href="/">some text</a>

<h2 class="a">some text</h2>
<a class="a" href="/">some text</a>

Upvotes: 1

Views: 170

Answers (2)

Johannes
Johannes

Reputation: 67778

As you wrote correctly, 1rem is what you defined as the size for html. But that doesn't mean that ALL font sizes in all elements are set to that size. A lot of the other elements' font sizes will be relative to that rem size, especially those of the headers h1 to h6. So if you want the same font-size for h2, you need to add font-size: 1rem to your h2 rule.

Addition: Plus, as someone else already wrote, different fonts with the same px-size value can look different, one seeming a little bit smaller/larger than the other. See for example https://en.wikipedia.org/wiki/Typeface_anatomy just to get a short impression of the many different aspects in font design.

ADDITION:

I tried to add this as a comment after the "why one element is affected by the html rule and others don't?" question of the OP, but it's too long for a comment, so i add it here:

All elements are affected. But they are not set to the value you define as 1rem, but to values relative to that: Default browser styles usually are defined in em units, which is similar. So if the default browser font-size setting for h2 is 1.5em (which is often the case) and the font-size for html is set to 30px, the h2's font-size would result to be 45px.

However, if the website's own stylesheet contains a font-size setting for h2, it depends whether this setting uses px or em or rem as a unit: px will be absolute (i.e. remain independent of rem), em will be relative to the initial setting for the particular element (which might be based on the setting for html or p, but not necessarily), and rem will be relative to the setting for html.

And again, if you use different fonts for the elements, they might look as if they have a different size although they have the same px size due to the font design (see link above).

Here are two additional links to further details: About the difference between em and rem: How does rem differ from em in CSS? , and about browser default font-sizes: What are the default font sizes (in pixels) for the html heading tags (<h1>, <h2>, <h3>, etc.)?

Upvotes: 2

Lajos Arpad
Lajos Arpad

Reputation: 76943

h2 is a heading element and it is supposed to be greater in size than normal text. So, when we get a certain font-size, then it looks like this:

html {
  font-size: 30px;
}
<h2>This is a heading</h2>
This is some text

So, when you apply a font-size on html, then it means different sizes when it is to be applied for a normal text element, such as an anchor or when it needs to be bigger, such as a heading. This is where the difference is stemming from: the first h2 is bigger than the font-size because it's a heading, the second will have the html's font-size because you explicitly say so.

Whereas in the case of the anchor it makes no difference whether it has a font-size of 30px defined for the html or you override it with 1rem, which means the same.

In short: the difference is between allowing the first heading to behave like a heading in comparison to html, that is, allowing it to behave in its normal manner, while overriding the behavior for the second heading.

Upvotes: 1

Related Questions