Em que se diferenciam as unidades de medida em das unidades rem?

As unidades em são relativas ao tamanho da fonte do elemento pai. Se o tamanho da fonte do pai não estiver definido explicitamente, usa a fonte do seu próprio pai e assim por diante até ao elemento raiz (html).

As unidades rem são relativas ao tamanho da fonte apenas do elemento raiz (html). Isto torna-as mais previsíveis e simplifica a gestão de fontes e tamanhos de elementos na página.

Exemplo:

HTML:

<div class="parent">
  Texto do pai
  <div class="child-em">
    Texto filho em
  </div>
  <div class="child-rem">
    Texto filho rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Tamanho base da fonte para o pai */
}

.child-em {
  font-size: 1.5em; /* Tamanho da fonte 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Tamanho base da fonte para o elemento raiz */
}

.child-rem {
  font-size: 2rem; /* Tamanho da fonte 2 * 10px = 20px */
}

Tabela comparativa:

Unidade	Relativa a quê é medida	Previsibilidade	Uso
em	Tamanho da fonte do elemento pai	Menos previsível, depende do contexto	Para margens e tamanhos de elementos que dependem do texto dentro deles
rem	Tamanho da fonte do elemento raiz (html)	Mais previsível	Para escalonamento global de fontes, margens e tamanhos de elementos na página