CSS-Tricks Article

Fluid Typography

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


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

/* 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: 1920px) {
  h1 {
    font-size: 67px;
  }
}
*/

body {
  font-size: 18px;
}

@media (min-width: 320px) {
  body {
  font-size: calc(18px + (21 - 18) * ((100vw - 320px) / (1600)));
  }
}

@media (min-width: 1920px) {
  body {
  font-size: 21px;
  } 
}
h1 {
  font-size: 29px;
}

@media (min-width: 320px) {
    h1 {
  font-size: calc(29px + (67 - 29) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h1 {
    font-size: 67px;
  }
}

h2 {
  font-size: 26px;
}

@media (min-width: 320px) {
    h2 {
  font-size: calc(26px + (51 - 26) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h2 {
    font-size: 51px;
  }
}

h3 {
  font-size: 23px;
}

@media (min-width: 320px) {
    h3 {
  font-size: calc(23px + (38 - 23) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h3 {
    font-size: 38px;
  }
}

h4 {
  font-size: 20px;
}

@media (min-width: 320px) {
    h4 {
  font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h4 {
    font-size: 28px;
  }
}

h5 {
  font-size: 18px;
}

@media (min-width: 320px) {
    h5 {
  font-size: calc(18px + (21 - 18) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h5 {
    font-size: 21px;
  }
}

h6 {
  font-size: 16px;
}

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

@media (min-width: 1920px) {
  h6 {
    font-size: 16px;
  }
}



==================== Or =====================
/* ----------------------------------------
      Fluid Typography
----------------------------------------- */

body {
  font-size: 16px;
}

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

@media (min-width: 1920px) {
  body {
  font-size: 20px;
  } 
}

h1 {
  font-size: 67.34px;
}

@media (min-width: 320px) {
    h1 {
  font-size: calc(28.833px + (67.34 - 28.833) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h1 {
    font-size: 67.34px;
  }
}

h2 {
  font-size: 50.517px;
}

@media (min-width: 320px) {
    h2 {
  font-size: calc(26px + (50.517 - 25.629) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h2 {
    font-size: 50.517px;
  }
}

h3 {
  font-size: 37.897px;
}

@media (min-width: 320px) {
    h3 {
  font-size: calc(23px + (37.897 - 22.781) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h3 {
    font-size: 37.897px;
  }
}

h4 {
  font-size: 28.43px;
}

@media (min-width: 320px) {
    h4 {
  font-size: calc(20px + (28.43 - 20.25) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h4 {
    font-size: 28.43px;
  }
}

h5 {
  font-size: 21.328px;
}

@media (min-width: 320px) {
    h5 {
  font-size: calc(18px + (21.328 - 18) * ((100vw - 320px) / (1600)));
        }
  }

@media (min-width: 1920px) {
  h5 {
    font-size: 21.328px;
  }
}

h6 {
  font-size: 16px;
}

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

@media (min-width: 1920px) {
  h6 {
    font-size: 16px;
  }
}