La idea de fuentes variables ha existido por un tiempo. En el futuro, en lugar de múltiples versiones de fuentes, se supone que los grosores de línea y los anchos de fuente se unificarán en un solo archivo de fuente. Con la nueva nube creativa de Adobe y el nuevo Chrome de Google, ahora se pueden utilizar fuentes variables en la práctica.

Una fuente, varios grosores de línea y anchos de fuente

Hasta ahora, los diferentes grosores de línea y anchos de fuente de una sola fuente tenían que dividirse en versiones individuales. Con fuentes bien desarrolladas, encontrará versiones con un grosor de línea que va desde «delgado» a «pesado». Además de eso, hay versiones con diferentes anchos de fuente, como «condensada», «comprimida» o «ancha». En combinación entre sí, docenas de versiones individuales de una fuente no son nada infrecuentes, especialmente cuando también cuenta las versiones en cursiva en diferentes variaciones.

Con las nuevas fuentes variables, todos estos rasgos se unen en una única versión. Aún mejor: los grosores de línea y los anchos de fuente se pueden ajustar de forma continua. Anteriormente, dependíamos de valores dados. Con fuentes variables, somos mucho más flexibles, ya que podemos ajustar libremente el ancho para diferentes tamaños de fuente.

Formalmente, las nuevas fuentes varibale son fuentes OpenType de la versión 1.8. Con este formato, se definen los rasgos para la apariencia de una fuente, incluidos los posibles anchos de fuente y grosores de línea. La visualización respectiva de la fuente con ciertos valores se interpola a través de la aplicación, como Adobe Illustrator o Google Chrome, por ejemplo.

Creative Cloud 2017 admite fuentes variables

Una de las razones por las que solo hay unas pocas fuentes variables es que antes no era posible usarlas. Sin embargo, con la nueva versión de Creative Cloud, finalmente podemos usar las nuevas fuentes.

Por ejemplo, Illustrator y Photoshop ahora admiten fuentes variables. Cuando ha seleccionado una fuente variable, hay un icono adicional en la ventana «Carácter», que abre una ventana con tres controles deslizantes. Allí, puedes definir la fuerza, el ancho y la inclinación de la fuente.

Además de eso, también es posible seleccionar versiones predefinidas como «Bold Condensed Italic», sin realizar los ajustes usted mismo.

Por supuesto, Adobe también viene con algunas fuentes variables. A partir de ahora, «Myriad», «Minion», «Acumin» y «Source» son fuentes variables incluidas en Creative Cloud.

Chrome 62 también admite fuentes variables

Casi al mismo tiempo, Google lanzó una nueva versión de su navegador Chrome, que también admite fuentes variables. Las fuentes variables también se pueden proporcionar como fuentes web e integrarse en una hoja de estilo de la forma habitual.

Esto le permite crear su propia versión de fuente utilizando los conocidos atributos CSS «font-weight», «font-stretch» y «font-style», sin tener que integrar varios archivos de fuentes.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-weight: 700;
  font-stretch: 75;
}

En el ejemplo, establecemos el grosor de línea de un elemento «

» en 700 y el ancho de fuente en 75.

Sin embargo, los atributos CSS mencionados solo admiten valores comunes. Por ejemplo, «font-weight» conoce palabras clave como «normal» y «negrita», así como números como «100» y «900». El ancho de banda de las opciones, sin embargo, es mucho mayor que los valores que conocen los atributos “font-weight”, “font-stretch” y “font-style”.

Sin embargo, el atributo CSS “font-variación-settings” le da acceso a todas las características de una fuente OpenType. Dependiendo de la fuente, hay valores adicionales disponibles para usted, que no son compatibles con los atributos «font- *» normales.

Por ejemplo, use «wght» para definir el grosor de la línea y «wdth» para el ancho de una fuente.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-variation-settings: “wght” 700, “wdth” 75;
}

El segundo ejemplo contiene los mismos valores de peso y ancho, pero se definió mediante el atributo “font-variación-settings”.

El atributo “configuración de variación de fuente” también tiene la ventaja de que se puede animar. Junto con los atributos CSS «transición» o «animación», también se pueden crear efectos de texto en movimiento.

Para resaltar un texto, puede cambiar el grosor de la línea o el ancho de la fuente mediante la animación.

En el sitio web Axispraxis, puedes ver cómo se ven las fuentes variables en acción. Puede elegir entre diferentes fuentes variables y puede ajustar el peso y el ancho con los controles deslizantes.

Fuentes variables en Axispraxis

A través de JavaScript, los atributos CSS correspondientes se modifican dinámicamente.

Otra ventaja de las fuentes variables, especialmente en el diseño web, es el tamaño de archivo más bajo. En lugar de varios archivos de fuentes, solo se necesita un archivo que contenga la información de la fuente de una manera mucho más comprimida.

Más opciones de aplicaciones y compatibilidad con navegadores

Aparte de Chrome, Safari de Apple también admite fuentes variables. Esto no es realmente sorprendente, dado que el nuevo formato de fuente fue desarrollado por Adobe, Microsoft y Apple. Pero otros navegadores seguirán su ejemplo en un futuro próximo.

Por cierto, no solo se pueden realizar fuentes, sino también fuentes de iconos, lo que le permite ajustar dinámicamente el grosor de la línea del icono.

El nuevo formato de fuentes variables será una gran ventaja para los diseñadores gráficos y web.