Comience con las fuentes variables

Las fuentes variables son un nuevo formato de fuente que ofrece una flexibilidad sin precedentes. Y están con nosotros ahora.

En octubre de 2016, se lanzó la versión 1.8 de OpenType, y con ella una nueva tecnología extensa: OpenType Font Variations. Más comúnmente conocida como fuentes variables, la tecnología permite que un solo archivo de fuente se comporte como múltiples fuentes. Esto se realiza definiendo variaciones dentro de la fuente, que se interpolan a lo largo de uno o más ejes. Dos de estos ejes pueden ser ancho y peso, pero el diseñador de tipos puede definir muchos otros también.

Fuente variable de guinga con variación continua a lo largo de los ejes de ancho y peso

Esta imagen muestra una fuente variable renderizada en 36 estilos diferentes, todos desde un archivo. Si tuviera que elegir cuatro estilos y servirlos como fuentes normales, un archivo de fuente variable capaz de proporcionar los mismos estilos sería significativamente más pequeño que los cuatro archivos separados, con la ventaja de velocidad adicional de requerir solo una llamada al servidor.

La ilustración varía en ancho y peso. Esos dos ejes por sí solos significan que, de acuerdo con la especificación OpenType Font Variations, teóricamente son posibles variaciones de 1000 × 1000 (un millón) dentro del único archivo sin datos adicionales. Un tercer eje podría aumentar las posibilidades a mil millones.

Al momento de escribir, la tecnología está en su infancia, pero potencialmente abre enormes oportunidades para nuevos tipos de tipografía receptiva. El ahorro de tamaño de archivo y la precisión fina significan que se pueden hacer muchos pequeños ajustes a la fuente renderizada, lo que podría responder dinámicamente al dispositivo y al entorno del lector, así como al texto.

Dentro del espacio de diseño creado por los ejes de variación en una fuente, el diseñador de tipos puede definir posiciones específicas como instancias con nombre. Cada instancia con nombre podría aparecer a los usuarios del software de diseño como si fuera una fuente separada, por ejemplo, "regular", "condensada ligera" o "negrita adicional extendida".

En la especificación OpenType, cinco ejes comunes de variación se han predefinido como etiquetas de cuatro caracteres: peso, ancho, ancho, cursiva, inclinación inclinada y tamaño óptico opsz. Estas variaciones de fuente pueden habilitarse mediante las propiedades de peso de fuente, estiramiento de fuente y estilo de fuente. CSS4 agrega nuevos valores para que las propiedades funcionen con variaciones de fuente:

  • font-weight toma cualquier número entero de 1–999 (no limitado a múltiplos de 100 como en CSS3).
  • font-stretch toma un número de porcentaje en un rango donde 100% es normal, 50% está ultra condensado y 200% está ultra expandido.
  • font-style toma un valor de ángulo oblicuo de oblicuo -90deg a oblicuo 90deg.
  • font-optical-sizing es una nueva propiedad que toma un valor de auto o none que activa el tamaño óptico si está disponible como eje en la fuente variable.
Variación continua a lo largo de un eje de dimensionamiento óptico en Amstelvar

Los diseñadores de fuentes también pueden definir ejes personalizados con sus propias etiquetas de cuatro caracteres. Esto permite a los diseñadores variar casi cualquier aspecto imaginable de un tipo de letra, como el contraste, la altura x, la forma seriforme, la suciedad e incluso partes de los glifos individuales, como la longitud de la cola en una Q. Usando una sintaxis similar a la configuración de características de fuente, los ejes personalizados, así como los predefinidos, están disponibles a través de la propiedad de configuración de variación de fuente de bajo nivel. Por ejemplo, esto generaría texto con una variación que es muy amplia, ligera y de tamaño óptico para 48 puntos:

h2 {configuración-variación-fuente: "wdth" 600, "wght" 200, "opsz" 48; }

Las fuentes variables son compatibles actualmente con Safari, Chrome, Edge y Firefox (esta última solo en una Mac y si activa algunas banderas). Visite Axis Praxis de Laurence Penney para jugar con variaciones e instancias de diseño de algunas fuentes variables.

Al igual que con las fuentes OpenType normales, las fuentes variables se pueden usar como fuentes web tal como están, o preferiblemente envueltas como WOFF2. Si desea utilizar una fuente variable como fuente web, en su regla @ font-face debe establecer el formato en woff2-variaciones o truetype-variaciones. Si desea proporcionar retrocesos de fuente regulares para los navegadores que no admiten fuentes variables, puede usar varias reglas de fuente cuando sea necesario, repitiendo la fuente variable cada vez.

@ font-face {font-family: 'Nicefont'; src: formato url ('nicefont_var.woff2') ('woff2-variaciones'); src: formato url ('nicefont_regular.woff2') ('woff2'); peso de fuente: normal; estilo de fuente: normal; }

@ font-face {font-family: 'Nicefont'; src: formato url ('nicefont_var.woff2') ('woff2-variaciones'); src: formato url ('nicefont_black.woff2') ('woff2'); peso de fuente: 800; estilo de fuente: normal; }

Al momento de escribir, solo Safari comprende el formato ('woff2-variaciones') y el peso de la fuente con fuentes variables. Puede leer cómo solucionar esos errores en los otros navegadores con capacidad de fuente variable en mi artículo Cómo usar fuentes variables en el mundo real.

Las fuentes variables fueron desarrolladas conjuntamente por Adobe, Apple, Google y Microsoft. Esto significa que el soporte en nuevas versiones de navegadores (y sistemas operativos y software de diseño) ya está llegando y continuará haciéndolo a paso.

Este es un extracto de mi libro Web Typography, ahora disponible en rústica y ebook.

Para obtener información completa sobre las fuentes variables, y mucho más, únase a mí y a expertos de todo el mundo en Ampersand para obtener una imagen completa de lo que la tipografía web puede ser hoy. El día antes de la conferencia también organizaré un taller de tipografía web adaptable.