title: Responsive typography - text too small
body: <p>I'm trying to make my typography responsive but I think I'm doing something wrong.
  Why is the text-size so small at 90% and 80%?</p>
  
  <pre><code>body {
      font-size: 100%;     /* flexible baseline */
      font-size: 1.375em;  /* 22px */
      line-height: 1.4;
  }
  
  @media (max-width: 899px) {
      body {
          font-size: 90%;
      }
  }
  
  @media (max-width: 480px) {
      body {
          font-size: 80%;
      }
  }
  </code></pre>
  
  <p>100%</p>
  
  <p><img src="https://i.stack.imgur.com/cKWFr.png" alt="enter image description here"></p>
  
  <p>90%</p>
  
  <p><img src="https://i.stack.imgur.com/N8jZI.png" alt="enter image description here"></p>
  
  <p>80%</p>
  
  <p><img src="https://i.stack.imgur.com/e4vYO.png" alt="enter image description here"></p>