Un truco tipográfico simple para aumentar la legibilidad del texto hasta en un 30%
En su corazón, la tipografía tiene dos características: la legibilidad, que se relaciona con la forma en que se distinguen las letras, las palabras y las frases; y legibilidad que trata de cuán fácil es para el cerebro convertir esos elementos en un mensaje coherente.
¿Alguna vez te has encontrado leyendo una sola línea de texto dos veces, como si se tratara de dos líneas, especialmente cuando tienes los ojos cansados? Ocurre porque el ojo se pierde en su recorrido de derecha a izquierda (o de izquierda a derecha, según su idioma) desde el final de una línea hasta el comienzo de la siguiente. Es la razón por la que los niños trazan líneas con sus dedos cuando se les enseña a leer.
Hay algunas cosas que los tipógrafos pueden hacer para evitar el problema, y son especialmente importantes en grandes cantidades de texto corporal, como informes de noticias o blogs: en primer lugar, asegúrese de que sus caracteres por línea no sean demasiado altos, además, si el ojo tiene que viajar, mayor es la posibilidad de perderse; en segundo lugar, considere una fuente serif, la mayor impresión horizontal crea una mayor distinción visual entre las líneas de texto y el espacio en blanco, que cumple la misma función que el dedo del niño antes mencionado; por último, preste gran atención a su espacio de interlínea principal, que crea canales más claros para que su ojo los siga.
Además de este consejo tradicional, se ha descubierto una nueva técnica. BeeLine Reader es un nuevo y fascinante plugin para Chrome que demuestra cómo funciona.
BeeLine Reader agrega un gradiente de color a las líneas de texto, haciendo que la transición desde el final de una línea hasta el comienzo de la siguiente sea más fácil para el ojo. La Universidad de Stanford llevó a cabo una prueba utilizando el complemento y concluyó que BeeLine Reader resultó en un aumento de velocidad de lectura promedio del 10%; el propio sitio del complemento afirma que un lector experimentado experimentará un aumento del 25-30%.
Debería poder leer el texto de la derecha mucho más rápido que el texto de la izquierda.
Aunque no puedo decir que apruebo que el complemento fuerce el texto en una sola columna, o los colores que han usado (feo para la mayoría e inútil para cualquier persona con daltonismo protanopico), el principio es el sonido. Hay un ejemplo a escala de grises en el sitio de BeeLine Reader que mejora la legibilidad, pero no infringe la marca de nadie. Una prueba rápida de su prueba de lectura, mostré que mejoré un 22% usando la versión gris.
Aunque no hay una manera fácil de implementar este tipo de diseño en CSS simple, es posible codificar como lo demuestra el complemento.
Si está diseñando grandes cantidades de texto en ejecución, especialmente si otras contraints lo obligan a usar columnas que son demasiado anchas o que la altura de la línea es demasiado pequeña, considere aplicar esta técnica para compensar.
¿Qué piensas de la técnica de BeeLine Reader? ¿Cómo te fue en su prueba de lectura? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen codificada por colores a través de Shutterstock