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