Fluid Type Scale H1 @ 93px

Fluid Type Scale H1 @ 93px

* Updated 5/16/20 Based on 1200 wide

** Typography Generator:  https://websemantics.uk/tools/responsive-font-calculator/

/* --------------- Fluid Typography ------------------
-----per css tricks article:   https://css-tricks.com/snippets/css/fluid-typography/ --------------------------------- */


/* Calculation --------------------------------------------------
font-size: calc(min font size in px + (max font size DO NOT INCLUDE PX - min font size NO PX) * ((100vw - min viewport width px) / (max minus min viewport width no px)));

Tells the browser to stop scaling at this width. Should be the same number as the max - min viewport width above but should include px).
@media (min-width: 1200px) {
  h1 {
    font-size: 93px;
  }
}
*/



/* ========== Per H1 font, this scales the font-size from a minimum of 32px (at a 320 viewport) to a maximum of 93px (at a 1200px viewport). 
==================================================================== */



/* Based on Min Font Size 1.125 Major Second Scale and Max Font Size 1.333 Perfect Fourth */


body {
  font-size: 22px;
}

@media (min-width: 320px) {
  body {
  font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (880)));
  }
}

@media (min-width: 1200px) {
  body {
  font-size: 22px;
  } 
}

@media (min-width: 320px) {
    h1 {
  font-size: calc(35px + (93 - 35) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h1 {
    font-size: 93px;
  }
}

@media (min-width: 320px) {
    h2 {
  font-size: calc(31px + (69 - 31) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h2 {
    font-size: 69px;
  }
}

@media (min-width: 320px) {
    h3 {
  font-size: calc(28px + (52 - 28) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h3 {
    font-size: 52px;
  }
}

@media (min-width: 320px) {
    h4 {
  font-size: calc(25px + (39 - 25) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h4 {
    font-size: 39px;
  }
}

@media (min-width: 320px) {
    h5 {
  font-size: calc(22px + (29 - 22) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h5 {
    font-size: 29px;
  }
}

@media (min-width: 320px) {
    h6 {
  font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (880)));
        }
  }

@media (min-width: 1200px) {
  h6 {
    font-size: 22px;
  }
}