Tipografía y lectura en pantalla: qué mide la investigación

Nadie lee la página como la imagina el diseñador. El archivo de NN/g sobre lectura (en inglés) pasó décadas midiendo lo que la gente hace de verdad con el texto en pantalla. Y lo que encontró es mucho más limitado que las recetas que salieron de ahí. El índice de tema de diseño visual (en inglés) reúne las piezas detrás de este post.

Qué logra medir la investigación en lectura

La investigación tipográfica mide bien dos cosas: la velocidad con que alguien lee un pasaje conocido y dónde cae el ojo en la página. La velocidad se cuenta. La posición se registra. La comprensión, que es lo que importa, no se mide con la misma precisión.

La atención fija el techo. Una revisión de 2008 sobre el comportamiento de lectura (en inglés) encontró que quien visita una página media tiene tiempo para leer como mucho el 28% de las palabras. Lo más probable es que lea el 20%. La base es un estudio con navegador instrumentado de Weinreich y colegas, con 25 personas, recogido en 2005 y reducido a 45.237 vistas de página.

La cuenta ronda los 25 segundos fijos más 4,4 segundos por cada 100 palabras, así que la mitad de la información solo cabe en una página de 111 palabras o menos. Los autores declaran sus límites: no hay seguimiento ocular, así que no se sabe cómo se gastó el tiempo, y el dato es de 2005 (NN/g (en inglés)).

La medición tiene un segundo techo, y el estudio de 2022 lo deja claro. Midió lectura lineal con preguntas después, no el escaneo real. El propio autor llama decepcionante al resultado, porque no lleva a ninguna regla simple.

Legibilidad frente a comprensión

Un texto de 2015 (en inglés) separa tres barreras que el equipo de contenido y el de diseño suelen mezclar. Legibilidad es ver el carácter y distinguirlo de sus vecinos. La facilidad de lectura (readability) es la dificultad de las palabras y las frases, medida en años de escolaridad. Comprensión es entender el mensaje y llegar a la conclusión correcta.

La última es la meta. Las dos primeras son caminos hacia ella.

La legibilidad se prueba. Mide la velocidad de lectura contra un diseño de referencia y trata una caída clara como un problema. Para la facilidad de lectura, apunta a octavo grado para un público amplio y a duodécimo para un público técnico. Para la comprensión, escribe en el idioma de quien lee, empieza con la pirámide invertida, baja la carga cognitiva y acorta el texto en el móvil.

Fuente, tamaño e interlineado

La elección de la fuente importa, pero de una forma curiosa. En el estudio de 2022 la fuente más rápida fue un 35% más rápida que la más lenta para la misma persona. Llegó a 314 palabras por minuto contra 232 (la mejor fuente para leer en línea (en inglés)). La Garamond tuvo el mejor promedio, 312 palabras por minuto. La Franklin Gothic se llevó la mayor cantidad de primeros puestos, el 59% de las veces, con un promedio peor, 271. Esa división sugiere que la fuente ayuda más a quien lee despacio.

El gusto personal es una mala guía. Las personas leyeron un 14% más rápido en la fuente más rápida que en la fuente preferida, así que preguntar qué les gusta no da en el blanco. La velocidad también baja con la edad, unas 1,5 palabras por minuto por año, cerca de un 11% más de tiempo cada 20 años. La comprensión casi no se movió entre las dieciséis fuentes y no separó ninguna (NN/g (en inglés)).

El tamaño y el espaciado pesan más que el nombre de la familia. El estudio del MIT AgeLab de 2017 (en inglés) probó palabras aisladas. Halló que la mayor venció a la menor, el ancho regular venció al condensado y la mayúscula venció a la minúscula, todas con significancia estadística. La minúscula costó un 26% más de tiempo que la mayúscula, y la condensada costó un 11,2% más que la regular. La desventaja de la minúscula aumentó cuando el tamaño bajó.

La advertencia está dentro del estudio. Usó palabras aisladas, y el propio autor registra que en un pasaje largo la mayúscula entorpece la lectura.

El glosario de 2024 (en inglés) aporta el vocabulario de todo esto: abertura, altura de x, interlineado, kerning, huérfana, punto, familia y peso. Una abertura grande suele facilitar la lectura. El texto alineado a la izquierda es el valor seguro. Una línea huérfana deja un fragmento solo y vuelve incómodo el pasaje.

