Variable Fonts, la nueva revolución tipográfica

¿Qué son las Variable Fonts?

Variable Fonts son la nueva revolución en lo tocante a diseño tipográfico. Han sido desarrolladas por un grupo de expertos de Apple, Google, Microsoft y Adobe. Se empezaron a dar a conocer en eventos mundiales como por ejemplo TYPO Labs. En la presentación de Underware nos ilustran bastante sobre el tema:

Con las “Variable Fonts” cada fuente está en todos los pesos y variables de la misma Familia. Un poder alucinante.

Entonces, ¿qué diablos es una Variable Font? Digamos que una Variable Font es como si tuviéramos todas las variaciones de una familia tipográfica en un único archivo de fuente. ¿Te das cuenta de lo que esto supone? ¡¡Guau!!

Con las “Variable Fonts” cada fuente está en todos los pesos y variables de la misma Familia. Un poder alucinante.

El tipógrafo puede incluir dentro del código condiciones diversas para que la tipografía se adapte a determinadas circunstancias. Además de que se trata de un solo archivo, solo una carga en el sistema.

Son fuentes que podrían adaptarse prácticamente a todo y tanto diseñadores como programadores encontramos en ellas nuevos retos y ventajas en ellas.Y los usuarios van a disfrutarlas.

No me refiero solo a las variaciones físicas de una tipografía como puedan ser grosor, anchura o inclinación sino adaptaciones como variar el contraste según las circunstancias lumínicas; cambiar de color según el fondo de la interfaz; llegar a cambiar de estilo en función de la temática del mensaje o personalizarse según el tipo de usuario. Las posibilidades son inmensas. También admiten transiciones y animaciones CSS con y sin JS.

En este vídeo se puede ver la demostración de cómo adaptar las fuentes según el reconocimiento facial:

Demos de Variable Fonts

• Axispraxis
• Microsoft Edge Demos \ Variable Fonts
• Weird things variable fonts can do. (CSS-Tricks)

Dónde descargo Variables Fonts

En la web Variable Fonts (beta) y algunos autores te las ofrecen en sus Github o webs, como es el caso de Christop Koeberlin.

HTML y CSS Markup de Variable Fonts

Antes de nada tened en cuenta que es algo nuevo, así que hemos de consultar Can I Use – Variable Fonts para ver restricciones de las propiedades y según los navegadores. (Ya sabéis que siempre que sale algo nuevo tenemos la misma cruz… así que paciencia).

Propiedades

Esto lo explica genial Mustafa Kurtuldu en Web Fundamentals. Visitadla si necesitáis más profundidad.

Las fuentes se componen de diferentes ejes y sus correspondientes valores en CSS son estos:

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

Cómo se declara la fuente

Se declara la fuente:

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

Este sería un ejemplo de como usar una de las propiedades CSS:

#font-amstelvar {
  font-family: 'AmstelvarAlpha';
  font-variation-settings: 'wdth' 400, 'wght' 98;
}

Y así se hace un fallback por si el sistema no soporta la Variable Font.

@supports (font-variations-settings: 'wdth' 200) {
  @font-face {
    /* https://github.com/TypeNetwork/Amstelvar */
    font-family: AmstelvarAlpha;
    src: url('../fonts/AmstelvarAlpha-VF.ttf');
    font-weight: normal;
    font-style: normal;
  }

  #font-amstelvar {
    font-family: AmstelvarAlpha;
    font-variation-settings: 'wdth' 400, 'wght' 98;
  }
}

Software de diseño y prototipado con Variable font

Por lo que yo he visto, ya lo incluyen las nuevas versiones de Adobe Illustrator CS y Adobe Photoshop CC. Sketch pienso que no, al menos por lo de ahora, pero se muestran interesados en saber para qué y cómo las queremos usar.

Ok, thanks! Actually, I just wanted to experiment with them https://t.co/e9GI5ZVYfS

— María Rey (@oyonarteweb) 22 de noviembre de 2018

¿Te apetece ser tester de Variable Fonts?

Mientras me documentaba para escribir este post encontré que en Monotype piden voluntarios que se ofrezcan a testear las próximas fuentes que están desarrollando. Si estás interesado puedes escribirles a @TrueTyper #VariableFonts

El futuro

Pues pienso que las Variable Font van a dar mucha guerra y mucha satisfacción. Abren un mundo nuevo de posibilidades. ¡Gracias y bienvenidas!