font rem vs em code example

Example 1: rem vs em

em -> is relative to the font-size of its direct or nearest parent 
rem -> is relative to the html (root) font-size

Example 2: difference between rem and em css

Explanation: If you run these code you understand differences between rem vs em
In this example, font-size of first h1 is 48px (nearest parent) and font-size 
of second h1 is 32px ( parent of page which is html)
<style>
  html {
    font-size: 32px;
  }
  .font {
    font-size: 48px;
  }
  .em {
    font-size: 1em;
  }
  .rem {
    font-size: 1rem;
  }
</style>
<body>
  <div class="font">
    <h1 class="em">Hey guys!</h1>
  </div>
  <div class="font">
    <h1 class="rem">Hey guys!</h1>
  </div>
</body>

Tags:

Misc Example

Recent Posts