CSS - Text scaling with VH and VW value based on the width and height of the window

Question

I have a responsive element with width and height that adapt to the browser window while maintaining the aspect ratio. inside I have a text with VH units (viewport Height) and I would like it to always adapt to the resizing of the window so that it always remains proportionate.

My script works fine at vertical scaling but not at horizontal scaling. can you help me? Thank you.

here you can find my example: JSFiddle example

HTML

<section>
  <div class="stagez" style="
        --r: 2000 / 2200;
        aspect-ratio: var(--r);
        width:min(90%, min(2200px, 90vh*(var(--r))));
    ">
    <div class="text_text">TEST</div>
  </div>
</section>

CSS

html, body {
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  display: block;
  margin:0px;
  padding:0px;

}

.stagez {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(30deg, red 50%, transparent 50%), chocolate;
}


.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  font-size: 10vh;
  line-height: 10vh;
}

Answer 1

I think you can change the font-size to vmin, this will change the font-size based on the smaller length after comparing window's width and height

font-size: 10vmin;
line-height: 1;