Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
La anchura es el más silencioso de los ejes tipográficos. Los lectores rara vez la notan conscientemente, y sin embargo gobierna los dos recursos de los que depende la legibilidad: el espacio de las contraformas dentro de las letras y el número de caracteres que caben en una línea. El hallazgo de 2005 fue que las anchuras de regular a levemente condensada son las más legibles — las tipografías expandidas dispersan las formas de las letras más allá del reconocimiento fácil, y las tipografías muy condensadas asfixian las contraformas que distinguen una e de una c o de una o. Ese hallazgo ha envejecido bien. Lo que ha cambiado es la maquinaria: la anchura ya no es una propiedad fija de un archivo de fuente sino un eje de diseño continuo y programable.
Qué cambió desde 2005
En 2005 una fuente "condensada" era un archivo aparte, si es que existía, y los diseñadores web en su mayoría no tenían ni las fuentes ni el mecanismo de entrega para usar una. Dos desarrollos transformaron esto. La entrega de fuentes web (la era moderna de @font-face, desde aproximadamente 2010) puso a disposición cortes condensados y expandidos reales. Después, las fuentes variables OpenType (de 2016 en adelante) registraron wdth como eje estándar, expuesto en CSS mediante font-stretch — hoy formalmente renombrado como font-width — con valores de palabra clave como condensed (75%) y semi-condensed (87.5%), o porcentajes arbitrarios en las fuentes que soportan el rango.
La propiedad crítica de un eje de anchura diseñado es que no es escalado. Cuando una fuente variable se estrecha a lo largo de wdth, la interpolación del diseñador mantiene consistentes los pesos de los trazos verticales, conserva las contraformas tan abiertas como permite la geometría y reajusta el espaciado. El escalado horizontal — transform: scaleX(0.8) o sus ancestros — hace lo contrario: adelgaza los trazos verticales respecto a los horizontales, distorsiona las curvas y comprime el espaciado proporcionalmente. La distinción entre una condensada verdadera y una pseudocondensada es exactamente la distinción entre una cursiva verdadera y una redonda cizallada, e importa a los mismos lectores con baja visión.
El segundo cambio es conceptual. El diseño adaptable nos enseñó que la longitud de línea, no la elección de fuente, es la variable que los usuarios realmente experimentan — y la anchura es ahora una herramienta para gestionarla. Un titular que salta de línea torpemente en viewports estrechos puede apretarse unas pocas unidades de anchura en lugar de encogerse por debajo del tamaño legible. Esta es una capacidad genuinamente nueva, y viene con maneras genuinamente nuevas de equivocarse.
La anchura y el presupuesto de contraformas
La mecánica de legibilidad de la Versión 1 sigue describiendo correctamente el intercambio. Las anchuras expandidas agrandan las formas de las letras horizontalmente sin añadir información distintiva; a tamaños de lectura ralentizan ligeramente el reconocimiento y desperdician medida. Las anchuras fuertemente condensadas cierran las contraformas y reducen las diferencias espaciales entre pares confundibles — en una condensada apretada, la o, la e y la c convergen, y el ritmo de verticales en palabras como minimum se convierte en una empalizada.
Para el texto continuo, la banda segura sigue siendo estrecha: aproximadamente del 90% al 100% de la anchura normal — de normal hasta justo antes de semicondensada. Los cortes condensados y más estrechos son herramientas de exhibición — titulares, etiquetas, tablas densas en datos donde una condensada diseñada supera de verdad a una regular encogida. Las anchuras expandidas son herramientas de branding. Ninguna pertenece a los párrafos.
El peso interactúa con la anchura. Condensar una negrita cierra las contraformas por partida doble; si debe condensar, quédese en peso regular o más ligero. El tamaño también interactúa: la anchura que funciona a un tamaño de titular de 40px necesita relajarse al tamaño de cuerpo de 16px. Algunas fuentes variables emparejan wdth con un eje de tamaño óptico (opsz) que gestiona esto parcialmente; la mayoría se lo deja a usted.
Zoom, magnificación y baja visión
La población que más necesita anchuras generosas es la población con más probabilidades de encontrarse el tipo condensado en las peores condiciones. Los usuarios de magnificadores de pantalla ven una pequeña ventana sobre una página ampliada: el tipo condensado magnificado revela sus contraformas cerradas y su ajuste apretado sin el contexto compensatorio de la línea completa. Los lectores que usan el zoom del navegador al 200% — un nivel que el criterio Cambio de tamaño del texto (1.4.4) de WCAG 2.2 exige que el contenido sobreviva — activarán sus maquetaciones de viewport estrecho, que es precisamente donde los diseñadores se ven ahora tentados a condensar el tipo para que las cosas quepan.
Resista esa tentación para el texto de cuerpo. Si una maquetación solo funciona al 200% de zoom estrujando las formas de las letras, el problema es la maquetación. El criterio WCAG 1.4.10 (Reflujo) señala la dirección correcta: el contenido debe refluir a una sola columna en lugar de comprimirse. El ajuste de anchura es legítimo para los titulares bajo reflujo; es una señal de alarma cuando se aplica a los párrafos.
Las adaptaciones de espaciado del texto también importan aquí. El criterio WCAG 1.4.12 exige que los aumentos aplicados por el usuario al espaciado de letras y palabras no rompan el contenido. El tipo condensado que depende de un ajuste apretado tiende a desmoronarse visualmente cuando un usuario con baja visión añade interletraje — otra razón para mantener el texto continuo cerca de la anchura normal, donde el interletraje añadido se degrada con gracia.
Evitar la pseudocondensada
La pseudocondensación sobrevive en circulación en tres formas: transformaciones CSS sobre el texto, el font-stretch heredado aplicado a fuentes sin eje de anchura (que los navegadores ignoran correctamente, pero que los diseñadores a veces "arreglan" con transformaciones), y texto SVG o canvas escalado de forma no uniforme. Las tres producen la distorsión de verticales adelgazadas que ningún diseñador de tipos aprobó. Si un diseño necesita genuinamente un tipo más estrecho, las opciones son: una fuente variable con un eje wdth real, un corte condensado diseñado aparte, o una maquetación diferente. No hay una cuarta opción que respete al lector.
Cuando use el eje wdth, prefiera la propiedad de alto nivel font-stretch/font-width sobre las font-variation-settings en bruto, para que el navegador pueda gestionar sensatamente la herencia y el respaldo, y verifique el respaldo: en sistemas donde la fuente variable no carga, una petición de condensada contra una pila de respaldo debe degradarse a anchura normal, no a un estrujamiento sintetizado.
En CSS
/* Width belongs to the wdth axis — never to transforms */
body { font-stretch: 100%; }
.compact-table { font-stretch: 92%; } /* slightly condensed floor */
/* Anti-pattern — distorts stroke contrast and spacing:
.squeezed { transform: scaleX(0.8); } */Recomendaciones
- Mantenga el texto continuo entre aproximadamente el 90% y el 100% de la anchura normal; el hallazgo de 2005 se mantiene.
- Reserve los cortes condensados diseñados para titulares, etiquetas y composiciones de exhibición con espacio crítico; reserve los cortes expandidos para el branding.
- Nunca falsifique la anchura: nada de transformaciones scaleX, nada de escalado no uniforme de texto en SVG o canvas.
- Use el eje variable wdth mediante font-stretch (font-width), y confirme un respaldo digno cuando la fuente no cargue.
- No condense el texto de cuerpo para sobrevivir al zoom del 200% o a viewports estrechos — haga refluir el contenido, conforme a WCAG 1.4.10.
- Verifique que el texto permanece intacto cuando los usuarios aumentan el espaciado de letras y palabras (WCAG 1.4.12); las composiciones condensadas apretadas suelen fallar esto primero.
- Evite combinar anchura condensada con peso negrita o tamaños pequeños; el presupuesto de contraformas no da para tanto.