title: What is the difference between setting font-size in the body and in the html elements of a web page?
body: <p>In my application I set the text size like this:</p>
  
  <pre><code>html {
  font-size: 58%;
  font-family: Arial, Helvetica, sans-serif;
  /* font-size: 1.5rem; */
  }
  
  body {
  font-size: 1.5rem;
  }
  </code></pre>
  
  <p>This results in this size of font when I inspect some text:</p>
  
  <pre><code>font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  </code></pre>
  
  <p>However I tried this:</p>
  
  <pre><code>html {
  font-size: 58%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  }
  </code></pre>
  
  <p>Now the result is much larger text. </p>
  
  <p>Can someone help explain to me should I use the HTML element or the BODY element to set my base font size. Note that all of the application sets everything in rem units. I just want to do this the correct way so it will adapt well also to different media sizes later on. </p>