Em

Definición Formal

El em es una unidad de medida relativa en tipografía igual al tamaño de fuente actual. Si el tamaño de fuente es de 16 píxeles, entonces 1 em = 16 píxeles. Si el tamaño de fuente es de 12 puntos, entonces 1 em = 12 puntos. El em es único entre las unidades tipográficas porque no tiene un tamaño fijo: se escala proporcionalmente con el texto que describe. Esto lo hace invaluable para crear sistemas tipográficos armoniosos y escalables.

En CSS, la unidad em hereda del tamaño de fuente computado del elemento (o de su padre, para la propiedad de tamaño de fuente). Esto significa que los valores em se acumulan: si un elemento padre tiene tamaño de fuente: 1.2em y un elemento hijo también tiene tamaño de fuente: 1.2em, el tamaño de fuente del hijo es 1.2 × 1.2 = 1.44 veces el tamaño del abuelo. Este comportamiento en cascada es tanto la mayor fortaleza del em (para escalado proporcional) como su mayor fuente de complejidad.

Definición Histórica vs. CSS

Históricamente, en tipos metálicos, el em se definía como el ancho de la letra mayúscula M en una tipografía dada, de ahí su nombre. Sin embargo, en la tipografía digital moderna y CSS, el em se define puramente por el tamaño de fuente, no por el ancho de ningún carácter en particular. En la mayoría de las tipografías, la M mayúscula es más estrecha que un em. Un concepto relacionado pero distinto es el em-dash (—), que nominalmente tiene un ancho de un em, y el em-space, que es un em de espacio horizontal.

La Letra M

El término "em" deriva de la letra mayúscula M. En la impresión temprana, la M mayúscula era aproximadamente tan ancha como el cuerpo del tipo era alto, lo que la convertía en una referencia natural para el cuadrado del tamaño del tipo. Un bloque de metal tipográfico para la letra M en un tamaño dado era aproximadamente cuadrado (ancho igual a altura), y este cuadrado se conoció como el "em quad" o simplemente el "em." Así, el em se convirtió en sinónimo del tamaño en puntos del tipo.

El término "en" (la mitad de un em) también deriva de la letra N, que en muchas tipografías es aproximadamente la mitad de ancha que el em. El en-dash (--) es la mitad del ancho del em-dash (---), y un en-space es la mitad del ancho de un em-space.

De Tipografía Metálica a Digital

En la composición tipográfica metálica, el em tenía un significado muy concreto y físico: era el tamaño del cuerpo del tipo, medido en puntos. Un em de tipo de 12 puntos era 12 puntos cuadrados. Las fundiciones tipográficas fundían em-quads (piezas cuadradas de metal tipográfico utilizadas para espaciado) y en-quads (espacios de media em) como material estándar de espaciado. Cuando la tipografía digital emergió, el em fue abstraído de sus orígenes físicos pero mantuvo su significado proporcional.

Era de la Composición Tipográfica Metálica

El em se originó en la era del tipo metálico móvil (desde la prensa de Gutenberg alrededor de 1440 en adelante). En el tipo metálico, cada carácter se fundía en un cuerpo rectangular de un tamaño de punto específico. El em era el ancho del cuadrado más grande que podía caber en este cuerpo, esencialmente, el tamaño de punto expresado como un ancho. Los compositores de tipos utilizaban em-quads (piezas en blanco de metal tipográfico de un em de ancho) y en-quads (de media em de ancho) para crear espacios entre palabras y párrafos. El em-dash y el en-dash eran troqueles cortados a estos anchos.

Fotocomposición

Cuando la fotocomposición reemplazó al tipo metálico en las décadas de 1960 y 1970, el em perdió su representación física como un bloque de metal pero mantuvo su significado como una unidad igual al tamaño en puntos. Las máquinas de fotocomposición medían los anchos de los caracteres en fracciones de em (típicamente 18 o 54 unidades por em), permitiendo un control preciso del espaciado entre letras y palabras.

CSS y la Web

El em entró en el diseño web con la especificación CSS 1.0 en 1996, que definió el em como una unidad relativa al tamaño de fuente del elemento. Esto convirtió al em en una herramienta poderosa para el diseño responsivo: al establecer tamaños de fuente base en píxeles y luego usar ems para todas las demás medidas, los diseñadores podían crear diseños que se escalaban proporcionalmente cuando el tamaño base cambiaba. La posterior introducción de la unidad rem (root em) en CSS 3 abordó el problema de la acumulación al referirse siempre al tamaño de fuente del elemento raíz.

