<div class="container">
  <p>
    The root elements's size is set to 100%, which means that it gets the default font size from the browser, which is usually <code>16px</code>. Change the value of the <code>html</code> element's font size to see how all elements on the page will be affected by its value.
  </p>
  <h1>This headline is 2.5 times the size of the root element.</h1>
  <ul>
    <li>These items are 1.5 times the size of the root element</li>
    <li>These items are 1.5 times the size of the root element</li>
    <li>These items are 1.5 times the size of the root element</li>
    <li>
      These items are 1.5 times the size of the root element
      <ul>
        <li>These sub-items are 1.5 * the size of their parent, using <code>em</code>s as the length unit.</li>
        <li>These sub-items are 1.5 * the size of their parent, using <code>em</code>s as the length unit.</li>
        <li>These sub-items are 1.5 * the size of their parent, using <code>em</code>s as the length unit.</li>
      </ul>
    </li>

    <li>These items are 1.5 times the size of the root element</li>
  </ul>
</div>
html {
  font-size: 100%;
  /* 16px in most browsers */
}

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.4;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 50px;
  max-width: 1000px;
}

h1 {
  font-size: 2.5rem;
}

li {
  font-size: 1.5rem;
}

li li {
  font-size: 1.5em;
}