Variable Fonts: Aplicación en el Diseño Web (II)

Si la semana pasada estuvimos explicando que eran las Variable Fonts, que significaban para el mundo de la tipografía, en esta ocasión veremos donde se pueden llegar a explotar realmente todas sus posibilidades: en el diseño web. Por eso, hemos querido dedicarle un artículo en exclusiva a este campo del diseño.

Y es que, a pesar de que ya están disponibles en algunos programas de edición vectorial y retoque fotográfico, como los del paquete Adobe, gracias a las propiedades CSS que tienen las Variable Fonts, multiplicamos de forma exponencial las variaciones de estilo tipográfico que podemos llegar a conseguir. Como vamos a estar viendo algo de código, os recomiendo que echéis un vistazo a nuestro artículo sobre CSS, si es que no estáis muy al día sobre este lenguaje.

Antes de empezar, y si queréis hacer vuestras propias pruebas, lo ideal es que lo hagáis con un navegador web compatible. Tal como vimos la semana pasada en nuestro artículo sobre Variable Fonts, podéis usar en escritorio tanto Chrome, como Edge o Safari.

El formato OpenType Font

Una Fuente Variable OpenType contiene uno o más ejes, cada uno de los cuales da una variación particular a la fuente. También nos permite lograr un aspecto de fuente intermedio, tal como vimos que se puede lograr en Adobe Illustrator mediante el nuevo panel de Variable Fonts, que se ha incluido en sus últimas versiones.

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

• weight <whgt> – lo controla la propiedad CSS font-weight, con un valor que va desde 1 a 999.
• width <wdth> – lo controla la propiedad CSS font-stretch, pudiéndose transformar en cualquiera de los dos ejes.
• optical size <opsz> – se usa para variar el diseño para adapatarse a diferentes tamaños de texto.
• slant <slnt> – lo controla la propiedad CSS font-style. Por defecto, está a 20 grados, pero puede variar entre -90 grados y 90 grados.
• italic <ital> – se logra cuando establece propiedad CSS font-style como italic.

Si quieres ver como funcionan gráficamente estos ejes, la siguiente ilustración que aparece en el (muy) recomendable articulo sobre Variable Fonts de John Hudson es bastante certera. El cubo representa todo el espacio que tenemos disponible si usamos los tres ejes variables (en color verde): weight, width y optical size. Mientras que en color naranja están las diferentes combinaciones entre ellas.

Aunque tenemos estás propiedades entre algunas otras más, esto no significa de que estén disponibles en todas las fuentes. El incluir estos ejes o no depende de forma exclusiva del diseñador de la fuente variable. Normalmente, los ejes que suelen estar en la mayor parte de este tipo de fuentes suelen ser weight y width.

Añadiendo una Variable Font a nuestra web

Añadir una Variable Font a nuestra hoja de estilos CSS es tremendamente sencillo. Por ejemplo, en mi caso, quiero añadir la fuente Amstelvar. Esta fuente es una con las que podemos jugar desde la web de Axis Praxis, que os recomiendo encarecidamente que exploréis para ver todo lo que puede ofrecer una Fuente Variable.

@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
}

Como veis, es un formato similar a cuando insertamos cualquier otro tipo de tipografía en nuestra web. Si quereis encontrar más tipos de Fuentes Variables, además de la mencionada Axis Praxis, ya hay algunas disponibles en Typekit, o en el GitHub del estudio Type Network. Si tenéis más Fuentes Variables que hayáis visto en otras webs, podéis dejarlas en los comentarios, para ampliar aun más este listado!

Variaciones de la fuente con CSS

Una vez ya tenemos introducida la Fuente Variable en nuestra hoja de estilos, veamos como podemos modificarla. Como hemos comentado, las opciones de personalización de cada fuente dependerá de las que haya introducido el creador de la misma. A las ya conocidas propiedades font-weight y font-stretch, se les suma algunas más, añadidas en CSS Fonts Module Level 4. Si entráis en esta web podréis ver todo el listado disponible.

En esta ocasión, quiero varias los valores weight y width de la fuente que hemos elegido, Amstelvar. El código resultante sería el siguiente:

body {
font-family: "Amstelvar";
font-weight: 325;
font-stretch: 74;
}

Pero, si queremos definir los valores de nuestra fuente en una sola declaración, podemos hacerlo mediante font-variation-settings. Con esta propiedad, podemos dar valor a cada una de las diferentes opciones en una sola línea, solo separados por comas. Veamos como quedaría:

body {
font-family: "Amstelvar";
font-variation-settings: 'wght' 325, 'wdth' 74;
}

Más allá de la pura tipografía

Otra de las opciones que nos ofrecen todas estas propiedades CSS está en el uso de elementos más allá de las tipografías. Si habéis explorado la web de Axis Praxis, es posible que os hayáis cruzado con la fuente Zycon.

Si probamos a mover algunos de los toogles disponibles, veremos como cada una de las ilustraciones se modifican de cierta manera.  Esto abre otro camino de posibilidades para crear animaciones o elementos totalmente personalizables vía CSS. En Codepen, Mandy Michael se aprovecha de esta característica de las Variable Fonts para crear un efecto animado muy curioso

Conclusiones finales

Aunque, como hemos podido ver, las Fuentes Variables aun no están listas aún para usarlas en producción. A pesar de eso, no es motivo para que no estemos atentos a todas las novedades que vayan apareciendo.

Se espera que a lo largo de este año y principios de 2019, el soporte en los navegadores web empiece a ser mucho mayor. Como vimos en el anterior artículo, el único gran navegador que no lo incluía era Mozilla Firefox. Por lo que es una excelente oportunidad de empezar a experimentar con las opciones que nos ofrecen, tal como hicimos con CSS Grid hace unos meses.

Por último, si queremos usar las Fuentes Variables desde hoy mismo, las podemos incluir en nuestros proyectos web. Aunque desde Silo Creativo te recomendamos que las uses bajo el paraguas de las Feature Queries, del que escribimos un articulo hace unas semanas. Gracias a las Feature Queries, podemos probar nuevas herramientas, sin tener que preocuparnos de que éstas no sean compatibles con ciertos navegadores. Además de que una vez se actualicen dichos navegadores, harán uso de ellas sin que tengamos que cambiar una sola línea de código.