Fuentes variables en la Web mediante CSS

Las variaciones de fuentes son un nuevo conjunto de características definidas como parte de la especificación OpenType. Permite que los archivos de fuentes contengan múltiples variaciones de una fuente dentro de un solo archivo, lo que se denomina fuente variable. Esto, a su vez, permite el uso de un archivo de fuente en la web que puede lograr múltiples estilos de fuente.

Además del ahorro obvio en los turnos de datos que deben enviarse por cable para mostrar el texto en una página, las fuentes variables permiten características como animar o realizar transiciones de estilos de fuente y estilos de fuente personalizados, ambos de los cuales no son posibles con fuentes estáticas.

Repasemos algunos ejemplos de uso de una fuente variable y luego desglosemos cómo usarlas en la web hoy en día.

Ejemplos de fuentes variables

Tenga en cuenta que necesitará utilizar un navegador compatible para ver correctamente los ejemplos siguientes.

Fuente sin variables

Source Sans es una fuente gratuita muy popular que ahora viene en una versión variable. Pase el cursor sobre el texto para ver cómo font-weightse puede realizar la transición del valor:

Y esto se consigue utilizando unas reglas CSS muy sencillas:

@font-face {  font-family: 'Source Sans';  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");  font-weight: 1 999;}.source-sans, .source-sans2, .source-sans3 {  font-family: 'Source Sans';  transition: font-weight .45s ease-out;}.source-sans:hover, .source-sans2:hover {  font-weight: 999;}.source-sans3:hover {  font-weight: 200;}

Estilos de fuente personalizados

A continuación se muestran algunos ejemplos que utilizan la misma fuente, Decovar, una fuente variable que define ejes personalizados y permite un texto único y estilizado:

Y aquí están las reglas CSS utilizadas para eso:

@font-face {  font-family: Decovar;  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");}.decovar, .decovar2, .decovar3 {  font-family: Decovar;}.decovar {  color: var(--green3);  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;}.decovar2 {  color: hotpink;  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;}.decovar3 {  color: rebeccapurple;  font-variation-settings: "TRMF" 159.18, "TRME" 1000;}

Ahora que ha visto algunos ejemplos de la vida real, repasemos algunos de los conceptos y cómo utilizar fuentes variables en sus propias páginas web.

Ejes de fuente

Las fuentes variables definen sus variaciones a través de ejes de variación. Existen 5 ejes estándar:

• ital: Controla la cursiva. El valor se puede configurar mediante la font-stylepropiedad CSS.
• opsz: Controla el tamaño óptico de la fuente. El valor se puede configurar mediante la font-optical-sizingpropiedad CSS.
• slnt: Controla la inclinación de la fuente. El valor se puede configurar mediante la font-stylepropiedad CSS.
• wght: Controla el grosor de la fuente. El valor se puede configurar mediante la font-weightpropiedad CSS.
• wdth: Controla el ancho de la fuente. El valor se puede configurar mediante la font-stretchpropiedad CSS.

Las fuentes también pueden especificar ejes personalizados, y estos deben tener un nombre de 4 letras en mayúsculas en lugar de los nombres de 4 letras en minúsculas de los ejes estándar. La fuente Decovar que se muestra arriba es un excelente ejemplo de una fuente que utiliza una multitud de ejes personalizados.

Los ejes estándar se pueden configurar con propiedades CSS conocidas (por ejemplo: wdthse configura con font-weight), y el nuevo CSS font-variation-settingsse utiliza para controlar los valores de los ejes en caso contrario.

Por ejemplo, aquí definimos un estilo para la fuente variable NobotoFlex:

h1 {  font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;}

Que alternativamente podría haberse definido así:

h1 {  font-weight: 322  font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;}

Es una buena idea utilizar las propiedades CSS nativas para los ejes que tienen una.

Tenga en cuenta que las fuentes no tienen que implementar los 5 ejes estándar; en su lugar, debe consultar la documentación de la fuente para saber qué ejes puede controlar.

Tenga en cuenta también cómo font-weightpuede tomar valores en cualquier lugar entre 1 y 999, en comparación con los incrementos de 100 valores a los que estamos acostumbrados.

Uso de fuentes variables con @font-face

El uso de fuentes variables en la Web implica definir reglas @font-face que apuntan a los archivos de fuentes variables. A continuación, se ofrece una breve descripción general de cómo se hace, pero hay algunas advertencias que quizás desee conocer para obtener compatibilidad con varios navegadores.

Aquí, por ejemplo, definimos dos versiones para la Source Sansfamilia de fuentes: una normal y otra en negrita. Ambas versiones utilizan el mismo archivo de fuente variable, pero archivos de fuente diferentes como alternativa para los navegadores que no admiten fuentes variables:

@font-face {  font-family: 'Source Sans';  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");  src: url('/path/to/SourceSans.woff2') format("woff2");  font-weight: 400;}@font-face {  font-family: 'Source Sans';  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");  src: url('/path/to/SourceSansBold.woff2') format("woff2");  font-weight: 900;}

Y ahora se puede utilizar dentro de tus reglas CSS como de costumbre:

h1 {  font-family: 'Source Sans';  font-weight: 900;}h2 {  font-family: 'Source Sans';  font-weight: 400;}

También puedes especificar un rango en tus reglas @font-face, para conservar la capacidad de usar todos los valores posibles dentro de tus reglas CSS regulares:

@font-face {  font-family: 'Source Sans';  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");  src: url('/path/to/SourceSans.woff2') format("woff2");  font-weight: 1 999;}

Con lo anterior, ahora podemos usar cualquier valor entre 1 y 999 para la font-weightpropiedad. Los navegadores que no lo admitan usarán un valor de font-weight de normal .

Fuentes disponibles

En V-fonts.com puedes encontrar y jugar con la mayoría de las fuentes variables disponibles actualmente. Algunas de las fuentes de código abierto más destacadas son Barlow, Mutador Sans, Source Sans, Amstelvary Cabin VF.

Algunas también están disponibles a través de Google Fonts como fuentes de acceso anticipado.

De TTF a WOFF2

Los archivos de fuentes a menudo se proporcionarán en formato TrueType (TTF-TFT), pero para la web es una idea mucho mejor comprimir el archivo de fuente al formato WOFF2 para ahorrar espacio. Puedes usar una herramienta como FontTools para comprimir un archivo de fuente como WOFF2. Seguramente pronto estarán disponibles herramientas en línea o con interfaz gráfica de usuario más fáciles de usar.

Compatibilidad con navegadores

El soporte para fuentes variables ya es bastante bueno, por lo que, en teoría, puedes empezar a utilizarlas hoy mismo. Sin embargo, existen algunas salvedades con el soporte y todavía se están resolviendo algunas cuestiones para su uso dentro de CSS como parte del Módulo de fuentes CSS Nivel 4. Aquí tienes un buen resumen de lo que todavía está en proceso de cambio en este momento.

Recursos y herramientas

A continuación encontrará material de lectura adicional si desea ampliar su comprensión sobre el uso de fuentes variables en la web:

• Introducción a las fuentes variables por Richard Rutter
• Introducción a las fuentes variables en la web
• Un archivo, muchas opciones: uso de fuentes variables en la Web

Y aquí hay dos herramientas que le permiten probar y encontrar fácilmente fuentes variables:

• Eje-Praxis
• Fuentes V-Fonts.com