Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
La primera edición de estas pautas presuponía una pantalla: singular, de escritorio, de tamaño predecible. Esa suposición ha desaparecido. El mismo párrafo debe leerse bien ahora en un teléfono sostenido con el brazo extendido, una tableta, un portátil y una pantalla del tamaño de una pared — y, más importante aún, debe leerse bien para una persona que ha agrandado la fuente de su sistema, ha ampliado la página al 400 por ciento, o ambas cosas. La tipografía fluida es el oficio de escalar el tipo a lo largo de este rango; la tipografía fluida accesible consiste en hacerlo sin desautorizar silenciosamente al lector.
Escalas fluidas y la función clamp()
El idioma moderno establece el tamaño de fuente con la función CSS clamp(): un mínimo, un valor preferido que crece con el viewport y un máximo. En lugar de saltar entre tamaños fijos en los puntos de ruptura, el tipo se desliza — los titulares que son grandiosos en un escritorio descienden con gracia en un teléfono, y los incómodos anchos intermedios que los puntos de ruptura nunca llegaban a servir se manejan automáticamente.
Bien usado, esto es una ganancia genuina para la facilidad de lectura. Usado con descuido, crea una nueva clase de fallo de accesibilidad, y el fallo es lo bastante sutil como para sobrevivir a las pruebas superficiales.
La salvedad de accesibilidad
Todo en esta publicación descansa sobre un contrato: los ajustes de tamaño del lector ganan. Los navegadores permiten a los usuarios fijar un tamaño de fuente predeterminado; los sistemas operativos ofrecen escalado de texto; el criterio WCAG 1.4.4 (Cambio de tamaño del texto) exige que el texto pueda redimensionarse hasta el 200 por ciento sin pérdida de contenido ni de función. Las fórmulas fluidas pueden romper silenciosamente este contrato de dos maneras.
Primero, una fórmula construida puramente sobre unidades de viewport — digamos, un tamaño derivado solo de vw — no responde en absoluto a la preferencia de tamaño de fuente del usuario. La página parece fluida y moderna, y un lector que ha configurado su navegador con un predeterminado más grande no ve efecto alguno. El remedio es construir las fórmulas sobre rem: mantener el mínimo y el máximo en rem, y dar al valor preferido un componente basado en rem junto a su término de viewport. Entonces toda la escala cabalga sobre el ajuste del usuario, como debe ser.
Segundo, el propio clamp puede combatir el zoom. Cuando un lector amplía, las unidades de viewport se encogen en términos de CSS, así que una fórmula cargada de vw cancela parcialmente el zoom: el lector magnifica la página y el texto se agranda menos que el factor de zoom, y en casos extremos no puede alcanzar el 200 por ciento que exige WCAG 1.4.4. Toda escala fluida debe probarse a zoom alto — no darse por supuesta.
Reflujo y zoom al 400 por ciento
El criterio WCAG 1.4.10 (Reflujo) exige que el contenido funcione a un ancho de 320 píxeles CSS — equivalente a una ventana de 1280 píxeles ampliada al 400 por ciento — sin desplazamiento horizontal para leer. Muchos lectores con baja visión viven en estas magnificaciones. El tipo fluido ayuda aquí cuando es honesto: a ese ancho efectivo, la escala debe situarse en su mínimo, las longitudes de línea deben acortarse y nada debe escapar del viewport. Los contenedores de ancho fijo, el posicionamiento absoluto del texto y las maquetaciones multicolumna que se niegan a colapsar son los infractores habituales. Pruebe cada página de lectura al 400 por ciento; toma un minuto y es donde se esconden estos fallos.
Container queries
Las media queries preguntan cuán grande es la ventana; las container queries preguntan cuán grande es la propia caja del componente, que suele ser la pregunta que la tipografía realmente necesita responder. Una tarjeta es una tarjeta tanto si está en una barra lateral como si abarca la página, y su tipo puede ahora responder a su propio ancho, usando unidades de container query para el dimensionado fluido dentro del componente. La misma salvedad se traslada sin cambios: las unidades relativas al contenedor no saben nada de la preferencia de tamaño de fuente del lector, así que también deben combinarse con términos basados en rem y probarse bajo zoom.
Herramientas menores, ganancias reales
Varias propiedades recientes de CSS abordan directamente viejos problemas tipográficos:
- text-wrap: balance iguala las longitudes de línea de los bloques cortos — los titulares ante todo — eliminando la línea huérfana de dos palabras bajo una primera línea larga. Está pensada para unas pocas líneas, no para el texto de cuerpo.
- text-wrap: pretty permite al navegador invertir más esfuerzo en la partición de líneas del párrafo, evitando últimas palabras solitarias y mejorando el margen irregular. El soporte todavía es desigual entre motores; trátela como mejora progresiva.
- font-size-adjust iguala la altura de la x de una fuente de respaldo con la de la fuente web a la que sustituye. Mientras la fuente web carga — o si nunca llega — el respaldo se renderiza a un tamaño aparente equivalente, lo que reduce el desplazamiento de la maquetación y mantiene el texto de respaldo tan legible como la tipografía prevista. Dada la cantidad de lectura que ocurre en los segundos previos a la carga de las fuentes, esta modesta propiedad se gana su lugar.
Por qué este capítulo es nuevo
En 2005 no había tipografía fluida porque no había nada a lo largo de lo cual ser fluido: la web móvil apenas existía, el diseño adaptable no se articularía hasta 2010, y clamp(), las container queries, el control de text-wrap y un font-size-adjust con soporte amplio son todos desarrollos de los últimos años. El propio requisito de reflujo no entró en las WCAG hasta la versión 2.1, en 2018. La multiplicidad de pantallas creó el problema; el CSS solo recientemente ha suministrado los instrumentos; y la disciplina de accesibilidad en torno a esos instrumentos es más joven todavía.
En CSS
h1 {
/* fluid between bounds; the rem term preserves zoom and settings */
font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem);
text-wrap: balance;
}
p { font-size: 1rem; text-wrap: pretty; }
/* Test at 200% and 400% zoom — WCAG 1.4.4 and 1.4.10 */Recomendaciones
- Construya las escalas fluidas sobre rem: mínimos, máximos y un componente rem en el valor preferido, para que las preferencias de tamaño de fuente del usuario se propaguen.
- Nunca dimensione el texto solo en unidades de viewport.
- Pruebe cada plantilla al 200 por ciento de zoom, al 400 por ciento de zoom y con el tamaño de fuente predeterminado del navegador elevado — tres pruebas distintas, todas obligatorias.
- Verifique WCAG 1.4.10: a 320 píxeles CSS de ancho, la lectura no requiere desplazamiento horizontal.
- Use container queries para las decisiones tipográficas a nivel de componente, con la misma disciplina de rem.
- Aplique text-wrap: balance a los titulares; active text-wrap: pretty para el texto de cuerpo como mejora progresiva.
- Defina font-size-adjust (y respaldos igualados en tamaño) para que el texto sea legible antes de la fuente web y sin ella.