Tamaños ópticos: por qué el texto pequeño necesita formas distintas

Un tamaño óptico es una versión de un tipo de letra dibujada para el tamaño al que se usará realmente: las versiones para tamaños pequeños reciben trazos más robustos, una altura x mayor, aperturas más abiertas, un espaciado más holgado y un detalle simplificado, mientras que las versiones para tamaños grandes reciben un contraste más fino y un ajuste más ceñido. Un solo contorno estirado por todos los tamaños —lo habitual en digital durante décadas— es un compromiso en ambos extremos: un poco demasiado delicado en tamaños de leyenda, un poco demasiado tosco en tamaños de display.

Durante la mayor parte de la historia de la tipografía esta adaptación no era una función; era física. Este artículo forma parte de nuestra guía de tipografía; trata de dónde vienen los tamaños ópticos, qué restaura el moderno eje opsz y qué hacer cuando tu fuente no lo tiene, que sigue siendo el caso más común.

¿Por qué el tipo de metal cortaba formas distintas para cada tamaño?

Un tipo de letra de metal no era un archivo. Eran gabinetes de letras físicas, cortadas y fundidas por separado para cada tamaño; durante la mayor parte de esa historia no había forma de escalar una letra de 12 puntos hasta convertirla en una de 6, así que cada tamaño se dibujaba a mano. Los grabadores de punzones aprovecharon bien esa necesidad: el corte de 6pt de un tipo tenía formas de letra más anchas, menos contraste de trazo, aperturas más abiertas y un espaciado más holgado que el corte de 72pt del “mismo” diseño, porque siglos de observación les habían enseñado lo que el tipo pequeño necesita para sobrevivir a la tinta, el papel y los ojos.

Cuando la tipografía digital colapsó una familia en un único contorno escalable matemáticamente, ganó una comodidad enorme y perdió en silencio la adaptación. La necesidad física había estado codificando sabiduría perceptual: elimina la necesidad y la sabiduría se va con ella.

La razón intuitiva de por qué esa sabiduría importaba: la tinta y los ojos no escalan de forma lineal. Reduce a la mitad el tamaño de una letra y sus detalles finos no se vuelven la mitad de visibles: caen por debajo de lo que el ojo resuelve y de lo que la pantalla puede representar. Los trazos finos se evaporan, las contraformas pequeñas se obstruyen, el ajuste ceñido entre letras se convierte en amontonamiento; la legibilidad, la mitad de la lectura que corresponde al reconocimiento de letras, es lo primero que falla. Por eso los tamaños pequeños necesitan robustez. En los tamaños de display la presión se invierte: cada robustez que salvó al corte de 6pt se magnifica a plena vista, y el tamaño premia en cambio la finura: contraste de trazos finos, ajuste ceñido, detalle nítido.

¿Qué ajusta realmente el tamaño óptico?

Cinco adaptaciones, todas empujando en la misma dirección: hacia abajo en tamaño, hacia la robustez; hacia arriba en tamaño, hacia la finura:

Lee hacia abajo la columna de tamaño pequeño y describe un caballo de batalla robusto, abierto y algo sobrio; lee la columna de tamaño grande y describe algo cercano a un tipo de display. Ese es el punto: son herramientas distintas que casualmente comparten un nombre.

¿Cómo devuelve el eje opsz los tamaños ópticos?

Las fuentes variables volvieron a automatizar la vieja adaptación. Una fuente que incluye el eje opsz contiene el comportamiento de tamaño pequeño y de tamaño grande como un rango continuo dentro de un solo archivo, y CSS lo aplica con:

html {
  font-optical-sizing: auto; /* el valor por defecto */
}

Como auto es el valor inicial, los navegadores —el soporte está ampliamente disponible en los motores modernos— ajustan el eje a partir del tamaño de fuente sin que se lo pidas: tus leyendas de 12px reciben discretamente el dibujo más robusto, y tu línea de display de 64px, el más fino.

La advertencia honesta: solo una minoría de fuentes incluye un eje opsz real. Las que lo incluyen, que se sepa, son los grandes proyectos variables de la clase de Source Serif y Roboto Flex; para todo lo demás, font-optical-sizing no cambia nada, porque no hay ningún eje que accionar. La propiedad es un interruptor, no un sintetizador: no puede inventar adaptaciones que una fuente no contiene.

¿Qué puedes hacer sin un eje opsz?

Dos compensaciones, ambas más antiguas que el eje:

1. Elige tipos diseñados cerca de tus tamaños de trabajo. Tipos de texto —dibujados con las virtudes de la columna de tamaño pequeño incorporadas— para la interfaz y el cuerpo; tipos de display para los titulares. Es la misma lógica que hace que los tipos de display sean siquiera una categoría aparte: son, en efecto, tamaños ópticos grandes vendidos por su cuenta.
2. Compensa manualmente en los extremos. En tamaños de leyenda, un espaciado entre letras ligeramente más abierto y un peso medio paso más pesado recuperan parte de lo que aportaría un verdadero corte pequeño; en tamaños de display, ciñe el espaciado. Las convenciones de tracking y peso tamaño a tamaño se tratan en nuestra guía de escala tipográfica.

Scale Composer no tiene un control de tamaño óptico; su papel aquí es el de espécimen: pon el mismo tipo en los pasos de leyenda y de display de tu escala e inspecciona el extremo pequeño como lo haría un grabador de punzones, en texto renderizado de verdad. Los controles de peso y espaciado entre letras por estilo son exactamente las dos palancas manuales de la segunda compensación.

¿Qué aspecto tiene la diferencia en una escala real?

Compón la palabra “Regeneration” en una serifa de alto contraste en los pasos de leyenda y de display de una escala de cuarta justa de 16px: 12px y 51px:

A 12px, el contorno único falla en los cinco frentes. Los trazos finos se renderizan como mucho de un píxel de ancho y las letras se ven grises y quebradizas; las contraformas de la e y la a se llenan a medias; el espaciado ceñido de grado display se lee como amontonamiento; las serifas delicadas se emborronan. Un verdadero corte para leyenda equilibraría los trazos, subiría las minúsculas, abriría las aperturas, airearía el ajuste y simplificaría las serifas: la palabra se vería más sobria bajo una lupa y mucho más clara a un brazo de distancia.

A 51px, el mismo contorno es funcional pero flojo. El espaciado que a 12px se sentía amontonado ahora se ve suelto entre letras grandes, y el contraste modesto que un contorno de compromiso conserva por seguridad se lee como plano allí donde el tamaño podría cargar dramatismo. Un corte de display mueve cada uno de los cinco diales en el otro sentido.

Un contorno, dos tamaños, quejas opuestas: que es todo el argumento a favor de los tamaños ópticos en una sola palabra.

Audita los extremos de tu propia escala

El compromiso aparece primero en el paso más pequeño de tu escala, así que empieza la auditoría ahí: comprueba si tu tipo de cuerpo incluye un eje opsz y, si no lo hace, juzga el paso de leyenda en texto real y aplica la compensación manual —tracking más abierto, medio paso más de peso— como ajustes propios del estilo y no como una excepción por uso. Para hacer esa comprobación sobre tipo en vivo, abre lado a lado el paso más pequeño y el más grande de tu escala.