¿En qué se diferencian las unidades de medida em de las unidades rem?

Las unidades em son relativas al tamaño de fuente del elemento padre. Si el tamaño de fuente del padre no está establecido explícitamente, se usa la fuente de su propio padre y así sucesivamente hasta el elemento raíz (html).

Las unidades rem son relativas al tamaño de fuente solo del elemento raíz (html). Esto las hace más predecibles y simplifica la gestión de fuentes y tamaños de elementos en la página.

Ejemplo:

HTML:

<div class="parent">
  Texto del padre
  <div class="child-em">
    Texto hijo em
  </div>
  <div class="child-rem">
    Texto hijo rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Tamaño base de fuente para el padre */
}

.child-em {
  font-size: 1.5em; /* Tamaño de fuente 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Tamaño base de fuente para el elemento raíz */
}

.child-rem {
  font-size: 2rem; /* Tamaño de fuente 2 * 10px = 20px */
}

Tabla comparativa:

Unidad	En relación a qué se mide	Predicibilidad	Uso
em	Tamaño de fuente del elemento padre	Menos predecible, depende del contexto	Para márgenes y tamaños de elementos que dependen del texto dentro de ellos
rem	Tamaño de fuente del elemento raíz (html)	Más predecible	Para escalado global de fuentes, márgenes y tamaños de elementos en la página