How to set the maximum size for a <h1> element?

What you are looking for is clamp

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }

<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

CSS does not have a built-in way for doing max-font-size or min-font-size, but some work-arounds does the job.

One way is using media queries:

h1 {
  font-size: 30px;
}
@media screen and (min-width: 1600px) {
  h1 {
     font-size: 50px;
  }
}

Another way is using max() or min() functions with the viewport vw unit:

font-size: min(max(30px, 3vw), 50px);