Introducción a las fuentes variables en la Web

Una nueva especificación de fuente que puede reducir significativamente los tamaños de los archivos de fuentes

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

En este artículo, descubrirás qué son las fuentes variables, los beneficios que ofrecen y cómo usarlas en tu trabajo. Primero, revisa cómo funciona la tipografía en la Web y qué innovaciones aportan las fuentes variables.

Compatibilidad del navegador

Desde mayo de 2020, las fuentes variables son compatibles con la mayoría de los navegadores. Consulta ¿Puedo usar fuentes variables? y Fuentes de resguardo.

Introducción

Los desarrolladores suelen usar los términos fuente y tipo de letra de forma indistinta. Sin embargo, hay una diferencia: un tipo de letra es el diseño visual subyacente que puede existir en muchas tecnologías de composición diferentes, y una fuente es una de estas implementaciones, en un formato de archivo digital. En otras palabras, el tipo de letra es lo que ves y la fuente es lo que usas.

Otro concepto que a menudo se pasa por alto es la distinción entre un estilo y una familia. Un estilo es un tipo de letra único y específico, como negrita cursiva, y una familia es el conjunto completo de estilos.

Antes de las fuentes variables, cada estilo se implementaba como un archivo de fuente independiente. Con las fuentes variables, todos los estilos se pueden incluir en un solo archivo.

Desafíos para el diseñador y el desarrollador

Cuando un diseñador crea un proyecto de impresión, se enfrenta a algunas limitaciones, como el tamaño físico del diseño de la página, la cantidad de colores que puede usar (que se determina según el tipo de imprenta que se usará), etcétera. Sin embargo, pueden usar tantos estilos de tipografía como quieran. Esto significa que la tipografía de los medios impresos suele ser rica y sofisticada, de modo que la experiencia de lectura sea realmente agradable. Piensa en la última vez que disfrutaste de navegar por una excelente revista.

Los diseñadores y desarrolladores web tienen diferentes limitaciones que los diseñadores de impresión, y una importante son los costos de ancho de banda asociados a nuestros diseños. Esto ha sido un punto de inflexión para las experiencias tipográficas más enriquecidas, ya que tienen un costo. Con las fuentes web tradicionales, cada estilo que se usa en nuestros diseños requiere que los usuarios descarguen un archivo de fuente independiente, lo que aumenta la latencia y el tiempo de renderización de la página. Solo incluir los estilos normal y negrita, además de sus equivalentes en cursiva, puede equivaler a 500 KB o más de datos de fuentes. Esto es incluso antes de que hayamos abordado cómo se renderizan las fuentes, los patrones de resguardo que necesitamos usar o los efectos secundarios no deseados, como el FOIT y el FOUT.

Muchas familias de fuentes ofrecen una gama mucho más amplia de estilos, desde pesos delgados hasta negros, anchos estrechos y anchos, una variedad de detalles estilísticos y hasta diseños específicos para el tamaño (optimizados para tamaños de texto grandes o pequeños). Dado que tendrías que cargar un nuevo archivo de fuente para cada estilo (o combinaciones de estilos), muchos desarrolladores web optan por no usar estas capacidades, lo que reduce la experiencia de lectura de sus usuarios.

Anatomía de una fuente variable

Las fuentes variables abordan estos desafíos, ya que empaquetan los estilos en un solo archivo.

Para ello, se comienza con un estilo central o "predeterminado", por lo general, el "Regular", un diseño romano vertical con el peso y el ancho más típicos que son más adecuados para el texto sin formato. Luego, se conecta con otros diseños en un rango continuo, llamado "eje". El eje más común es Peso, que puede conectar el estilo predeterminado con un estilo en negrita. Cualquier estilo individual se puede ubicar a lo largo de un eje y se denomina "instancia" de la fuente variable. Algunas instancias reciben el nombre del desarrollador de la fuente, por ejemplo, la ubicación 600 del eje de peso se llama SemiBold.

La fuente variable Roboto Flex tiene tres estilos para su eje Weight. El estilo Regular se encuentra en el centro, y hay dos estilos en los extremos opuestos del eje, uno más claro y el otro más pesado. Entre ellas, puedes elegir entre 900 instancias:

