Use rem for Global Sizing; Use em for Local Sizing

After setting the base font size at the root (html { font-size: 100%; }), set the font size for textual elements to em:

  1. h2 {
  2.   font-size: 2em;
  3. }
  5. p {
  6.   font-size: 1em;
  7. }

Then set the font-size for modules to rem:

  1. article {
  2.   font-size: 1.25rem;
  3. }
  5. aside .module {
  6.   font-size: .9rem;
  7. }

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.