VW and Calc responsive text

by ian_smithz

HTML

<p>Using calc in combination with vw and vh units for font-size to create text that always fills the viewport. No matter what ratio.</p>

CSS

body {
  color: slategray;
  font-family: 'Abril Fatface';
  line-height: 1.2;
}

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
  /* See:
   * https://codepen.io/CrocoDillon/pen/jgmwt
   * For some math behind this
   */
}