El desarrollador de la fuente puede ofrecer un conjunto de diferentes ejes. Puedes combinarlos porque todos comparten los mismos estilos predeterminados. Roboto tiene tres estilos en un eje de ancho: el Regular está en el centro del eje y dos estilos, más estrecho y más ancho, están en cada extremo. Estos proporcionan todos los anchos del estilo Regular y se combinan con el eje de peso para proporcionar todos los anchos para cada peso.

Esto significa que hay miles de estilos. Esto puede parecer una exageración, pero la calidad de la experiencia de lectura puede mejorar notablemente con esta diversidad de estilos de escritura. Además, si no hay penalización de rendimiento, los desarrolladores web pueden usar tantos estilos como deseen, según su diseño.

Cursiva

La forma en que se maneja la cursiva en las fuentes variables es interesante, ya que existen dos enfoques diferentes. Las tipografías como Helvetica o Roboto tienen contornos compatibles con la interpolación, por lo que sus estilos romanos y cursivos se pueden interpolar entre sí, y el eje Inclinación se puede usar para pasar de romano a cursivo.

Otros tipos de letra (como Garamond, Baskerville o Bodoni) tienen contornos de glifos romanos y cursivos que no son compatibles con la interpolación. Por ejemplo, los contornos que suelen definir una "n" en minúscula romana no coinciden con los contornos que se usan para definir una "n" en minúscula itálica. En lugar de interpolar un contorno al otro, el eje Italic alterna entre los contornos romanos y los itálicos.

Después del cambio a Italic, los ejes disponibles para el usuario deben ser los mismos que los de Roman, al igual que el conjunto de caracteres.

También se puede ver una capacidad de sustitución de glifos para glifos individuales, y se puede usar en cualquier parte del espacio de diseño de una fuente variable. Por ejemplo, un diseño de signo de dólar con dos barras verticales funciona mejor en tamaños de punto más grandes, pero en tamaños de punto más pequeños es mejor un diseño con una sola barra. Cuando tenemos menos píxeles para renderizar el glifo, un diseño de dos barras puede volverse ilegible. Para combatir esto, al igual que con el eje de Itálica, se puede producir una sustitución de un glifo por otro a lo largo del eje de Tamaño óptico en un punto que decide el diseñador de tipos.

En resumen, cuando los contornos lo permiten, los diseñadores de tipos pueden crear fuentes que interpolan entre varios estilos en un espacio de diseño multidimensional. Esto te brinda un control detallado sobre tu tipografía y una gran capacidad.

Definiciones de los ejes

Hay cinco ejes registrados que controlan las características conocidas y predecibles de la fuente: peso, ancho, tamaño óptico, inclinación y cursiva. Además de esos, una fuente puede contener ejes personalizados. Estos pueden controlar cualquier aspecto del diseño de la fuente que desee el diseñador de tipos: el tamaño de las serifas, la longitud de los remates, la altura de los ascendentes o el tamaño del punto de la i.

Aunque los ejes pueden controlar el mismo atributo, es posible que usen valores diferentes. Por ejemplo, en las fuentes variables Oswald y Hepta Slab, solo hay un eje disponible, el peso, pero los rangos son diferentes: Oswald tiene el mismo rango que antes de actualizarse para ser variable, de 200 a 700, pero Hepta Slab tiene un peso de cabello extremo en 1 que llega hasta 900.

Los cinco ejes registrados tienen etiquetas de 4 caracteres en minúsculas que se usan para establecer sus valores en CSS:

Dado que el desarrollador de la fuente define qué ejes están disponibles en una fuente variable y qué valores pueden tener, es fundamental averiguar qué ofrece cada fuente. La documentación de la fuente debería proporcionar esta información, o bien puedes inspeccionar la fuente con una herramienta como Wakamai Fondue.

Casos de uso y beneficios

Establecer los valores de los ejes depende del gusto personal y de la aplicación de las prácticas recomendadas de tipografía. El peligro de cualquier tecnología nueva es el posible uso inadecuado, y los parámetros de configuración demasiado artísticos o exploratorios también podrían disminuir la legibilidad del texto real. En el caso de los títulos, explorar diferentes ejes para crear diseños artísticos excelentes es emocionante, pero, en el caso del texto del cuerpo, esto corre el riesgo de que el texto sea ilegible.

