<div class="container">
  <h1>Use <code>:root</code> for Flexible Type</h1>
  <h2>Resize this Window <span role="img" aria-label="beaming face with smiling eyes">😄</span></h2>
  <p>Now that you've set the <code>:root</code> pseudo-class to calculate <code>font-size</code> based on <a href="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/">viewport height and width</a>, the body will utilize the root <code>em</code> that's based on the value calculated by <code>:root</code>. <em>Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?</em></p>
  <p>Sugar plum cake apple pie sweet fruitcake lemon drops gingerbread. Tart icing topping apple pie chupa chups jelly-o chupa chups ice cream. Jelly-o pie chocolate bar lollipop donut.</p>
  <p>Powder tiramisu dessert. Chocolate cake marzipan topping. Biscuit croissant gummi bears topping gingerbread cotton candy bonbon cupcake cake.</p>
  <p>Chocolate carrot cake jelly dragée. Sugar plum candy canes tiramisu. Chocolate marshmallow tootsie roll cake cake. Sweet gingerbread pudding lollipop tootsie roll pastry.</p>
</div>
:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

body {
  font: 1rem/1.6 "Open Sans", sans-serif;
}

.container {
  padding: 0 1em
}

em {
  background-color: #ffeb3b;
  font-style: normal;
  padding: .1em .2em;
}

@media screen and (max-width: 45em) {
  p {
    font-size: 1.5em;
  }
}
// Demo example for https://github.com/AllThingsSmitty/css-protips#use-root-for-flexible-type

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans
  2. https://gitcdn.xyz/repo/AllThingsSmitty/10378fa8d1ad6279af58754751802231/raw/75e00dec2b49aa3e324e97dc26c35c6aa3bbcfce/code-highlight.css

External JavaScript

This Pen doesn't use any external JavaScript resources.