Use :root for Flexible Type

The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root:

  1. :root {
  2. font-size: calc(1vw + 1vh + .5vmin);
  3. }

Now you can utilize the root em unit based on the value calculated by :root:

  1. body {
  2. font: 1rem/1.6 sans-serif;
  3. }

Demo