Convierte em a píxeles con cualquier tamaño del padre

El em pasa a píxeles con una sola multiplicación: el valor en em por el tamaño de fuente del elemento padre. Con el valor predeterminado del navegador ese padre tiene 16 px, así que 1em da 16 píxeles y 1,5em da 24. La unidad se refiere al tamaño de texto del elemento que la contiene [1].

La conversión sirve al leer la hoja de estilos de otra persona y querer saber cuánto mide de verdad un espaciado escrito como 0,75em. La respuesta depende del lugar del documento donde está ese espaciado, y eso es justo lo que separa al em del resto de unidades relativas.

El padre no tiene por qué medir 16 px. Dentro de una tarjeta o una tabla suele tener 14 px, y en un titular de sección 20 px o más, por eso el campo admite cualquier valor de 1 a 200.

Más abajo encontrarás una tabla con 26 valores a tres tamaños del padre, la tabla de acumulación al anidar y la regla sobre cuándo recurrir al em y cuándo al rem. El camino inverso lo cubre el convertidor de píxeles a em.

La fórmula tiene una sola operación: píxeles = em × tamaño de fuente del padre. Ese tamaño es el font-size del elemento dentro del cual está el tuyo, y si nadie lo ha cambiado el navegador usa 16 px.

Ejemplo con un espaciado de 1,25em: con un padre de 16 px sale 1,25 × 16 = 20 píxeles. Ese mismo valor dentro de una tarjeta con texto de 14 px da 17,5 píxeles, y en un titular de 20 px crece hasta 25.

Una regla merece atención. En la propiedad font-size el em se refiere al padre, pero en cualquier otra propiedad de ese mismo elemento – en padding, margin o width – se refiere al tamaño de fuente de ese elemento [2]. Un elemento con font-size: 1.5em y padding: 1em con un padre de 16 px tiene texto de 24 px y también 24 px de relleno.

La unidad rem se calcula igual, solo que siempre desde el elemento html, y por eso da el mismo resultado en todo el documento: de eso se encarga el convertidor de rem a píxeles. Esos mismos 16 píxeles son 12 puntos tipográficos en composición, lo que resuelve el convertidor de puntos a píxeles.

El em se mide contra el padre, y el padre tiene a su vez otro padre. Cuando la misma declaración font-size: 1.25em se repite en niveles sucesivos de anidamiento, cada nivel multiplica el resultado del anterior. Tras seis niveles, de 16 píxeles salen más de 61.

Se ve sobre todo en listas anidadas, en menús con submenús y en hilos de comentarios, porque ahí la estructura crea los niveles sola. La tabla de abajo muestra cada paso junto al cálculo, para que el origen de cada cifra quede a la vista.

De ahí la regla práctica: el em encaja donde un valor deba seguir al tamaño de texto de su contexto más cercano – el espacio alrededor del texto de un botón, la sangría de una lista, el ancho de un campo de formulario. Para los tamaños de texto de todo un sitio va mejor el rem, porque cuenta desde la raíz del documento y da siempre el mismo valor por muy hondo que esté el elemento.

Si buscas justo esa previsibilidad, el cálculo lo hace el convertidor de rem a píxeles, y una medida de la maqueta escrita en rem la resuelve el convertidor de píxeles a rem.