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:wght@200..800&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>

Solution

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.)?