Las fuentes variables se desarrollaron como un esfuerzo conjunto de las cuatro compañías de tecnología más grandes involucradas en el diseño de tipos: Apple, Google, Microsoft y Adobe. Como sugiere su nombre, las fuentes variables permiten a los diseñadores derivar un número ilimitado de variantes de fuente del mismo archivo de fuente. De esta manera, es posible ajustar el tipo de letra a diferentes dispositivos, vistas, orientaciones y otras restricciones de diseño.

¿Por qué usar fuentes variables?

Las fuentes variables reducen significativamente las limitaciones de los formatos de fuente actuales. Las fuentes web de hoy son inflexibles y no se escalan muy bien; solo nos proporcionan algunos estilos fijos con nombres como «Light», «Bold» o «Extra Bold». Incluso hay tipos de letra que solo tienen una variante de inclinación o peso. Sin embargo, con las fuentes variables, tenemos acceso a una flexibilidad infinita de peso, inclinación, altura x, losas, redondeo y otros atributos tipográficos.

Mejor aún, las fuentes variables mejoran el rendimiento. Las fuentes web como las conocemos necesitan que cada variante de fuente se almacene en un archivo separado. Por ejemplo, así es como se ve la carpeta de la fuente web Roboto :

Entonces, aquí hay una breve comparación:

Roboto: doce archivos de fuentes, doce variantes.
Fuentes variables: un archivo de fuente, variantes ilimitadas.
Como ya puede imaginar, nuestras opciones tipográficas crecen increíblemente con fuentes variables.

El formato de fuente OpenType

Entonces, ¿qué formato de archivo utilizan las fuentes variables? Según los documentos oficiales :

«Las fuentes OpenType pueden tener la extensión .OTF o .TTF, dependiendo del tipo de contornos en la fuente y el deseo del creador de compatibilidad en sistemas sin soporte nativo de OpenType».

Para ser completamente precisos, las fuentes variables se introdujeron en la versión 1.8 de la especificación del archivo de fuentes OpenType. OpenType es una extensión del formato de fuente TrueType, por lo tanto, las fuentes variables están disponibles como archivos .otfo .ttf.

Ejes de diseño

La nueva especificación del archivo de fuente OpenType viene con una nueva tecnología llamada Variaciones de fuente OpenType que nos permite interpolar la fuente en numerosos ejes de diseño, hasta 64,000, según el blog Adobe Typekit .

La especificación OpenType 1.8 define cinco etiquetas de eje registradas:

1. peso
2. anchura
3. tamaño óptico
4. inclinación
5. itálico

Además, los diseñadores de tipos también pueden definir ejes personalizados junto con sus propias etiquetas de cuatro caracteres en la tabla de «nombre» del archivo de fuente.

A continuación, puede ver una gran ilustración de cómo funcionan los ejes de diseño ( del artículo de John Hudson en Medium.com , referido por Typekit como el anuncio no oficial de fuentes variables). Demuestra una fuente variable de tres ejes con peso, ancho y ejes de tamaño óptico:

El glifo rojo en el centro representa el conjunto de contornos almacenados en la fuente, los glifos verdes representan los extremos de los tres ejes y los glifos naranjas representan las posiciones de las esquinas.

Todo el cubo representa el espacio de diseño al que tenemos acceso si usamos esta fuente variable de tres ejes. Es un cubo solo porque la fuente tiene tres dimensiones (peso, ancho, tamaño óptico). Con menos ejes, nos moveríamos hacia abajo hacia un rectángulo (2 ejes) o una línea (1 eje) y con más ejes, nos moveríamos hacia arriba en un hiperespacio multidimensional.

Y, por supuesto, una fuente variable de 3 ejes de la vida real no sería necesariamente un cubo, sino más bien un cuboide rectangular, ya que en la mayoría de los casos los diferentes ejes no tienen la misma longitud.

Instancias nombradas

Las fuentes variables aún permiten a los diseñadores de tipos definir instancias con nombre, variantes de fuentes específicas entre el número ilimitado de opciones. Por ejemplo, el Prototipo de fuente variable de Adobe contiene dos ejes (peso y contraste) y ocho instancias con nombre (Luz extra, Luz, Regular, Semibold, Negrita, Negro, Contraste medio negro, Contraste alto negro).

Las instancias con nombre son más importantes si queremos usar una fuente variable con programas de diseño como Adobe Illustrator. En la web, podemos generar fácilmente cualquier instancia (con nombre o sin nombre) con CSS (por ejemplo, en la fuente variable de Adobe, la instancia con nombre Extra Light toma el valor mínimo de los ejes de peso y contraste).

Adición de fuentes variables a una página web

Podemos agregar fuentes variables a un sitio web usando la regla @ font-face en la parte superior del archivo CSS.

Por ejemplo, podemos agregar la fuente de la variable Avenir Next con la siguiente regla de CSS:

@font-face {
font-family: «Avenir Next Variable»;
src: url(«AvenirNext_Variable.ttf») format(«truetype»);
}

Puede encontrar más fuentes variables en el sitio web de Axis Praxis (también tiene un área de juegos para fuentes variables), en las páginas de GitHub de diferentes compañías de diseño de tipos (por ejemplo , MonoType , Type Network ), y Typekit también ha comenzado a publicar las versiones de fuentes variables. De sus familias más populares de Adobe Originals.