Expresión emocionante

Este gran ejemplo de expresión artística es una exploración de la tipografía Decovar de Mandy Michael.

Animación

También es posible explorar la animación de personajes con fuentes variables. El video anterior es un ejemplo de los diferentes ejes que se usan con el tipo de letra Zycon. Consulta el ejemplo de animación en vivo en Axis Praxis.

Anicons es la primera fuente de íconos animados a color del mundo, basada en los íconos de Material Design. Anicons es un experimento que combina dos tecnologías de fuentes de vanguardia: fuentes variables y fuentes de color.

Finesse

Roboto Flex y Amstelvar ofrecen un conjunto de "ejes paramétricos". En estos ejes, las letras se desconstruyen en 4 aspectos fundamentales de la forma: formas negras o positivas, formas blancas o negativas, y las dimensiones X e Y. Del mismo modo en que los colores primarios se pueden combinar con cualquier otro color para ajustarlo, estos 4 aspectos se pueden usar para ajustar cualquier otro eje.

El eje XTRA en Amstelvar te permite ajustar el valor de "blanco" por mil, como se muestra en el ejemplo anterior. Con pequeños fragmentos de XTRA en direcciones opuestas, se emparejan los anchos de las palabras.

Fuentes variables en CSS

Cómo cargar archivos de fuentes variables

Las fuentes variables se cargan a través del mismo mecanismo @font-face que las fuentes web estáticas tradicionales, pero con dos nuevas mejoras:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. Formatos de fuente: No queremos que el navegador descargue la fuente si no admite fuentes variables, por lo que agregamos descripciones de format y tech: una en la sintaxis futura (format('woff2') tech('variations')) y otra en la sintaxis obsoleta, pero compatible con los navegadores (format('woff2-variations')). Si el navegador admite fuentes variables y la próxima sintaxis, usará la primera declaración. Si admite fuentes variables y la sintaxis actual, usará la segunda declaración. Ambos apuntan al mismo archivo de fuente.

2. Rangos de estilo: Notarás que proporcionamos dos valores para font-weight y font-stretch. En lugar de indicarle al navegador qué grosor específico proporciona esta fuente (por ejemplo, font-weight: 500;), ahora le indicamos el rango de grosores que admite la fuente. En el caso de Roboto Flex, el eje de peso varía de 100 a 1,000, y CSS asigna directamente el rango del eje a la propiedad de estilo font-weight. Si especificas el rango en @font-face, cualquier valor fuera de este rango se "limitará" al valor válido más cercano. El rango del eje de ancho se asigna de la misma manera a la propiedad font-stretch.

Si usas la API de Google Fonts, todo esto se tendrá en cuenta. El CSS no solo contendrá los formatos y rangos de origen adecuados, sino que Google Fonts también enviará fuentes de resguardo estáticas en caso de que no se admitan las fuentes variables.

Cómo usar pesos y anchos

Actualmente, los ejes que puedes configurar de forma confiable desde CSS son el eje wght a través de font-weight y el eje wdth a través de font-stretch.

Tradicionalmente, se establece font-weight como una palabra clave (light, bold) o como un valor numérico entre 100 y 900, en incrementos de 100. Con las fuentes variables, puedes establecer cualquier valor dentro del rango de ancho de la fuente:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Del mismo modo, podemos establecer font-stretch con palabras clave (condensed, ultra-expanded) o con valores de porcentaje:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Uso de cursivas y oblicuas

El eje ital está diseñado para fuentes que contienen un estilo normal y un estilo cursiva. El eje está diseñado para ser un interruptor de encendido y apagado: el valor 0 está apagado y mostrará el estilo normal, mientras que el valor 1 mostrará la cursiva. A diferencia de otros ejes, no hay transición. Un valor de 0.5 no te dará "cursiva parcial".

