opsz y el tamaño óptico

De los cinco ejes registrados, opsz es el único cuyo valor lo pone el navegador solo, a partir del tamaño de fuente, y sin que nadie escriba nada. Es una restauración: durante cuatrocientos años cada cuerpo de una fuente se dibujó por separado, la fotocomposición perdió esa práctica en los años sesenta y la tipografía digital heredó la pérdida. El eje óptico la devuelve, y el efecto secundario es que tu texto fluido cambia ligeramente de tipografía a cada ancho de pantalla.

Por qué el tipo de metal tenía un corte por cuerpo

En una imprenta de tipos móviles, la letra de 6 puntos y la de 72 no eran la misma letra escalada: eran dos punzones distintos, tallados a mano, con diferencias deliberadas.

El cuerpo pequeño llevaba trazos finos más gruesos, para que no se cerraran al entintar; contraformas más abiertas, para que la o no se convirtiera en un punto negro; altura de x mayor en proporción, para ganar legibilidad; y más espacio entre letras, para que no se empastaran.

El cuerpo grande llevaba lo contrario: contraste marcado entre gruesos y finos, terminaciones más afiladas, espaciado más cerrado. A 72 puntos hay sitio para el detalle, y el ojo pide elegancia en lugar de robustez.

La fotocomposición sustituyó el punzón por un negativo que se proyectaba a cualquier tamaño, y con eso una sola forma pasó a servir para todos los cuerpos. La tipografía digital nació de ahí. opsz es el eje que devuelve la práctica antigua, con la ventaja de que ahora es continua en lugar de tener un corte por cuerpo.

Cómo lo automatiza el navegador

.texto { font-optical-sizing: auto; }   /* es el valor por defecto */

Con auto, el navegador alimenta el eje opsz con el tamaño de fuente usado del elemento, y lo hace automáticamente y sin que declares nada: el valor inicial de la propiedad ya es auto. Si la fuente tiene eje óptico, el ajuste está actuando ahora mismo en tu página aunque no lo hayas pedido.

El rango del eje se expresa en puntos tipográficos y suele ir de 8 a 144. El navegador se encarga de la conversión desde el tamaño de fuente y de recortar a los extremos del rango declarado en la fuente.

font-optical-sizing: none lo desactiva y deja el eje en su valor por defecto. La propiedad está en los tres motores desde hace muchísimo: Chrome 79, Firefox 62 y Safari 13.1. No necesita detección.

Lo que se ve cuando funciona: el texto pequeño parece más sólido y más legible de lo que sería la misma fuente escalada, y los titulares grandes parecen más afilados y más elegantes. Lo que se ve cuando lo desactivas en una fuente con buen eje óptico: el texto pequeño se vuelve frágil y raquítico, y los titulares se ven torpes y demasiado robustos.

Cuándo conviene forzarlo a mano

El automatismo asume que el tamaño de fuente refleja el papel del texto. Hay tres casos en que no lo refleja y conviene intervenir, y es el único uso legítimo de font-variation-settings sobre un eje registrado:

Un rótulo pequeño que debe parecer un titular. Una etiqueta de sección a 12 píxeles, en versalitas, que forma parte del sistema de titulares. Con el ajuste automático recibe el corte de texto pequeño, robusto; forzando un opsz alto se ve fino y editorial.

Un titular gigante que debe parecer texto. Una cita destacada a 64 píxeles dentro de un artículo, que tipográficamente pertenece al cuerpo. Con un opsz bajo mantiene el color de página del texto.

Un cambio de tamaño que no debe cambiar el dibujo. Un componente que aparece en dos tamaños y debe verse idéntico salvo por la escala.

.rotulo-seccion {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-variation-settings: 'opsz' 60;   /* corte de titular a tamano pequeno */
}

Ojo con el efecto colateral: declarar font-variation-settings con opsz desactiva de hecho el ajuste automático para ese elemento, y arrastra todos los problemas de cascada de la lección anterior. Si el elemento tiene además otros ejes, hay que ponerlos todos en la misma lista.

Comprobar si tu fuente lo tiene

La mayoría de las fuentes variables no tienen eje óptico. Es de los más caros de dibujar porque exige rehacer el diseño en los extremos, no solo interpolarlo. Antes de construir nada sobre él, mira la tabla de ejes:

python3 -m fontTools.ttx -t fvar -o - fuente.woff2 | grep -A3 AxisTag

Y si el eje existe, apunta su rango real: fijar 'opsz' 60 en una fuente cuyo eje llega a 32 no hace nada distinto de fijar 32.