# 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. 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. How these were chosen: Familias variables cuyas fichas indican un eje de anchura (wdth) además del de peso; los rangos de los ejes se citan tal como constan en las fichas. ## Fonts (17) - [Roboto](https://trendhub.net/es/fonts/roboto.markdown) (Sans Serif, 18 estilos · variable, OFL): 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](https://trendhub.net/es/fonts/open-sans.markdown) (Sans Serif, 12 estilos · variable, OFL): La anchura se estrecha de 100 a 75 para ajustar el texto, en una sans humanista con seis pesos y cursivas. - [Archivo](https://trendhub.net/es/fonts/archivo.markdown) (Sans Serif, 18 estilos · variable, OFL): Anchura de 62 a 125, de extracondensada a expandida, junto con un peso de Thin a Black y cursivas. - [Saira](https://trendhub.net/es/fonts/saira.markdown) (Sans Serif, 18 estilos · variable, OFL): Anchura de 50 a 125 y peso de 100 a 900 en una sans de formas cuadradas, además de cursivas. - [IBM Plex Sans](https://trendhub.net/es/fonts/ibm-plex-sans.markdown) (Sans Serif, 14 estilos · variable, OFL): Un eje de anchura que estrecha las letras hasta 75, con siete pesos y cursivas. - [Inconsolata](https://trendhub.net/es/fonts/inconsolata.markdown) (Monoespaciadas, 8 estilos · variable, OFL): 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](https://trendhub.net/es/fonts/noto-serif.markdown) (Serif, 18 estilos · variable, OFL): Una serif de texto cuyo eje de anchura se estrecha de 100 a 62,5, con nueve pesos y cursivas. - [Merriweather](https://trendhub.net/es/fonts/merriweather.markdown) (Serif, 14 estilos · variable, OFL): 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](https://trendhub.net/es/fonts/asap.markdown) (Sans Serif, 18 estilos · variable, OFL): Peso de 100 a 900 y anchura de 75 a 125, con cursivas. - [Georama](https://trendhub.net/es/fonts/georama.markdown) (Sans Serif, 18 estilos · variable, OFL): Un eje de ancho de 62,5 a 150, de condensado a expandido, y nueve pesos con cursivas. - [Zalando Sans](https://trendhub.net/es/fonts/zalando-sans.markdown) (Sans Serif, 16 estilos · variable, OFL): Ancho de 75 a 125 y peso de 200 a 900 en una grotesca sencilla, además de cursivas. - [Science Gothic](https://trendhub.net/es/fonts/science-gothic.markdown) (Sans Serif, 18 estilos · variable, OFL): Cuatro ejes: peso 100–900, ancho 50–200, inclinación y contraste. - [Advent Pro](https://trendhub.net/es/fonts/advent-pro.markdown) (Sans Serif, 18 estilos · variable, OFL): Aquí el ancho solo se expande, de 100 a 200, junto con un peso de 100 a 900. - [Mozilla Headline](https://trendhub.net/es/fonts/mozilla-headline.markdown) (Sans Serif, 6 estilos · variable, OFL): Peso de 200 a 700 y ancho de 75 a 125 en una sans de titulares. - [Anek Latin](https://trendhub.net/es/fonts/anek-latin.markdown) (Sans Serif, 8 estilos · variable, OFL): Ancho de 75 a 125 en ocho pesos rectos de Thin a ExtraBold. - [Pliant](https://trendhub.net/es/fonts/pliant.markdown) (Sans Serif, 18 estilos · variable, OFL): El ancho solo crece, de 100 a 125, con nueve pesos, cursivas, cirílico y griego. - [Ubuntu Sans](https://trendhub.net/es/fonts/ubuntu-sans.markdown) (Sans Serif, 16 estilos · variable, UFL): 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. ## FAQs ### ¿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. ## Related collections - [Fuentes variables con eje de tamaño óptico](https://trendhub.net/es/fonts/for/variable-fonts-with-optical-size.markdown) - [Fuentes variables con ejes poco habituales](https://trendhub.net/es/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Fuentes sans serif estrechas para tablas y maquetaciones ajustadas](https://trendhub.net/es/fonts/for/narrow-fonts-for-tight-layouts.markdown) - [Fuentes condensadas para titulares](https://trendhub.net/es/fonts/for/condensed-headline-fonts.markdown) - [Fuentes anchas y extendidas para encabezados y logotipos](https://trendhub.net/es/fonts/for/wide-and-extended-fonts.markdown) - [Familias tipográficas con nueve pesos y cursivas](https://trendhub.net/es/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/es/fonts/for/variable-fonts-with-a-width-axis (trendhub)