Cuando especifica line-height como em, es una función del tamaño de fuente actual, incluso si las fuentes / tamaños cambian dentro del elemento para el que define la altura de línea. Para las alturas de línea en px, esto no es cierto.
Por ejemplo:
Este es el encabezado
Este es el paragaraph
Caso 1: altura de línea en px
Supongamos que ha establecido la altura de línea en 20 píxeles para un tamaño de fuente de 14 píxeles. Ahora el párrafo tendrá un tamaño de fuente de 14 px y una altura de línea de 20 px. Sin embargo, el elemento h1, que tendrá un tamaño de fuente más grande, digamos 18px, también tendrá una altura de línea de 20px. Esto se verá mal.
Caso 2: altura de línea en em
Supongamos que ha establecido la altura de línea como 1.5em para un tamaño de fuente de 14px. Ahora el párrafo tendrá una altura de línea de 21 px y el elemento h1 que tiene un tamaño de 18 px tendrá una altura de línea de 27 px. Esto permite que su documento respire y también aporta cierta simetría sin que se esfuerce demasiado.
Si todos sus tamaños de fuente y alturas de línea están en em, su página mantiene bien el ritmo [1]. Incluso cuando los usuarios cambian el tamaño de las fuentes usando Ctrl + o equivalentes.
[1]: http://drewish.com/tools/vertica…