<h1 class="text">font-size 3.5vw<br>- scaling fine</h1>
<h2 class="text">font-size calc(3.5vw)<br>- scaling on page load, but not on resize</h2>
<h3 class="text">font-size calc(3.5vw) & calc(6vw) >= 650px viewport width<br>- scaling on page load and recalculation on breakpoint, but not on resize</h3>
.text {
  /* Fix Safari bug with viewport units in calc() */
  min-height: 0vw;
}

h1 {
  font-size: 3.5vw;
  // font-size: calc(22px + 8 * (100vw - 750px)/ 450);
}

h2 {
  font-size: calc(3.5vw);
}

h3 {
  font-size: calc(3.5vw + 10px);
  
  @media (min-width: 650px) {
    font-size: calc(10vw);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js