fluid typography

base.css

/* Fluid typography with 16-24px font size range based on the width of the viewport */
/* reference - https://css-tricks.com/snippets/css/fluid-typography/ */

:root {
  --min-content-width: 320;
  --max-content-width: 1600;
  
  --min-font-size: 16;
  --max-font-size: 24;
}

body {
  font-size: 1rem;

  @media screen and (min-width: 20em) {
    font-size: calc(
      var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) *
        (100vw - var(--min-content-width) * 1px) /
        (var(--max-content-width) - var(--min-content-width))
    );
  }

  @media screen and (min-width: 70em) {
    font-size: 1.375rem;
  }
}