Fuentes variables con eje de anchura
Familias variables en las que el ancho de las letras se puede ajustar además del peso, desde un ligero estrechamiento para ajustar el texto hasta una gama completa de condensada a ancha.
Narrow to wide
Una fuente variable guarda un diseño como un rango en lugar de un conjunto de estilos fijos. La mayoría de las familias variables ofrecen un eje de peso; algunas menos añaden un eje de anchura, registrado con la etiqueta wdth, que estrecha o ensancha las letras manteniendo su altura y su carácter. Sus valores son porcentajes del ancho normal, de modo que 75 es un corte condensado, 100 el normal y 125 uno extendido.
La anchura suele ser el más práctico de los dos ejes para el trabajo de maquetación. Permite ajustar un titular exactamente a su columna, comprimir una etiqueta de navegación en una pantalla pequeña y relajarla en una grande, o hacer que una tabla pase a un ajuste más estrecho solo cuando sus columnas se quedan sin espacio. En CSS la propiedad es font-stretch, o font-variation-settings para un control más fino, y puede cambiar en los puntos de ruptura o animarse.
Compara los rangos antes de elegir. Varias familias de esta lista solo se estrechan, de 100 a 75 aproximadamente, lo que basta para ajustar el texto; dos solo se ensanchan; otras van de la mitad del ancho normal al doble y son en la práctica varias tipografías en una. Las notas siguientes indican cada rango tal como consta en la ficha. Un eje de anchura bien dibujado ajusta las propias formas de las letras, a diferencia de deformar el texto de manera artificial.
-
Roboto
Un eje de anchura de 75 a 100 estrecha el diseño hacia un corte condensado, junto con un peso de 100 a 900 y cursivas.
-
Open Sans
La anchura se estrecha de 100 a 75 para ajustar el texto, en una sans humanista con seis pesos y cursivas.
-
Archivo
Anchura de 62 a 125, de extracondensada a expandida, junto con un peso de Thin a Black y cursivas.
-
Saira
Anchura de 50 a 125 y peso de 100 a 900 en una sans de formas cuadradas, además de cursivas.
-
IBM Plex Sans
Un eje de anchura que estrecha las letras hasta 75, con siete pesos y cursivas.
-
Inconsolata
Una monoespaciada cuyo eje de anchura va de 50 a 200, de la mitad del ancho normal al doble, junto con un peso de 200 a 900.
-
Noto Serif
Una serif de texto cuyo eje de anchura se estrecha de 100 a 62,5, con nueve pesos y cursivas.
-
Merriweather
Una serif de texto con un rango de anchura modesto, de 87 a 112, junto con ejes de peso y de tamaño óptico.
-
Asap
Peso de 100 a 900 y anchura de 75 a 125, con cursivas.
-
Georama
Un eje de ancho de 62,5 a 150, de condensado a expandido, y nueve pesos con cursivas.
-
Zalando Sans
Ancho de 75 a 125 y peso de 200 a 900 en una grotesca sencilla, además de cursivas.
-
Science Gothic
Cuatro ejes: peso 100–900, ancho 50–200, inclinación y contraste.
-
Advent Pro
Aquí el ancho solo se expande, de 100 a 200, junto con un peso de 100 a 900.
-
Mozilla Headline
Peso de 200 a 700 y ancho de 75 a 125 en una sans de titulares.
-
Anek Latin
Ancho de 75 a 125 en ocho pesos rectos de Thin a ExtraBold.
-
Pliant
El ancho solo crece, de 100 a 125, con nueve pesos, cursivas, cirílico y griego.
-
Ubuntu Sans
Un eje de ancho que se estrecha de 100 a 75 en una sans pensada para menús, botones y cuadros de diálogo, con ocho pesos y cursivas.
Las muestras cargan un subconjunto latino básico de cada familia. Todas las familias de esta página tienen licencia abierta; su página indica las condiciones y ofrece los archivos originales.
Preguntas sobre fuentes variables con eje de anchura
¿Cómo defino el ancho de una fuente en CSS?
Usa font-stretch con un porcentaje, por ejemplo font-stretch: 85%, o font-variation-settings: "wdth" 85. El valor debe estar dentro del rango que admite la fuente; los valores fuera de él se ajustan al extremo más cercano.
¿Un eje de anchura es lo mismo que escalar el texto en horizontal?
No. Escalar deforma el grosor de los trazos y las curvas. Un eje de anchura usa formas dibujadas para cada ancho, de modo que los trazos verticales y horizontales mantienen su proporción.
¿Las fuentes variables funcionan en todos los navegadores y aplicaciones?
Los navegadores actuales y las principales aplicaciones de diseño las admiten. El software más antiguo puede mostrar solo el estilo predeterminado, así que conserva archivos estáticos como alternativa donde eso importe.
¿Puedo usar estas fuentes variables con fines comerciales?
Sí. Todas menos una tienen la SIL Open Font License, que permite el uso comercial, la incrustación y el alojamiento propio; Ubuntu Sans usa la Ubuntu Font License, que también permite el uso comercial. La página de cada fuente indica su licencia.