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

See it in action here

Home|Blog|Tolka WP Theme|Tolka Gatsby Starter|Nuxt demo|

Built with Gatsby