Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
Durante las dos primeras décadas de la tipografía web, una tipografía era un conjunto de instancias congeladas: regular, itálica, negrita, quizá una fina y una negra si el presupuesto lo permitía. Toda elección entre ellas era una elección entre puntos fijos. Las fuentes variables — introducidas con OpenType Font Variations en 2016 y hoy con soporte en todos los navegadores principales — sustituyen esos puntos por rangos continuos. Un solo archivo contiene un espacio de diseño completo, y el tipógrafo, la hoja de estilos o el lector pueden seleccionar cualquier posición dentro de él.
Esto importa a la accesibilidad porque muchos de los ajustes que esta publicación ha recomendado — un toque más de peso en tamaños pequeños, una composición ligeramente más ancha para lectores con baja visión, formas más robustas en condiciones adversas — eran antes imposibles salvo que la fundición hubiera tallado casualmente esa instancia exacta. Ahora son números.
Los ejes
Una fuente variable expone ejes de variación con nombre. Cinco están registrados en la especificación OpenType:
- wght (peso) — continuo desde el filiforme hasta el negro, en lugar de escalones de cien.
- wdth (anchura) — de condensada a expandida, sin la distorsión del escalado mecánico.
- opsz (tamaño óptico) — formas adaptadas al tamaño en el que serán leídas.
- slnt (inclinación) e ital (itálica) — el ángulo oblicuo y el cambio a formas de itálica verdadera.
font-weight, font-stretch, font-style y font-optical-sizing — que deben preferirse sobre la propiedad de bajo nivel font-variation-settings para que los estilos apliquen la cascada y se combinen de forma predecible.
El tamaño óptico: regresa una herramienta antigua
El tamaño óptico no es nuevo; es muy antiguo, y su ausencia de la tipografía digital era la anomalía. En el tipo de metal, cada cuerpo se tallaba por separado, y el grabador de punzones compensaba: los cuerpos pequeños recibían trazos más robustos, espaciado más ancho, alturas de la x mayores, contraformas más abiertas; los cuerpos de display recibían un contraste más fino y un ajuste más apretado. La fotocomposición y luego las fuentes digitales abandonaron esto, escalando un único máster a todos los tamaños — y por eso tanto texto digital pequeño se ha sentido fino y embotado.
El eje opsz restaura la práctica. Una fuente variable bien hecha con eje de tamaño óptico renderiza el texto de tamaño de leyenda con formas robustas y abiertas, y el texto de titular con refinamiento, automáticamente, cuando font-optical-sizing: auto está en efecto (el valor predeterminado). Para los lectores con baja visión, que viven en el extremo pequeño y forzado del rango, esto es una ganancia directa de legibilidad que no le cuesta al diseñador nada más que elegir una fuente que lo soporte.
Los grados: peso sin reflujo
Un eje de grado cambia la oscuridad de los trazos sin cambiar la anchura de los glifos. Esa distinción es todo el sentido: ajustar font-weight altera las anchuras de las letras y por tanto refluye el texto, mientras que ajustar el grado no. El texto puede volverse visualmente más pesado o más ligero y cada salto de línea permanece en su sitio.
El capítulo anterior señalaba que el texto claro sobre superficies oscuras parece más negrita que el mismo tipo sobre blanco. El grado es el instrumento preciso para esa corrección: baje ligeramente el grado en modo oscuro y los dos temas igualan su peso aparente, sin desplazamiento de la maquetación cuando un lector alterna entre ellos. Los grados son igualmente útiles para los estados hover y seleccionado, y para compensar entre pantallas que renderizan el tipo más pesado o más ligero de lo previsto.
El rendimiento es accesibilidad
Una familia que antes requería seis u ocho archivos de fuente puede servirse como uno o dos (redonda e itálica). Aunque un archivo variable es mayor que cualquier instancia estática individual, casi siempre es menor que la suma de las instancias que sustituye, y cuesta menos peticiones de red. Para los lectores con conexiones lentas y dispositivos modestos — una población que se solapa fuertemente con los lectores a quienes sirve el trabajo de accesibilidad — esto significa menos tiempo mirando texto invisible o de reserva y menos intercambios bruscos cuando la fuente web por fin llega. El subconjuntado y los formatos modernos de compresión reducen el coste aún más.
Hay también un beneficio de diseño con dividendo de accesibilidad: cuando todos los pesos están disponibles, los diseñadores dejan de recurrir a la falsa negrita y la falsa itálica, y dejan de elegir un peso demasiado fino solo porque era el único archivo cargado.
Personalización: la promesa mayor
La oportunidad más profunda sigue mayormente sin realizarse: dejar que el lector afine el tipo. Una aplicación de lectura o un sitio de lectura larga construido sobre una fuente variable puede ofrecer un deslizador de peso, un ajuste de anchura, un control de espaciado — continuos, inmediatos y reversibles. Un lector con baja visión que encuentre fino el peso predeterminado puede engrosarlo a su gusto en lugar de elegir entre "normal" y "negrita". Un lector mayor puede ensanchar ligeramente las formas. Estos son exactamente los ajustes que la investigación en baja visión lleva tiempo sugiriendo que ayudan, y las fuentes variables los hacen baratos de ofrecer.
Pocos sitios lo hacen todavía, y no existe una interfaz estándar para ello. Pero la barrera técnica ha caído, y la posición de esta publicación es que el tipo afinable por el lector es hacia donde debería dirigirse la tipografía de pantalla: el diseñador fija un valor predeterminado bien juzgado, y el lector puede apartarse de él.
Por qué este capítulo es nuevo
Cuando apareció la primera edición, las páginas web no podían incrustar fuentes con fiabilidad en absoluto — la tipografía consistía en elegir entre el puñado de tipografías instaladas en la máquina del lector. La incrustación de fuentes web llegó hacia 2010; las fuentes variables se especificaron en 2016 y alcanzaron un soporte amplio en los navegadores en los años siguientes. La idea de que una hoja de estilos pudiera especificar el peso como 435, o de que el tamaño óptico pudiera regresar de la era del metal a través de un eje en un archivo, sencillamente no existía para ser escrita.
En CSS
body {
font-optical-sizing: auto; /* opsz: text forms at text sizes */
}
@media (prefers-color-scheme: dark) {
/* grade trims dark-mode weight bloom without reflow */
body { font-variation-settings: "GRAD" -20; }
}Recomendaciones
- Prefiera fuentes variables para los proyectos nuevos; sirva un archivo de redonda y uno de itálica en lugar de una pila de estáticos.
- Elija tipografías con eje de tamaño óptico para interfaces que componen texto en muchos tamaños, y deje
font-optical-sizing: autoen efecto. - Use el eje de grado (donde exista) para corregir el peso aparente en modo oscuro sin provocar reflujo.
- Use las propiedades CSS de alto nivel (
font-weight,font-stretch) en lugar defont-variation-settingsen bruto siempre que sea posible. - Nunca dependa de la falsa negrita ni de la falsa itálica; el archivo variable pone a disposición las formas reales.
- Donde la lectura larga sea el producto, considere ofrecer a los lectores control directo del peso y la anchura — y recuerde su elección.