Las fuentes variables son una tecnología de fuentes muy personalizable. El panel de fuente variable de Adobe Fonts le permite ajustar el estilo y aspecto de las fuentes variables y elegir el mejor estilo para sus proyectos. Las aplicaciones de Creative Cloud que actualmente admiten fuentes variables son Photoshop, InDesign e Illustrator.
¿Qué son las fuentes variables?
Las fuentes variables usan un archivo para almacenar muchos estilos de fuente, a diferencia de las fuentes estáticas que usan archivos separados para cada estilo disponible. Estas le permiten indicar un valor para cada eje de diseño de una fuente, lo que le da control para cambiar el aspecto de la fuente, cosa que no es posible con las fuentes estáticas.
Con las fuentes estáticas tradicionales es necesario añadir o instalar cada uno de los estilos que quiera usar en su proyecto. Por ejemplo, con Acumin Pro puede añadir Acumin Pro Regular, Acumin Pro Italic y cualquier otro estilo al que desee acceder. Acumin Variable incluye todos los estilos de Acumin, por lo que solo necesitaría añadir una fuente.
Cada una de las configuraciones de las fuentes variables se llaman instancias. Las instancias son estilos predefinidos creados para acceder a ellos rápidamente. En el panel de la fuente variable que aparece en la imagen de arriba, la Acumin Variable se ha ajustado con una instancia predeterminada, una opción preestablecida que se aplica a todas las fuentes variables antes de la personalización.
Más abajo en el panel, encontramos los controles de los ejes. Los ejes representan un grupo fijo de variantes de estilo. Una fuente variable puede incluir varios ejes. Puede ajustar cada uno de estos con cualquier valor dentro de un rango mínimo o máximo. En el ejemplo de la variable Acumin, los ejes son Inclinación, Grosor y Anchura.
Cómo usar fuentes variables en el sitio web de Adobe Fonts
Las páginas de detalles de las familias de fuentes variables en el sitio web de Adobe Fonts incluyen una herramienta de texto interactiva y un panel que le permite personalizar la fuente con el estilo deseado. Puede elegir una instancia predefinida para modificarla rápidamente o crear la suya propia.


Añadir una fuente variable a un proyecto web
Para guardar una fuente variable en su proyecto web, seleccione la opción Añadir a proyecto web que está encima del panel de la fuente variable en la página de la familia. Asegúrese de elegir la fuente correcta; algunas fuentes variables tienen fuentes adicionales dentro de su familia.
Seleccione Copiar CSS en la parte inferior del panel para integrar el código correspondiente en la instancia personalizada que vaya a crear. El código reflejará una instancia predeterminada si no hay ninguna configuración personalizada.
Puede marcar la URL del navegador después de personalizar una fuente variable para volver a acceder a la última configuración personalizada en otro momento o seleccionar Copiar URL para compartir o guardar la configuración.
Aplicaciones de uso de las fuentes variables
La naturaleza personalizable de las fuentes variables las hace perfectas para todo tipo de aplicaciones, desde gráficos digitales hasta embalajes de productos o incluso rotulación de vehículos. Al ajustar el ancho, se puede ajustar una fuente para que sea legible en superficies irregulares.
La configuración de una fuente variable creativa puede destacar la personalidad de una marca o adaptar títulos largos que a menudo no encajan en los gráficos de tercios inferiores.
Los ejes de inclinación, grosor y anchura sirven para adaptar Obviously Variable y se ajuste a los paneles de las puertas del coche. Acumin Variable sirve para títulos largos de tercio inferior.
Puede usar fuentes variables para crear una jerarquía visual en vallas publicitarias y carteles o adaptar la fuente variable para que encaje en espacios pequeños y adquiera formas singulares en el diseño de paquetes.
Las fuentes variables destacan al crear mejores saltos de línea en la justificación de párrafos. El eje de anchura, en particular, permite un espaciado entre palabras más eficiente y agradable a la vista.
Las funcionalidades de las fuentes variables permiten que sean muy versátiles en diseños web adaptables. Se puede usar una fuente variable para ajustar los tamaños de pantalla de pequeño a grande, lo que contribuye a crear un tamaño de archivo pequeño y reducir el tiempo de carga.
Se puede añadir código al CSS para que las fuentes variables adquieran animaciones y respondan al sonido, la luz ambiental o el tema del sistema del ordenador. Los ejes de las fuentes variables también facilitan la animación de las fuentes variables.


Los diseñadores de fuentes siguen descubriendo nuevas formas de interactuar e innovar con esta tecnología tipográfica.