Clamp explained
2021-10-29
h1 {
font-size: clamp(3rem, 5vw + 1rem, 5rem);
}There are 3 possible outcomes for the font size of this h1
Min value is 3rem, the font size will never be smaller than 3rem
Max value is 5rem, the font size will never be larger than 5rem
In between, the font size will scale, relative to the view port width between 3rem & 5rem.
When the browser window is scaled up, as soon as the calclation of 5vw + 1rem gets larger than 3rem, the font will start dynamically growing until it reaches 5rem. Then it will stop.
-
when the value of 5vw + 1rem is less than 3rem - use 3rem as the font size.
-
when the value of 5vw + 1rem is greater than 3rem - use 5vw + 1rem font size. This will be dynamically calculated.
-
when the value of 5vw + 1rem is equal to or greater than 5rem - use the 5rem font size
read more about fluid type scale here