Rubber Fonts

Previously, for font adaptability, we wrote 5 media queries for each heading. Now there's clamp().

Magic Formula

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

How to Understand?

1. 2rem: Minimum size (will never get smaller).
2. 5vw + 1rem: Desired " rubber " size (depends on screen width).
3. 4rem: Maximum threshold (won't grow larger).