() translation by (you can also view the original English article)
¿Te has preguntado qué son las fuentes variables? Las fuentes variables son, en pocas palabras, archivos de fuentes con ajustes que puedes cambiar para modificar sutil o dramáticamente la apariencia de las fuentes. Están diseñadas para marcar una gran diferencia al escribir en la Web. ¡Veamos en detalle!
¿Qué son las fuentes variables en la Web?
Puedes usar fuentes variables en el software de diseño, como Illustrator y Photoshop. Y también puedes usar fuentes variables para crear sitios web. Respondamos a la pregunta: «¿Qué son las fuentes variables en la Web?»
Mira el siguiente video para que obtengas una explicación completa, ¡y asegúrate de revisar y suscribirte a nuestro canal de Envato Tuts+ en YouTube!
Estudia el tema en mayor profundidad con nuestro curso gratuito sobre fuentes variables para el diseño web.
Fuentes variables para diseñadores web
Mediante los ajustes de la fuente variable (que se llaman axes), puedes tomar un solo archivo de fuente y crear el tipo de variaciones que antes únicamente podías lograr usando varios archivos.
Por ejemplo, con una familia de fuentes regular, si quisieras una versión light, normal y bold, tendrías que cargar tres archivos de fuentes diferentes.
Sin embargo, con una fuente variable que tiene un eje de peso (weight axis), puedes ajustar el peso mediante CSS para obtener el aspecto light, normal y bold desde un solo archivo:
1 |
.light { |
2 |
font-variation-settings: "wght" 66; |
3 |
}
|
4 |
|
5 |
.regular { |
6 |
font-variation-settings: "wght" 84; |
7 |
}
|
8 |
|
9 |
.bold { |
10 |
font-variation-settings: "wght" 154; |
11 |
}
|
Con esta técnica, obtienes la misma apariencia tipográfica, pero con tiempos de carga enormemente mejorados. Mientras que antes tenías que reducir la cantidad de variantes que cargabas en una página web, con las fuentes variables eso ya no es un problema, tienes una gran cantidad de variantes a tu alcance:
Tamaños de las fuentes variables y variabilidad de estilo
En cuanto a la variabilidad de estilo, no se detiene ahí. No estás limitado a los tipos de variaciones a las que estarías acostumbrado, como el peso normal o la cursiva.
En primer lugar, cualquier eje puede tener su valor establecido en cualquier parte a lo largo de un rango deslizante, no solamente en los valores establecidos. Por lo que si estás buscando un peso en algún punto entre normal y bold, esto es absolutamente posible. O si quieres que tus cursivas se inclinen un poco menos, o deseas que el ancho de los caracteres sea un poco más que el estándar, puedes hacerlo. Configura tus ajustes exactamente como los necesites.
En segundo lugar, ¡las fuentes pueden usar cualquier eje que el diseñador imagine! Mira las configuraciones disponibles para Bitcount:
Dependiendo de la fuente, encontrarás ejes que te brinden control sobre las sombras, espacios en la plantilla o terminales de los caracteres: las opciones son ilimitadas.
Vientos de cambio
Las fuentes variables buscan generar un gran impacto en nuestra manera de trabajar como diseñadores web. Nos permitirán lograr una mayor diversidad y un mayor control, reduciendo al mismo tiempo nuestras velocidades de carga. También nos permitirán expandir nuestra creatividad tipográfica de formas que antes eran técnicamente imposibles.
Para que puedas empezar con las fuentes variables, hemos preparado un curso que te orienta sobre los aspectos más importantes de cómo funcionan, te prepara con las herramientas que necesitarás, te explica los pasos para codificar el CSS que controla las fuentes variables y te muestra cómo crear soluciones alternativas para los navegadores que aún no son compatibles.
Descubre más sobre la tipografía web
Espero que hayas disfrutado de este tutorial y que ahora sepas la respuesta a la pregunta «¿Qué son las fuentes variables para el diseño web?» Hablamos sobre los tamaños de las fuentes variables, ejes y atributos.
El mundo de la tipografía web es fascinante. Si quieres conocer más sobre el tema, tenemos esta guía de aprendizaje completa: Tipografía web de la A a la Z. Y aquí hay más contenido fabuloso que puedes consultar hoy mismo:
Tipografía webLo que dice tu tipografía web sobre ti
FuentesLas 10 mejores fuentes web que se ven estupendas en tamaños pequeños
Fuentes14 fuentes similares a Helvetica
FuentesFuentes similares a Open Sans
Fuentes¿Qué son las fuentes variables?
Tipografía webCómo usar fuentes variables en la Web
Tipografía webCómo usar fuentes de color en la Web
AccesibilidadDiseñando contenido accesible: tipografía, estilo de la fuente y estructura
