Jacob Tomlinson's profile picture Jacob Tomlinson
Home Blog Talks Newsletter About

Quick Tip - em vs rem

1 minute read #quick-tips, #em, #rem

em and rem are used in CSS to set a size value relative to a font-size. This is useful in many situations such as increasing the font size relatively across your whole website by changing one value or adding padding which is larger or smaller depending on the font size.

em

em means relative to the font size of the parent DOM element. Therefore if you nest divs with a font-size of 0.75em the font will get increasingly smaller inside each nested div.

<style>
html {
  font-size: 1em;
}

div {
  font-size: 0.75em;
}
</style>

<div>
  Small
  <div>
    Smaller
    <div>
      Smallest
    </div>
  </div>
</div>

rem

rem means relative to the font-size of the root html element. Therefore nesting divs with a font-size of 0.75rem will keep the same font size despite the nesting level.

<style>
html {
  font-size: 1em;
}

div {
  font-size: 0.75rem;
}
</style>

<div>
  Small
  <div>
    Not Smaller
    <div>
      Still the same size
    </div>
  </div>
</div>

Have thoughts?

I love hearing feedback on my posts. You should head over to Twitter and let me know what you think!

Spotted a mistake? Why not suggest an edit!