Use `rem` for Global Sizing; Use `em` for Local Sizing

Richard Rutter’s guide for setting the font-size of an element is interesting: he argues that we should use both em and rem units depending on the relationship it might have with other elements on the page:

Take the example of a pull quote containing two short paragraphs. The spacing between the paragraphs will depend on the size of the paragraph text, so you could feasibly set that spacing in either rems or ems. Should you decide during your design process that the pull quote should be set a bit larger, then the spacing between the paragraphs must also be increased. Therefore the paragraph spacing is directly related to the paragraph text size and therefore be considered local sizing within a component. Hence you should use ems in this case.

This compliments the method that Chris described a couple of years ago:

So here’s my idea: you still keep px size adjustments at the document level so you can make easy/efficient sweeping size changes. But then each module on the page has a font-size set in rem. Actual text elements (h1, h2, p, li, whatever), if you size them at all, are sized in em, and thus become relative to the module.

Breaking that up a bit: first we’d set the font-size of the document element with px:

html {
  font-size: 16px;
    
  @media screen and (min-width: 900px) {
    font-size: 18px;
  }
    
  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

Next up we’d style all our little textual elements, such as paragraphs, headings or blockquotes, with ems. This is because they share a relationship with one another:

h2 { 
  font-size: 2em;
}

pre {
  font-size: 0.8em;
}

And finally we style the modules that those bits of text sit inside with rems, so we can easily adjust all of the text within them:

.module {
  font-size: 1.1rem;
}

.another-module {
  font-size: 1.3rem;
}

...which ends up working something like this in practice:

See the Pen Em AND Rem by Chris Coyier (@chriscoyier) on CodePen.

What do we accomplish by doing this? Why can’t we just stick to rem or em to keep things simple? Well, with this method, each module instantly becomes compartmentalised and easier to style for the future. But also we can quickly adjust the font-size of every module without having to change large portions of the codebase. If we notice that the font-size of the whole website needs to be bumped up then just need to change a single value.

em and rem values are useful for two different jobs, and if we utilise them in the way in which they were designed then our work can become a bit more maintainable and flexible.