Uso de fuentes variables de Adobe Fonts

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.

 

Buscar fuentes variables en Adobe Fonts

¿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. 

Interfaz gráfica de usuario, aplicación Descripción generada automáticamente
Acumin Pro, una fuente estática que tiene más de 18 estilos propios que tienen que añadirse para poder usarse. Por otro lado, está la Acumin Variable que tiene ejes de inclinación, grosor y anchura disponibles para que los pueda personalizar con solo 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.  

Interfaz gráfica de usuario, aplicación Descripción generada automáticamente

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.  

Interfaz gráfica de usuario, aplicación Descripción generada automáticamente

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. 

Interfaz gráfica de usuario, aplicación Descripción generada automáticamente

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.  

Una persona sonriendo ante la cámara

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. 

Un cartel con una ciudad al fondo
Acumin Variable se utiliza para crear una jerarquía visual

Una imagen con texto, productos de higiene, loción
Los ejes de grosor y tamaño óptico de Minion Variable sirven para crear una jerarquía visual

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.  

Texto Descripción
El eje de anchura de Kepler Variable sirve para reducir los espacios visibles en la justificación del párrafo. Los rectángulos rojos indican la cantidad de espacio que se ha reducido en cada oración.

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. 

Una imagen con texto, captura de pantalla
Las fuentes variables vienen incluidas en un archivo de fuente, lo que hace que sea más rápido cargarlas en la web

Diagrama, texto Descripción generada automáticamente
Las fuentes variables se pueden usar en sitios web para ajustar a medida la tipografía según cambie el tamaño de la pantalla

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. 

Una imagen con una forma
El movimiento de las fuentes variables a través del rango de valores de un eje las dota de animaciones

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


Recursos relacionados 

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?