El eje slnt se diferencia de la cursiva en que no es un nuevo estilo, sino que solo inclina el estilo normal. De forma predeterminada, su valor es 0, lo que significa que se usan las formas de letras verticales predeterminadas. Roboto Flex tiene una inclinación máxima de -10 grados, lo que significa que las letras se inclinarán hacia la derecha cuando pasen de 0 a -10.

Sería intuitivo establecer estos ejes a través de la propiedad font-style, pero, a partir de abril de 2020, la forma exacta de hacerlo aún se está definiendo. Por lo tanto, por ahora, debes tratarlos como ejes personalizados y configurarlos a través de font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

Cómo usar tamaños ópticos

Un tipo de letra se puede renderizar muy pequeño (una nota al pie de 12 px) o muy grande (un título de 80 px). Las fuentes pueden responder a estos cambios de tamaño modificando la forma de sus letras para adaptarse mejor a su tamaño. Un tamaño pequeño podría ser mejor sin detalles finos, mientras que un tamaño grande podría beneficiarse de más detalles y trazos más delgados.

Se introdujo una nueva propiedad de CSS para este eje: font-optical-sizing. De forma predeterminada, se establece en auto, lo que hace que el navegador establezca el valor del eje según el font-size. Esto significa que el navegador elegirá el mejor tamaño óptico automáticamente, pero, si quieres desactivar esta opción, puedes configurar font-optical-sizing en none.

También puedes establecer un valor personalizado para el eje opsz si deseas deliberadamente un tamaño óptico que no coincida con el tamaño de la fuente. El siguiente código CSS haría que el texto se mostrara en un tamaño grande, pero con un tamaño óptico como si se hubiera impreso en 8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

Cómo usar ejes personalizados

A diferencia de los ejes registrados, los ejes personalizados no se asignarán a una propiedad CSS existente, por lo que siempre deberás configurarlos a través de font-variation-settings. Las etiquetas de los ejes personalizados siempre están en mayúsculas para distinguirlas de los ejes registrados.

Roboto Flex ofrece algunos ejes personalizados, y el más importante es el de grado (GRAD). Un eje de grado es interesante, ya que cambia el peso de la fuente sin modificar los anchos, por lo que no cambian los saltos de línea. Si juegas con un eje de grado, puedes evitar tener que manipular los cambios en el eje de peso que afectan el ancho general y, luego, los cambios en el eje de ancho que afectan el peso general.

Como GRAD es un eje personalizado, con un rango de -200 a 150 en Roboto Flex. Debemos abordarlo con font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Fuentes variables de Google Fonts

Google Fonts expandió su catálogo con fuentes variables y agrega nuevas con regularidad. Actualmente, la interfaz está diseñada para elegir instancias únicas de la fuente: seleccionas la variación que deseas, haces clic en "Seleccionar este estilo" y se agregará al elemento <link> que recupera el CSS y las fuentes de Google Fonts.

Para usar todos los ejes disponibles o los rangos de valores, deberás componer manualmente la URL de la API de Google Fonts. En el resumen de las fuentes variables, se enumeran todos los ejes y valores.

La herramienta Google Variable Fonts Links también puede proporcionarte las URLs más recientes de las fuentes variables completas.

Herencia de font-variation-settings

Si bien todos los ejes registrados se admitirán pronto a través de las propiedades de CSS existentes, por el momento, es posible que debas usar font-variation-settings como alternativa. Y si tu fuente tiene ejes personalizados, también necesitarás font-variation-settings.

Sin embargo, hay un pequeño inconveniente con font-variation-settings. Todas las propiedades que no configures de forma explícita se restablecerán automáticamente a su valor predeterminado. Los valores establecidos anteriormente no se heredan. Esto significa que lo siguiente no funcionará según lo esperado:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Primero, el navegador aplicará font-variation-settings: 'slnt' 10 desde la clase .slanted. Luego, aplicará font-variation-settings: 'GRAD' -200 desde la clase .grade-light. Sin embargo, esto restablecerá el valor predeterminado de slnt a 0. El resultado será texto en un grado de luz, pero no inclinado.

Afortunadamente, podemos solucionar este problema usando variables de CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

