Accentsconagua
Share
Las fuentes variables son, en pocas palabras, archivos de fuentes que tienen configuraciones a las que puede cambiar de forma sutil, o modificar dramáticamente la apariencia de la fuente. Están configurados para hacer una gran diferencia al escribir en la web: echemos un vistazo más de cerca!
A través de la configuración de fuente variable (que se llama hachas) puede tomar un solo archivo de fuente y crear el tipo de variaciones que antes solo podía utilizar con varios archivos de fuente.
Por ejemplo, con una familia de fuentes normal, si quisiera una versión ligera, normal y audaz, tendría que cargar tres archivos de fuentes diferentes.
Sin embargo, con una fuente variable que como eje de peso puede ajustar el peso a través de CSS para obtener un aspecto ligero, normal y audaz de un solo archivo:
.light fuente-variación-configuración: "wght" 66; .regular fuente-variación-configuración: "wght" 84; .bold fuente-variación-configuración: "wght" 154;
Con este enfoque, obtiene la misma apariencia tipográfica, pero con tiempos de carga enormemente mejorados. Donde antes habría tenido que minimizar el número de variantes que carga en una página web, con fuentes variables que ya no son un problema, tiene un gran número de variantes a su alcance:
Variable Protipo Sobre Eje-PraxisEn cuanto a la variabilidad del estilo, no se detiene ahí. No está restringido solo a los tipos de variaciones a las que estaría acostumbrado, como el peso normal o la cursiva.
En primer lugar, cualquier eje puede tener su valor establecido en cualquier lugar a lo largo de un rango deslizante, no solo en los valores establecidos. Entonces, si buscabas un peso entre normal y audaz, eso es perfectamente posible. O si desea que sus cursivas se inclinen un poco menos, o si quiere que el ancho de los caracteres sea un poco más alto que el estándar, el poder está en sus manos. Ajusta tu configuración exactamente a lo que necesitas.
En segundo lugar, ¡las fuentes pueden usar cualquier eje que el diseñador piense! Echa un vistazo a la configuración disponible para Bitcount:
Configuraciones de bitcount en Axis-PraxisDependiendo de la fuente, encontrará ejes que le dan control sobre las sombras, los espacios de la plantilla o los terminales de caracteres, las opciones son ilimitadas.
Las fuentes variables parecen tener un gran impacto en cómo trabajamos como diseñadores web. Nos permitirán lograr una mayor diversidad y control, al mismo tiempo que reducirán nuestras velocidades de carga. También nos permitirán diversificar nuestra creatividad tipográfica de formas que antes eran técnicamente imposibles..
Para comenzar con las fuentes variables, hemos organizado un curso que lo guía a través de todas las facetas más importantes de cómo funcionan, lo configura con las herramientas que va a necesitar, lo guía a través de la codificación del CSS que controla las fuentes variables y le muestra cómo crear alternativas para los navegadores que aún no tienen soporte.
