Use :root for Flexible Type

index.html

<div class="container">
  <h1>Use <code>:root</code> for Flexible Type</h1>
  <h2>Resize this Window 😁</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>

script.js

// Demo example for https://github.com/AllThingsSmitty/css-protips#use-root-for-flexible-type

style.css

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}
body {
  font: 1em/1.6 "Open Sans", sans-serif;
}
.container {
  padding: 0 1em
}
code {
  background: #eee;
  border-radius: 3px;
}
em {
  background: #ffeb3b;
  font-style: normal;
}
code,
em {
  padding: .1em .2em;
}
@media screen and (max-width: 45em) {
  p {
    font-size: 1.5em;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

use-root-for-flexible-type.markdown

Use :root for Flexible Type

Demo example for https://github.com/AllThingsSmitty/css-protips#use-root-for-flexible-type

A Pen by Matt Smith on CodePen.

License.