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

Question

I have a <h1 style="font-size:2.5vw;">Example</h1> in my HTML file. I've been testing how it looks in different viewport sizes using 'Chrome DevTools' (Google Chrome's developer tools).

I found that the header is too large compared to the rest of the content in my HTML when the device is set to 'iPad Pro' (1024x1366).

In order to resolve this issue, I was wondering if there was a way to set a maximum size for the header element whilst incorporating "font-size:2.5vw;" (I need it to still be responsive with respect to the size of the viewport)?

I tried adding max-width://size into the style field of the element, but this did not make a difference.

NOTE: My meta element looks like this: <meta name="viewport" content="initial-scale=0.41, maximum-scale=1.0" />

Answer 1

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

Answer 2

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);