En CSS y Diseño Web

El em es una de las unidades más importantes en CSS. Se utiliza para tamaños de fuente, márgenes, rellenos, alturas de línea y puntos de ruptura de consultas de medios. Usar ems para el espaciado crea relaciones proporcionales que mantienen la armonía visual cuando se redimensiona el texto. Los defensores de la accesibilidad recomiendan el tamaño de fuente basado en em porque respeta la configuración de tamaño de fuente predeterminada del navegador del usuario.

En Diseño Responsivo

Las consultas de medios basadas en em crean puntos de ruptura que responden a las preferencias de tamaño de texto del usuario. Un punto de ruptura a 48em se activa a diferentes anchos de píxeles dependiendo del tamaño de fuente predeterminado del usuario, asegurando que los cambios de diseño ocurran cuando el contenido ya no se ajusta cómodamente en lugar de en anchos de píxeles arbitrarios. Los principales frameworks CSS y sistemas de diseño (incluidos Bootstrap y Material Design) utilizan ems o rems para muchas de sus medidas.

En Tipografía Tradicional

En la tipografía impresa, el em continúa definiendo el espaciado proporcional. Un em-space (el espacio estándar más ancho) tiene un ancho de un em. Un em-dash abarca un em. La sangría de la primera línea de un párrafo es tradicionalmente de un em. Los diseñadores de tipos definen las métricas de los caracteres (ancho de avance, valores de kerning, márgenes laterales) en unidades por em: el estándar TrueType utiliza 2,048 unidades por em, y el estándar CFF/OpenType utiliza 1,000 unidades por em.

Tamaño de Texto en Navegadores Web

La mayoría de los navegadores web tienen un tamaño de fuente predeterminado de 16px, haciendo que 1em = 16px por defecto. Cuando los usuarios ajustan el tamaño de fuente predeterminado de su navegador (por accesibilidad o preferencia), los diseños basados en em se escalan en consecuencia. Esto hace que los ems sean esenciales para crear sitios web accesibles. Un tamaño de fuente de 1.125em (18px en configuraciones predeterminadas) proporciona un texto de cuerpo ligeramente más grande y legible.

Diseño de Correo Electrónico

Las unidades em se utilizan en el diseño de correos electrónicos para tamaños de fuente y espaciado. Dado que los clientes de correo electrónico varían ampliamente en su representación de CSS, los ems proporcionan una forma relativamente confiable de especificar tamaños proporcionales. Los diseñadores de correos electrónicos a menudo utilizan ems para el relleno de botones, tamaños de encabezados y espaciado para asegurar consistencia entre diferentes clientes de correo electrónico.

Software de Tipografía

El software de diseño de fuentes (Glyphs, FontForge, RoboFont) trabaja extensamente con unidades em. Las métricas de glifos —el ancho de avance de cada carácter, la altura de los ascendentes y descendentes, y las posiciones de los puntos de control— se definen en unidades por em. Un diseñador que trabaja en una tipografía constantemente piensa en términos de fracciones del em para lograr proporciones consistentes entre todos los caracteres.

En Lingüística Computacional

El procesamiento de lenguaje natural y la lingüística computacional a veces hacen referencia al em como una unidad al analizar el diseño y formato de texto. Los estudios de patrones de lectura, densidad de texto y arquitectura de información miden el espaciado en ems porque las medidas basadas en em son independientes del tamaño absoluto del tipo.

En Interacción Humano-Computadora

La investigación de HCI sobre diseño de interfaces utiliza ems al estudiar los efectos del escalado tipográfico en la usabilidad. Los tamaños objetivo para interfaces táctiles, los tamaños de texto mínimos para legibilidad y el espaciado óptimo para pantallas densas en datos a veces se expresan en ems para crear pautas independientes de resolución.

En Ingeniería de Fuentes

El em es la unidad fundamental en la ingeniería de fuentes. El valor UPM (unidades por em) define el sistema de coordenadas dentro del cual se dibujan todos los contornos de glifos. Las fuentes OpenType y TrueType definen cada punto de control, ancho de avance, par de kerning y métrica vertical en unidades em. Esto permite que la fuente se renderice a cualquier tamaño mientras se mantienen relaciones proporcionales precisas entre los caracteres.