Tipografía para interfaces: legibilidad antes que estilo
Tipografía para interfaces: legibilidad, longitud de línea, interlineado y contraste. Qué piden WCAG 1.4.8, 1.4.12 y 1.4.3, y cómo aplicarlo en tu diseño.
¿Por qué empezar por la legibilidad?
Porque en una interfaz el texto no se contempla: se usa. Una persona escanea un botón, lee un mensaje de error bajo presión o compara dos precios en un celular en movimiento. Una fuente bonita que obliga a leer dos veces no sirve. La decisión tipográfica es, sobre todo, una decisión de carga cognitiva.
Eso no significa que el estilo no importe. Significa que el orden importa: primero que se pueda leer, después que se vea bien. Los criterios de accesibilidad del W3C ayudan a fijar ese piso.
¿Qué dicen WCAG 1.4.8 y 1.4.12?
Hay dos criterios que conviene distinguir, porque el primero es más exigente y está en otro nivel.
1.4.8 Presentación visual (AAA). Pide que el usuario pueda controlar colores, ancho de línea, alineación y espaciado, y fija referencias concretas: el ancho no debe superar 80 caracteres (40 en texto CJK), el texto no debe estar justificado, el interlineado dentro de los párrafos debe ser al menos de uno y medio, y el espacio entre párrafos al menos 1,5 veces mayor que el interlineado. También pide poder elegir los colores de texto y fondo, y ampliar el texto hasta 200 % sin desplazamiento horizontal. El criterio exige que exista un mecanismo para lograrlo; no obliga al autor a imponer ese estilo (W3C: Understanding SC 1.4.8).
1.4.12 Espaciado del texto (AA). Pide que el contenido siga funcionando cuando la persona cambia el espaciado con su propia hoja de estilos: interlineado de al menos 1,5 veces el tamaño de la fuente, espaciado tras los párrafos de 2 veces el tamaño de la fuente, espaciado entre letras de 0,12 y entre palabras de 0,16 veces ese tamaño. El W3C aclara que no es obligatorio usar esos valores en el diseño: son una base que el contenido debe soportar sin perder información ni funciones (W3C: Understanding SC 1.4.12).
Traducido a práctica: 1.4.12 es el mínimo que tu diseño debe resistir; 1.4.8 es un ideal de control para el usuario que, en un producto de nivel AA, no tienes que cumplir de forma estricta.
¿Cuántos caracteres por línea?
Smashing Magazine, en un artículo de Laura Franz de 2014, da un rango de 45 a 75 caracteres por línea para impresión, ampliable a 45–85 para web, y considera que 65 es la medida ideal. Cita a James Craig sobre la fatiga que causan las líneas largas. Es una regla práctica de un texto de opinión, no un estudio controlado, así que úsala como punto de partida (Smashing Magazine: Size matters).
La cifra de 80 de WCAG es un techo, no una meta. Si una línea supera ese número, la lectura se vuelve pesada. Si es demasiado corta, el ojo salta de línea con frecuencia. En una interfaz, eso se resuelve limitando el ancho del contenedor de texto, no solo el tamaño de la fuente.
¿Qué tamaño e interlineado?
El mismo artículo de Smashing Magazine sugiere alrededor de 150 % del tamaño de la fuente como interlineado de referencia, y advierte que el texto más pequeño necesita más interlineado, no menos. No fija un tamaño mínimo universal. Sus ejemplos, pensados para una laptop, usan 16 píxeles en Georgia (texto del artículo) y 13 en Verdana (barra lateral).
La regla que más sirve en la práctica es esta: cuando el texto se hace más grande o la columna más ancha, el interlineado también debe crecer. Un título grande puede tener menos interlineado porque es corto; un párrafo de cinco líneas no.
En pantallas pequeñas, Smashing prefiere sacrificar la longitud de línea ideal antes que reducir la fuente: en su ejemplo, mantener la medida ideal obliga a bajar a 12 píxeles en Verdana y 14 en Georgia, y le parece más difícil de leer que 13 y 17 píxeles con una medida menos ideal. En pantallas grandes, propone mantener un tamaño moderado y estrechar la columna en vez de agrandar el texto.
¿Cómo se construye una jerarquía?
La tipografía es la herramienta principal de jerarquía en una interfaz. Un título, un subtítulo, un texto de cuerpo y una etiqueta deben distinguirse por tamaño, peso y color, no por adornos. Si todo tiene el mismo peso, nada destaca. Si todo está en negrita, la negrita ya no significa nada.
Para que la jerarquía funcione, mantén pocos niveles. Como regla práctica de diseño (no de WCAG), tres o cuatro tamaños de texto y dos pesos suelen bastar. Más escalas suelen indicar que cada equipo agregó la suya.
El color también cuenta: WCAG 1.4.3 (nivel AA) pide una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande, que el criterio define como de 18 puntos o más, o 14 puntos en negrita (W3C: Understanding SC 1.4.3).
Ejemplo ilustrativo
Ejemplo ilustrativo: una app de finanzas personales muestra el saldo en una tarjeta de 320 píxeles de ancho, con títulos en 22 píxeles, etiquetas en 12 píxeles grises y movimientos en 14 píxeles. Las etiquetas grises no alcanzan la relación de 4,5:1 y son difíciles de leer en exteriores. El equipo sube las etiquetas a 13 píxeles con un gris más oscuro, deja el movimiento en 15 píxeles y limita el texto de descripción a 60 caracteres por línea. Después prueba el espaciado con una hoja de estilos que aplica los valores de 1.4.12 y confirma que ningún texto se corta. El diseño no cambió de estilo; cambió de lectura.
Para los colores de esa jerarquía, mira color para interfaces. Y si la jerarquía no se entiende al primer vistazo, revisa la jerarquía visual y la carga cognitiva.
Errores comunes
- Elegir la fuente por estilo antes de probarla con textos reales de la interfaz.
- Justificar el texto, lo que genera espacios irregulares entre palabras.
- Dejar líneas de más de 100 caracteres en pantallas anchas.
- Usar texto gris claro para etiquetas y asumir que todos lo leen bien.
- Reducir la fuente en móvil solo para conservar la longitud de línea ideal.
- Crear demasiados tamaños y pesos, de modo que la jerarquía se vuelve ruido.
Qué puedes hacer mañana
- Abre tu pantalla principal y mide el ancho en caracteres de cada párrafo. Si alguno supera 80, reduce el contenedor.
- Aplica el interlineado de 1,5 a un bloque de texto y revisa si algo se corta al cambiar el espaciado.
- Cuenta cuántos tamaños y pesos usas. Si son más de cuatro tamaños, decide cuáles eliminar.