Un “em” es el ancho estándar de una “eme” en cualesquiera que sea la tipografía presentada. Es una forma de establecer una relación entre la tipografía (uno de los factores sobre los que menos control se tiene) y el resto de la página.

Al usar “em” no tienes porqué controlar el tamaño de tu tipografía. El punto de un layout elástico es precisamente que ni sabes ni te importa de qué tamaño es la tipografía, sólo su relación con el resto del diseño. Si tu tienes el tamaño por defecto en 12px y yo lo tengo en 16px no debería haber diferencia en la distribución en la página.

El problema del layout elástico es otro y queda claro aquí: Es dificil de imaginar y de realizar porque es totalmente abstracto. Maneja relaciones relativas al 100% y como tal es dificil completarlo y que nos guste como funcione, porque nuestra tendencia nos dice que usemos tamaños absolutos, que nos satisfacen en la necesidad de control.

El problema realmente es max-width (no es un problema realmente, es un inconveniente estético) pero lidiar con IE es algo que ya es el pan de cada día para los que nos dedicamos a esto. Es la cruz que tenemos que pagar por no haber sabido preveer el futuro hace una década o por pensar que “no es importante” en ese momento y el recordatorio constante de porqué es importante intentar mantenerse dentro de los estándares (los pedantes al respecto hoy en día suele ser gente que se quemó hace cinco años por esto mismo).

IE por ejemplo puede al menos comportarse dentro de lo normal cuando se tiene max-width si se incluye una de sus no-estándar “expressions”:

max-width: 520px;
width: expression(this.width > 520 ? 520: true);

Quizás cuando exista un soporte más masivo para imágenes escalables (como con SVG) podría pasar a ser una opción preferencial.