Las variables de CSS se propagarán en cascada, por lo que, si un elemento (o uno de sus elementos superiores) tiene establecido slnt en 10, conservará ese valor, incluso si estableces GRAD en otro valor. Consulta Cómo corregir la herencia de fuentes variables para obtener una explicación detallada de esta técnica.

Ten en cuenta que la animación de variables CSS no funciona (por diseño), por lo que algo como lo siguiente no funcionará:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Estas animaciones deberán ocurrir directamente en font-variation-settings.

Mejoras en el rendimiento

Las fuentes variables OpenType nos permiten almacenar múltiples variaciones de una familia de fuentes en un solo archivo de fuente. Monotype realizó un experimento en el que combinó 12 fuentes de entrada para generar ocho pesos, en tres anchos y en los estilos itálico y romano. Almacenar 48 fuentes individuales en un solo archivo de fuente variable significó una reducción del 88% en el tamaño del archivo.

Sin embargo, si usas una sola fuente, como Roboto Regular, y nada más, es posible que no veas una ganancia neta en el tamaño de la fuente si cambias a una fuente variable con muchos ejes. Como siempre, depende de tu caso de uso.

Por otro lado, animar la fuente entre los parámetros de configuración puede causar problemas de rendimiento. Si bien esto mejorará una vez que la compatibilidad con fuentes variables en los navegadores sea más avanzada, el problema se puede reducir un poco si solo se animan las fuentes que se encuentran en la pantalla. Este útil fragmento de Dinamo pausa las animaciones en los elementos con la clase vf-animation cuando no están en la pantalla:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

Si tu fuente responde a la interacción del usuario, es una buena idea reducir o rebotar los eventos de entrada. Esto evitará que el navegador renderice instancias de la fuente variable que cambiaron tan poco con respecto a la instancia anterior que el ojo humano no vería la diferencia.

Si usas Google Fonts, es una buena idea preconnect a https://fonts.gstatic.com, el dominio en el que se alojan las fuentes de Google. Esto garantizará que el navegador sepa con anticipación dónde obtener las fuentes cuando las encuentre en el CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Esta sugerencia también funciona para otras CDN: cuanto antes permitas que el navegador establezca una conexión de red, antes podrá descargar tus fuentes.

Encontrarás más sugerencias de rendimiento para cargar Google Fonts en The Fastest Google Fonts.

Respaldo y compatibilidad con navegadores

Todos los navegadores modernos admiten fuentes variables. En caso de que necesites admitir navegadores más antiguos, puedes optar por compilar tu sitio con fuentes estáticas y usar fuentes variables como mejora progresiva:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

En el caso de los navegadores más antiguos, el texto con la clase .super-bold se renderizará en negrita normal, ya que esa es la única fuente en negrita que tenemos disponible. Cuando se admiten las fuentes variables, podemos usar el peso más grueso de 1,000.

Internet Explorer no admite la regla @supports, por lo que este navegador no mostraría ningún diseño. Si esto es un problema, siempre puedes usar uno de los trucos de la vieja escuela para segmentar tus anuncios para navegadores más antiguos relevantes.

Si usas la API de Google Fonts, se encargará de cargar las fuentes adecuadas para los navegadores de tus visitantes. Supongamos que solicitas la fuente Oswald en el rango de grosor de 200 a 700, de la siguiente manera:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Los navegadores modernos que pueden controlar fuentes variables obtendrán la fuente variable y tendrán disponible cada peso entre 200 y 700. Los navegadores más antiguos recibirán fuentes estáticas individuales para cada peso. En este caso, esto significa que descargarán 6 archivos de fuentes: uno para el grosor 200, uno para el grosor 300, y así sucesivamente.

Gracias

Este artículo solo fue posible gracias a la ayuda de las siguientes personas:

• Mustafa Kurtuldu, diseñador de UX y defensor del diseño en Google
• Roel Nieskens, diseñador y desarrollador de UX, y experto en tipografía en Kabisa
• Dave Crossland, administrador de Programas, Google Fonts
• David Berlow, diseñador de tipos y tipógrafo en Font Bureau
• Laurence Penney, desarrollador de axis-praxis.org
• Mandy Michael, desarrolladora de variablefonts.dev