Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
La edición de 2005 respondía a la pregunta del tamaño con un número: un mínimo de 14 puntos, aproximadamente 19 píxeles en Verdana, para un texto de cuerpo accesible. Era un número defendible para su momento — los tamaños tradicionales de impresión de 9 y 10 puntos eran claramente inadecuados para pantallas toscas, y la enorme altura de la x de Verdana hacía de 19 píxeles una lectura cómoda. Pero la lección más profunda de las últimas dos décadas es que ningún número puede ser por sí solo la respuesta, porque el lector, no el diseñador, es ahora la autoridad final sobre el tamaño. El trabajo del diseñador ha pasado de elegir el tamaño correcto a construir un sistema que sobreviva a las elecciones del lector.
Qué cambió desde 2005
Tres desarrollos reestructuraron la pregunta.
Primero, el predeterminado del navegador fijó el suelo. Todos los navegadores principales traen un tamaño de texto predeterminado de 16 píxeles CSS, y los usuarios pueden subirlo en los ajustes. Dieciséis píxeles se convirtieron en el contrato efectivo entre la plataforma y el lector: el texto de cuerpo al tamaño predeterminado, o mayor, respeta ese contrato; el texto de cuerpo por debajo de él anula una preferencia que el usuario puede haber fijado deliberadamente. La vieja cifra de 19 píxeles en Verdana compensaba la altura de la x atípica de Verdana y el renderizado de la época; en una tipografía de texto moderna típica, 16px se lee de forma comparable. Para tipografías con alturas de la x pequeñas, 17 o 18px es el equivalente honesto — la intuición de 2005 de que la altura de la x importa más que el tamaño nominal sobrevive plenamente intacta, y el CSS incluso la codifica hoy en la propiedad font-size-adjust, que escala las fuentes de respaldo a una razón de altura de la x consistente para que un cambio de fuente no pueda encoger el texto en silencio.
Segundo, los estándares de accesibilidad hicieron de la redimensionabilidad, no del tamaño, el requisito verificable. El criterio de conformidad 1.4.4 de las WCAG (Cambio de tamaño del texto) exige que el texto pueda escalarse al 200 por ciento sin pérdida de contenido ni de función; el 1.4.10 (Reflujo) exige que el contenido refluya a zoom alto sin desplazamiento bidimensional. Una página compuesta a un tamaño fijo generoso puede aun así incumplir ambos; una página a 16px con una maquetación resiliente los supera. El centro de gravedad del estándar es el camino del zoom, no el punto de partida.
Tercero, las pantallas de alta densidad eliminaron las viejas presiones de techo. El texto ya no se degrada al escalarse, así que las ansiedades de 2005 sobre la estabilidad de la maquetación bajo escalado tienen ahora respuestas de ingeniería en lugar de tipográficas.
Respetar al usuario: rem, no px
La práctica más trascendente que adoptar es dimensionar el tipo en unidades rem. Un rem es relativo al tamaño de fuente raíz, que hereda del predeterminado del navegador — de modo que un usuario que sube su predeterminado de 16 a 20px ve cada elemento dimensionado en rem escalar proporcionalmente. El tipo fijado en px ignora por completo esa preferencia.
La defensa habitual — "los usuarios de px todavía pueden hacer zoom" — es solo parcialmente cierta, y la distinción importa. El zoom de página completa escala el texto en px, sí. Pero los ajustes de tamaño de texto del navegador, de los que dependen muchos usuarios con baja visión precisamente porque persisten en todos los sitios sin retoques página a página, no afectan en absoluto al texto dimensionado en px. Fijar el tipo en píxeles desactiva silenciosamente el mecanismo de accesibilidad más duradero de la plataforma. La misma lógica desaconseja fijar el font-size del elemento raíz a un valor en px (el viejo truco de "html { font-size: 62.5% }" es aceptable porque es proporcional; "html { font-size: 10px }" no lo es).
El interlineado pertenece a la misma disciplina: especifíquelo sin unidades (1.5 para el texto de cuerpo es un predeterminado sólido) para que escale con el tamaño que el texto acabe teniendo, en lugar de congelarse en un valor en px calculado para el viewport del diseñador.
Dimensionado fluido sin perder el suelo
El diseño adaptable añadió una herramienta nueva y un modo de fallo nuevo. La función clamp() permite que un tamaño respire con el viewport — clamp(1rem, 0.9rem + 0.5vw, 1.25rem) fija un suelo, un centro fluido y un techo — lo que es genuinamente útil para titulares y para texto de cuerpo que deba crecer en pantallas grandes.
El modo de fallo es el dimensionado solo con viewport. El texto dimensionado puramente en unidades vw no responde al zoom: cuando el usuario amplía, el ancho CSS del viewport se encoge proporcionalmente y el texto se recalcula aproximadamente al mismo tamaño aparente, frustrando WCAG 1.4.4. La defensa está incorporada en el patrón recomendado: incluya siempre un término rem en la expresión fluida y un mínimo basado en rem en clamp(), para que tanto la preferencia del usuario como el zoom conserven su agarre. Después verifique haciendo zoom de verdad al 200 por ciento y confirmando que el texto se hizo el doble de grande.
Una arquitectura moderna de tamaños
Juntando las piezas, una escala tipográfica defendible para la lectura accesible se ve así: texto de cuerpo a 1rem como mínimo (16px con los ajustes predeterminados, más para tipografías de altura de la x pequeña), texto secundario no por debajo de aproximadamente 0.875rem y nunca para lectura sostenida, titulares sobre una escala de razón modesta expresada en rem con fluidez opcional mediante clamp(), y todo font-size fijo en px tratado como un defecto. La guía de 2005 sobre el texto pequeño se mantiene en forma actualizada — el tipo genuinamente pequeño es tolerable solo para cadenas auxiliares breves, nunca para pasajes continuos, y las reglas de contraste de las WCAG se endurecen para él: el texto por debajo de 18pt regular (o 14pt en negrita) requiere una relación de contraste de 4.5:1 en lugar del 3:1 permitido para el texto grande, un reconocimiento explícito de que el tamaño y el contraste se intercambian entre sí.
Para los lectores con baja visión, nada de esto reemplaza la magnificación; hace que la magnificación funcione. La medida del éxito no es cómo se ve la página al 100 por ciento, sino si sigue siendo una única columna legible a 200 y 400 por ciento de zoom.
En CSS
html { font-size: 100%; } /* the reader's choice is the unit */
body { font-size: 1rem; } /* 16px floor for continuous text */
h1 {
/* the rem term keeps user settings and zoom in charge */
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
}
small { font-size: 0.875rem; } /* captions only, never body text */Recomendaciones
- Trate 16px (1rem) como el suelo para el texto de cuerpo; súbalo para tipografías con alturas de la x pequeñas.
- Dimensione todo el tipo en rem; especifique el interlineado sin unidades (en torno a 1.5 para el texto de cuerpo).
- Nunca fije el texto de cuerpo en px, y nunca establezca el font-size raíz a un valor en px.
- Use clamp() para el tipo fluido, siempre con un componente rem para que el zoom y las preferencias del usuario sigan aplicándose.
- Use font-size-adjust para que las fuentes de respaldo conserven la altura de la x prevista.
- Pruebe al 200 por ciento de zoom (WCAG 1.4.4) y al reflujo del 400 por ciento (WCAG 1.4.10) como control de calidad rutinario.
- Reserve los tamaños inferiores al cuerpo para texto auxiliar breve, y dé al texto pequeño el contraste más estricto de 4.5:1 que requiere.