Sobre serif frente a sans serif el glosario es directo. Antes de la tipografía digital la serif tenía la fama. En la pantalla de hoy la sans serif empata y a veces funciona mejor, en parte porque la serif no siempre se renderiza bien en pantalla de baja resolución.

El patrón en F y qué decide

El patrón en F (en inglés) describe un escaneo, no una lectura. El ojo cruza la parte superior, baja en un segundo movimiento más corto y luego recorre el borde izquierdo. Las primeras líneas reciben más atención, y las primeras palabras de cada línea reciben más fijación. Vale en el área de contenido, no en la barra de navegación, y aparece en el móvil y espejado en idioma de derecha a izquierda.

Quien escribe puede sacarle provecho. Pon el punto clave en los dos primeros párrafos. Escribe un título y un subtítulo que digan algo. Empieza el título por la palabra que informa. Agrupa ítems relacionados, usa negrita en la palabra informativa, nombra el destino dentro del enlace, mantén la lista corta y corta lo que no carga peso.

El escaneo es aún más apretado en páginas de producto con dato denso, donde los números llevan el mensaje. El mismo principio vale para microcopy de producto, donde pocas palabras deben entregar la instrucción.

El tamaño bajo el control de quien lee

Una nota de 2018 sobre fuente variable (en inglés) es un caso, no una prueba con usuarios. Reporta analíticas del propio sitio: el 77% de las sesiones usan una ventana mayor a 1100 píxeles, el 16% queda por debajo de 500 y el 7% en medio. El soporte de los navegadores para fuente variable subió del 2% al 70% en dos años, y el 80% de las sesiones del sitio podría usarla.

El artículo propone una forma de pesar el cambio. Cuando una mejora atiende a más o menos el 80% del público, puede valer la pena. Si el mismo cambio daña con gravedad al 20% restante, detenlo. La pantalla no está del todo en las manos de quien diseña, así que la decisión debe respetar los bordes (NN/g (en inglés)).

La jerarquía visual antes del tamaño

La jerarquía visual (en inglés) es el orden en que el ojo consume los elementos, y empieza antes de que alguien eche mano de una fuente más grande. Tres herramientas hacen el trabajo: color y contraste, escala y agrupación.

La jerarquía nace del contraste de valor y saturación contra el contexto, no del color por sí solo. La agrupación nace de la proximidad con espacio en blanco y de una región común con borde. La prueba de entrecerrar los ojos, o un desenfoque por pasos, revela la jerarquía que existe de verdad y delata una que nadie planeó. El mismo equilibrio de tamaño, contraste y espacio guía la tipografía de Material.

Donde la medición no decide

Varios de los números de arriba cargan una fecha de caducidad o un alcance del que no escapan. Cuatro de ellos apuntan en direcciones distintas, y vale la pena mantener esa tensión a la vista.

Mayúscula: el estudio de un vistazo (en inglés) midió la mayúscula un 26% más rápida que la minúscula en una palabra aislada. El glosario (en inglés) y el propio autor avisan que la mayúscula entorpece en un pasaje largo. La unidad de texto es la diferencia, y el contexto decide.
El efecto de la edad: el estudio de lectura de 2022 halló cerca de un 11% más de tiempo cada 20 años. Un estudio anterior del propio NN/g reportó un 16%. El autor plantea dos explicaciones, un cambio real con el tiempo o una métrica distinta, y deja la cuestión abierta.
La elección de fuente contra cuánto se lee: un artículo (en inglés) trata la fuente como decisión de alto riesgo, mientras otro (en inglés) muestra que se lee entre el 20% y el 28% de las palabras. Miden posturas distintas, lectura lineal contra escaneo, así que no se anulan.
La edad del dato: las cifras del 28% y el 20% vienen de datos recogidos en 2005 y se reutilizan como si fueran actuales. Di el año siempre que las cites (cuánto lee la gente (en inglés)).

Las decisiones de fuente y tipografía giran en torno a una pregunta: cuánto de este texto va a consumir alguien de verdad. Las mediciones de arriba acotan la respuesta sin cerrarla.