Nota: no todas las fuentes OpenType que encontrará en la web son fuentes variables (solo se introdujeron con la versión 1.8).

Configuración de variaciones de fuente con CSS

Para definir las variaciones de fuente, podemos usar la font-variation-settingspropiedad CSS introducida con el Nivel 4 del Módulo de fuente CSS . Esta es una propiedad de bajo nivel que nos permite controlar las fuentes variables al especificar un valor para cada eje.

Ejemplo 1: Avenir Next

La fuente de variable Avenir Next contiene dos ejes de diseño: peso y ancho, ambos son ejes registrados. Avenir Next también tiene ocho instancias con nombre (Regular, Mediana, Negrita, Pesada, Condensada, Mediana Condensada, Negrita Condensada, Pesada Condensada).

El CSS completo (que pertenece a una variación aleatoria de fuentes sin nombre) se ve así:

body {
font-family: «Avenir Next Variable»;
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: ‘wght’ 631.164, ‘wdth’ 88.6799;
}

Podemos usar cualquier valor (incluso números flotantes) para los ejes entre los valores mínimo y máximo. En el caso de Avenir Next, podemos usar el rango [400, 900] para el peso y el rango [75, 100] para el eje de ancho.

¿Dónde encontrar las gamas? Los archivos de fuentes contienen las tablas de variación de fuentes (fvar) que contienen los datos necesarios. Sin embargo, para acceder a esa información, necesitamos ver el contenido del archivo de fuente con una herramienta como FontView . A veces, la documentación de la fuente contiene los rangos, pero desafortunadamente esto no siempre es así. La buena noticia es que el sitio web de Axis Praxis contiene los valores mínimo-máximo para todas las fuentes variables que incluye.

Ejemplo 2: Decovar

Decovar es una de las fuentes variables más versátiles que existen actualmente. Lo puede encontrar en Axis Praxis , en GitHub , y también tiene una página de demostración en el sitio web de TypeNetwork. Decovar contiene uno registrado (peso) y catorce ejes personalizados, y también tiene diecisiete instancias con nombre.

De los documentos de GitHub de Decovar, aquí hay algunas variantes que podemos lograr con esta fuente variable de 15 ejes:

El CSS que necesitamos usar es similar al del ejemplo anterior. Aquí, tenemos que definir los quince ejes (en línea, esquilado, losa redondeada, rayas, terminal de lombriz, esqueleto en línea, abierto en línea, terminal en línea, gusano, peso, ensanchado, redondeado, esqueleto de lombriz, losa, bifurcado).

div {
font-family: Decovar;
color: white;
background-color: rgb(0, 162, 215);
font-size: 157.12px;
text-align: left;
padding-top: 20px;
font-variation-settings: ‘INLN’ 285.094, ‘TSHR’ 346.594,
‘TRSB’ 786.377, ‘SSTR’ 84.268, ‘TWRM’ 200, ‘SINL’ 84.268,
‘TOIL’ 0, ‘TINL’ 91.983, ‘WORM’ 0, ‘wght’ 400, ‘TFLR’ 0,
‘TRND’ 0, ‘SWRM’ 0, ‘TSLB’ 277.155, ‘TBIF’ 0;
}

Nota: tenemos que especificar un valor para todos los ejes de la font-variation-settingspropiedad, incluso aquellos que no queremos usar.

En el caso de Decovar, podemos usar 0como valor para los ejes que no nos interesan; estos serán procesados ​​con el valor predeterminado. Sin embargo, esto no siempre es así, ya que depende de los rangos que usa la fuente para los diferentes ejes. Decovar es fácil, ya que utiliza un rango de 0-1000 para todos los ejes, y 0 es el valor predeterminado para todos.

Puede generar font-variation-settingsdeclaraciones similares con Axis Praxis , no tiene que calcular los valores por su cuenta. El CSS anterior genera la siguiente variante de fuente:

Propiedades CSS de alto nivel

La font-variation-settingspropiedad es una propiedad de bajo nivel y de acuerdo con las recomendaciones del W3C, solo debe usarse si no hay otros métodos disponibles. qué significa esto exactamente?

De acuerdo con las CSS 4 especificaciones , seremos capaces de controlar ejes registrados con propiedades CSS de nivel superior en el futuro, a saber:

font-weight(controlará el wghteje)
font-stretch(controlará el wdtheje)
font-style(controlará los ejes slnty ital)
font-optical-sizing(controlará el opszeje)

Las tres primeras propiedades existen desde CSS2, sin embargo, las especificaciones de CSS4 amplían su uso. Vamos a ser capaces de utilizarlos no solamente con palabras clave predefinidas (por ejemplo, normalo boldpara font-weight) o números redondos (por ejemplo 400, 600, 800, etc.), sino también con todos los números en una escala predefinida (por ejemplo, font-weightoscilarán entre 1 y 1000 y font-stretchse rango entre 50% y 200%).

Sin embargo, estas características todavía están en la fase experimental. Por ahora, lo razonable es seguir usando font-variation-settings, ya que actualmente esta es la propiedad más estable para acceder a los ejes de las fuentes variables.