<h1 class="clamp">
  Text relative to container width
</h1>

body {
  background-image: linear-gradient(320deg, dodgerblue 0%, cornflowerblue 70%);
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: navy;
}

.clamp {
  font-size: clamp(1rem,2.5vw, 3rem);
  transition: font-size 250ms linear;
}