h1 {
  font-size: 26px;
}

@media (min-width: 480px) and (max-width: 1200px) {
  h1 {
    font-size: calc( 26px + (50 - 26) * ( (100vw - 480px) / ( 1200 - 480) ));
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 50px;
  }
}
h2 {
  font-size: 20px;
}

@media (min-width: 480px) and (max-width: 1200px) {
  h2 {
    font-size: calc( 20px + (28 - 20) * ( (100vw - 480px) / ( 1200 - 480) ));
  }
}
@media (min-width: 1200px) {
  h2 {
    font-size: 28px;
  }
}
h3 {
  font-size: 16px;
}

@media (min-width: 480px) and (max-width: 1200px) {
  h3 {
    font-size: calc( 16px + (18 - 16) * ( (100vw - 480px) / ( 1200 - 480) ));
  }
}
@media (min-width: 1200px) {
  h3 {
    font-size: 18px;
  }
}
body {
  font-size: 12px;
}

@media (min-width: 480px) and (max-width: 1200px) {
  body {
    font-size: calc( 12px + (16 - 12) * ( (100vw - 480px) / ( 1200 - 480) ));
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 16px;
  }
}
.small-text {
  font-size: 11px;
}

@media (min-width: 480px) and (max-width: 1200px) {
  .small-text {
    font-size: calc( 11px + (13 - 11) * ( (100vw - 480px) / ( 1200 - 480) ));
  }
}
@media (min-width: 1200px) {
  .small-text {
    font-size: 13px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.