Una nueva especificación de fuente que puede reducir significativamente los tamaños de los archivos de fuente
En este artículo, veremos qué son las fuentes variables, los beneficios que ofrecen y cómo podemos usarlas en nuestro trabajo. Primero, revisemos cómo funciona la tipografía en la Web y qué innovaciones aportan las fuentes variables.
Compatibilidad del navegador
A partir de mayo de 2020, las fuentes variables son compatibles con la mayoría de los navegadores. Consulta ¿Puedo usar fuentes variables? y Parámetros 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 tipográfica diferentes, y una fuente es una de estas implementaciones, en formato de archivo digital. En otras palabras, un tipo de letra es lo que ves y la fuente es lo que usas.
Otro concepto que se suele pasar 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 Itálica, 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 contener en un solo archivo.
Desafíos para el diseñador y el desarrollador
Cuando un diseñador crea un proyecto impreso, se enfrenta a algunas limitaciones, como el tamaño físico del diseño de página, la cantidad de colores que puede usar (que se determina según el tipo de prensa de impresión que se usará), etcétera. Sin embargo, pueden usar tantos estilos de tipos de letra como quieran. Esto significa que la tipografía de los medios impresos suele ser rica y sofisticada, por lo que la experiencia de lectura es realmente placentera. Piensa en la última vez que disfrutaste hojear una revista excelente.
Los diseñadores y desarrolladores web tienen limitaciones diferentes a las de los diseñadores impresos, y una importante son los costos de ancho de banda asociados a nuestros diseños. Esto fue un punto de inflexión para las experiencias tipográficas más ricas, 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. Si solo incluyes los estilos Regular y Negrita, además de sus versiones en itálica, puedes llegar a tener 500 KB o más de datos de fuentes. Esto es incluso antes de que tratemos cómo se renderizan las fuentes, los patrones de resguardo que debemos usar o los efectos secundarios no deseados, como FOIT y FOUT.
Muchas familias de fuentes ofrecen una variedad mucho más amplia de estilos, desde grosores delgados hasta negros, anchos estrechos y anchos, una variedad de detalles estilísticos y hasta diseños específicos de tamaño (optimizados para tamaños de texto grandes o pequeños). Dado que deberías cargar un archivo de fuente nuevo para cada estilo (o combinación de estilos), muchos desarrolladores web optan por no usar estas funciones, lo que reduce la experiencia de lectura de sus usuarios.
Anatomía de una fuente variable
Las fuentes variables abordan estos desafíos empaquetando 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 grosor y el ancho más típicos que es más adecuado para el texto sin formato. Luego, se conecta a otros estilos en un rango continuo, llamado "eje". El eje más común es Weight, 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. El desarrollador de la fuente asigna nombres a algunas instancias; por ejemplo, la ubicación del eje de grosor 600 se denomina SemiBold.
La fuente variable Roboto Flex tiene tres estilos para su eje Weight. El estilo Regular está en el centro y hay dos estilos en los extremos opuestos del eje, uno más claro y el otro más oscuro. Entre estas, puedes elegir entre 900 instancias:
El desarrollador de la fuente puede ofrecer un conjunto de ejes diferentes. 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 grosor para proporcionar todos los anchos de cada grosor.
Esto significa que hay miles de estilos. Esto puede parecer una exageración, pero la calidad de la experiencia de lectura puede mejorarse notablemente con esta diversidad de tipos de letra. Y, si no tiene penalización de rendimiento, los desarrolladores web pueden usar algunos o tantos estilos como deseen, depende de su diseño.
Cursiva
La forma en que se manejan los itálicos en las fuentes variables es interesante, ya que hay dos enfoques diferentes. Los tipos de letra como Helvetica o Roboto tienen contornos compatibles con la interpolación, por lo que se pueden interpolar sus estilos Roman y Italic, y se puede usar el eje Slant para pasar de Roman a Italic.
Otros tipos de letra (como Garamond, Baskerville o Bodoni) tienen contornos de glifos en romano y cursiva que no son compatibles con la interpolación. Por ejemplo, los contornos que suelen definir una “n” minúscula romana no coinciden con los contornos que se usan para definir una “n” minúscula en cursiva. En lugar de interpolar un contorno en el otro, el eje Italic cambia de contornos romanos a itálicos.
Después de cambiar a itálica, los ejes disponibles para el usuario deben ser los mismos que los de la fuente romana, al igual que el conjunto de caracteres.
También se puede ver una función 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 decida el diseñador de tipos.
En resumen, cuando los contornos lo permiten, los diseñadores de tipos pueden crear fuentes que interpolen entre varios estilos en un espacio de diseño multifacético. Esto te brinda un control detallado sobre tu tipografía y una gran potencia.
Definiciones de los ejes
Hay cinco ejes registrados que controlan las características conocidas y predecibles de la fuente: grosor, ancho, tamaño óptico, inclinación y cursiva. Además de estos, una fuente puede contener ejes personalizados. Estos pueden controlar cualquier aspecto de diseño de la fuente que desee el diseñador de tipos: el tamaño de los serifs, la longitud de los adornos, la altura de los ascendentes o el tamaño del punto en la i.
Aunque los ejes pueden controlar el mismo componente, pueden usar valores diferentes. Por ejemplo, en las fuentes variables Oswald y Hepta Slab, solo hay un eje disponible, el grosor, pero los rangos son diferentes: Oswald tiene el mismo rango que antes de actualizarse a variable, de 200 a 700, pero Hepta Slab tiene un grosor de trazo fino 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:
| Nombres de ejes y valores de CSS | |
|---|---|
| Peso |
wght
|
| Ancho |
wdth
|
| Inclinación |
slnt
|
| Tamaño óptico |
opsz
|
| Cursiva |
ital
|
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
La configuración de los valores de los ejes se reduce al gusto personal y a la aplicación de las mejores prácticas tipográficas. 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, es emocionante explorar diferentes ejes para crear grandes diseños artísticos, pero en el caso del cuerpo del texto, esto puede hacer que el texto sea ilegible.
Expresión emocionante
Arriba, se muestra un gran ejemplo de expresión artística: una exploración de la fuente Decovar de Mandy Michael.
Puedes ver el ejemplo en funcionamiento y el código fuente del ejemplo anterior aquí.
Animación
También existe la posibilidad de animar personajes con fuentes variables. Arriba, se muestra un ejemplo de 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 de color animados 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 descomponen en 4 aspectos fundamentales de la forma: formas negras o positivas, formas blancas o negativas, y las dimensiones x e y. De la misma manera que los colores primarios se pueden combinar con cualquier otro color para ajustarlo, estos 4 aspectos se pueden usar para ajustar con precisión cualquier otro eje.
El eje XTRA en Amstelvar te permite ajustar el valor por mil “blanco”, como se muestra arriba. Con pequeños fragmentos de XTRA en direcciones opuestas, se igualan 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 mejoras nuevas:
@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 es compatible con las fuentes variables, por lo que agregamos descripciones format y tech: una vez en la sintaxis futura (format('woff2') tech('variations')) y una vez en la sintaxis obsoleta, pero compatible con los navegadores (format('woff2-variations')). Si el navegador admite fuentes variables y la sintaxis futura, 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 diseño: 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 damos el rango de grosores que admite la fuente. En Roboto Flex, el eje Weight varía de 100 a 1,000, y el 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, se encargará de todo. No solo el CSS contendrá los formatos y rangos de fuente adecuados, sino que Google Fonts también enviará fuentes de resguardo estáticas en caso de que no se admitan las fuentes variables.
Usa grosores 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, configurarías font-weight como una palabra clave (light, bold) o como un valor numérico entre 100 y 900, en pasos 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 configurar font-stretch con palabras clave (condensed, ultra-expanded) o con valores porcentuales:
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
Usa cursivas y oblicuas
El eje ital está diseñado para fuentes que contienen un estilo normal y uno en cursiva. El eje debe ser un interruptor de encendido/apagado: el valor 0 está desactivado y mostrará el estilo normal, y el valor 1 mostrará el estilo en cursiva. A diferencia de otros ejes, no hay transición. Un valor de 0.5 no te dará "medio itálico".
El eje slnt es diferente de los itálicos en que no es un estilo nuevo, sino que solo inclina el estilo normal. De forma predeterminada, su valor es 0, que significa 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 se pase de 0 a -10.
Sería intuitivo configurar estos ejes a través de la propiedad font-style, pero, a partir de abril de 2020, aún se está trabajando en cómo hacerlo exactamente. 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 visuales
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 cambiando las formas de las letras para que se adapten mejor al tamaño. Un tamaño pequeño puede ser mejor sin detalles finos, mientras que un tamaño grande puede beneficiarse de más detalles y trazos más finos.
Se introdujo una nueva propiedad 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 en función de font-size. Esto significa que el navegador elegirá el mejor tamaño óptico automáticamente, pero si deseas desactivar esta opción, puedes establecer font-optical-sizing en none.
También puedes establecer un valor personalizado para el eje opsz si deseas un tamaño óptico que no coincida con el tamaño de la fuente. El siguiente CSS haría que el texto se mostrara en un tamaño grande, pero en un tamaño óptico como si se imprimiera en 8pt:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Usa ejes personalizados
A diferencia de los ejes registrados, los ejes personalizados no se asignarán a una propiedad CSS
existente, por lo que siempre tendrás que 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 Grade (GRAD). Un eje de grado es interesante, ya que cambia el grosor de la fuente sin cambiar los anchos, por lo que los saltos de línea no cambian. Si juegas con un eje de calificación, puedes evitar tener que modificar el eje de grosor que afecta el ancho general y, luego, modificar el eje de ancho que afecta el grosor general.
Como GRAD es un eje personalizado, tiene 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 fuentes nuevas con frecuencia.
Actualmente, la interfaz está orientada a elegir instancias individuales 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 o rangos de valores disponibles, deberás componer manualmente la URL a la API de Google Fonts. En la descripción general 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 pronto serán compatibles con las propiedades CSS existentes, por el momento, es posible que debas usar font-variation-settings como resguardo. Y si tu fuente tiene ejes personalizados,
también necesitarás font-variation-settings.
Sin embargo, hay un pequeño problema 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á como se espera:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
Primero, el navegador aplicará font-variation-settings: 'slnt' 10 de la clase .slanted. Luego, aplicará font-variation-settings: 'GRAD' -200 de la clase .grade-light. Sin embargo, esto restablecerá el slnt a su valor predeterminado de 0. El resultado será texto en un grado claro, pero no inclinado.
Afortunadamente, podemos solucionar este problema con las 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 CSS se aplicarán en cascada, por lo que, si un elemento (o uno de sus elementos superiores) estableció slnt en 10, mantendrá ese valor, incluso si configuras GRAD en otra cosa. Consulta Cómo corregir la herencia de fuentes variables para obtener una explicación detallada de esta técnica.
Ten en cuenta que animar variables de CSS no funciona (por diseño), por lo que algo como lo siguiente no funciona:
@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 varias variaciones de una familia de tipos en un solo archivo de fuente. Monotype ejecutó un experimento en el que combinó 12 fuentes de entrada para generar ocho grosores, en tres anchos, 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. Aunque esto mejorará una vez que la compatibilidad con fuentes variables en los navegadores esté más madura, el problema se puede reducir un poco animando solo las fuentes que están en la pantalla. Este fragmento útil de Dinamo pausa las animaciones en los elementos con la clase vf-animation cuando no están en 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, te recomendamos limitar o suavizar los eventos de entrada. Esto evitará que el navegador renderice instancias de la fuente variable que cambiaron tan poco de la instancia anterior que el ojo humano no vería la diferencia.
Si usas Google Fonts, te recomendamos que establezcas una conexión previa a https://fonts.gstatic.com, el dominio donde se alojan las fuentes de Google. Esto garantizará que el navegador
conozca desde el principio 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 configure una conexión de red, antes podrá descargar tus fuentes.
Obtén más sugerencias de rendimiento para cargar Google Fonts en Las fuentes de Google más rápidas.
Respaldos y compatibilidad con navegadores
Todos los navegadores modernos admiten fuentes variables. En caso de que necesites admitir navegadores más antiguos, puedes 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 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 grosor más pesado 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, puedes usar una de las trampas de la vieja escuela para segmentar 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 todos los grosores disponibles entre 200 y 700. Los navegadores más antiguos recibirán fuentes estáticas individuales para cada grosor. En este caso, esto significa que se descargarán 6 archivos de fuente: uno para el grosor 200, uno para el grosor 300, etcétera.
Gracias
Este artículo solo fue posible con la ayuda de las siguientes personas:
- Mustafa Kurtuldu, diseñador de UX y defensor del diseño en Google
- Roel Nieskens, diseñador/desarrollador de UX y experto en tipografía en Kabisa
- Dave Crossland, gerente de programa, Google Fonts
- David Berlow, diseñador y tipógrafo de Font Bureau
- Laurence Penney, desarrollador de axis-praxis.org
- Mandy Michael, desarrollador de variablefonts.dev
Imagen hero de Bruno Martins en Unsplash.