Fluid font-size not working. Conflict with css reset "font: inherit;". Why?

Question

I want to use a fluid font-size with code from https://css-tricks.com/snippets/css/fluid-typography/ . But my CSS Meyer Reset (font: inherit;) seems to override the code. I don't know why? Here is the code:

The CSS Reset css:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;

}

Later code in the css stylesheet to get a fluid font-size between 16px and 40px;

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  :root {
    font-size: calc(16px + (40 - 16) * ((100vw - 320px) / (1000 - 320)));
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 40px;
  }
}

Then when I inspect in the browser at say 700px browser size the latter css fluid code is overwritten by the "font: inherit;" in the CSS Reset code. Therefore it does not seem to work with the fluid code. Any ideas? Is it working or not?

Picture. Inspection tool in browser shows that the latter code is not active?

The fluid font code works but it confuses me that the inspector tool shows that it does not get applied and only shows that the reset css font:inherit gets applied. Why?

Answer 1

MDN: inherit

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element.

So if the css rule of the media query is applied to :root and its descendants all have font: inhert they will inherit the font settings from :root

If all element (like p) wouldn't have font-size set to inherit but instead would have the computed value, then you could not change the font size of a certain element and let those settings propagate to its descendants, but you would need to set it on each of the descendants too. So having the font-… properties set to inherit is the intended behavior.

Here the font-size is applied to each element directly, if you change the font size of p it does not apply for span:

* {
  font-size: 20px;
}

p {
  font-size: 10px;
}

<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>

On the other hand, if font-size is inherit, so if you set the font-size it will propagate to the children.

* {
  font-size: inherit;
}

div {
  font-size: 20px;
}


p {
  font-size: 10px;
}

<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>