oh i didnt know u were supporting ie8, i just figured u werent, i might have to go back through for ie8 support

rem is different from em because its always relative to the page basefont, so if it's 16px, 1rem always equals 16px, versus em which is relative to its parent font, so lets take an example

.parent {
  font-size: 20px;
  .child {
    font-size: 1.5em; // 30px = parent font * 1.5;
    font-size: 1.5rem; // 24px = basefont(16) * 1.5;
  }
}