Responsive fonts

CSS #

h1 {
   font-size: 2.488rem;
}

h2 {
   font-size: 2.074rem;
}

h3 {
   font-size: 1.728rem;
}

h4 {
   font-size: 1.44rem;
}

h5 {
   font-size: 1.2rem;
}

h6 {
   font-size: 1rem;
}

@media (min-width: 48em) {
   h1 {
      font-size: calc(2.488rem + ((1vw - 0.48rem) * 0.7833));
      min-height: 0vw;
   }

   h2 {
      font-size: calc(2.074rem + ((1vw - 0.48rem) * 0.5097));
      min-height: 0vw;
   }

   h3 {
      font-size: calc(1.728rem + ((1vw - 0.48rem) * 0.3125));
      min-height: 0vw;
   }

   h4 {
      font-size: calc(1.44rem + ((1vw - 0.48rem) * 0.1708));
      min-height: 0vw;
   }

   h5 {
      font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.0694));
      min-height: 0vw;
   }

   h6 {
      font-size: calc(1rem + ((1vw - 0.48rem) * 0));
      min-height: 0vw;
   }
}

@media (min-width: 120em) {
   h1 {
      font-size: 3.052rem;
   }

   h2 {
      font-size: 2.441rem;
   }

   h3 {
      font-size: 1.953rem;
   }

   h4 {
      font-size: 1.563rem;
   }

   h5 {
      font-size: 1.25rem;
   }

   h6 {
      font-size: 1rem;
   }
}