La legibilidad en pantalla


Las tipografías son algo tremendamente importante, en primer lugar por que se da un carácter llamativo al texto, es decir el texto comunica como imagen que es y sobretodo por que existe una parte funcional esto es, que debe poder ser leído correctamente.  Así que de este informe podremos sacar algunas conclusiones.

Del blog de SEMPATIZA

Teniendo en cuenta que a día de hoy los hábitos de lectura han cambiado, de la lectura impresa a la lectura en pantalla, repasaremos las claves de la legibilidad en pantalla.

Actualmente la lectura en pantalla se ha convertido en algo habitual así que es importante reflexionar sobre las diferencias entre ésta y la lectura en un medio impreso.

Sabemos que el usuario que lee en pantalla realiza un “escaneo” de la información y que por tanto la lectura parece más rápida pero en realidad no es así, y la asimilación de contenidos es otra historia.  Estudios realizados por terceros sugieren que la velocidad de lectura es aproximadamente un 30% más lenta y la comprensión del texto se reduce al 50%.

Por tanto, el diseño digital, y en particular, el diseño web, presenta los problemas propios del medio, siendo de especial importancia el uso de la tipografía, como elemento principal en el diseño de un medio de lectura.

Debido a la peculiaridades de este medio, se hace necesario establecer una serie de reglas específicas, que actualmente provienen de un sistema de ensayo/error.

En nuestro caso analizaremos las reglas que provienen de la investigación realizada con la colaboración de la “Cátedra de Tipografía II, Prof. Carlos Venancio, Facultad de Arquitectura, Diseño y Urbanismo, de la Universidad de Buenos Aires”. (visto aquí)

El objetivo del estudio será establecer qué tipografías y en qué condiciones resultan más legibles.

Para ello se contó con la colaboración de 124 estudiantes, en su mayoría de Diseño Gráfico, en el que leerían 3 textos a su propio ritmo y sin delimitar el entorno (tamaño de monitor, resolución, profundidad de color, navegador o sistema operativo)

El estudio se centraba en 4 ejes:
– familia tipográfica
– cuerpo/interlínea
– ancho de columna
– color.

Para la prueba el cuerpo y la interlínea es de 12/15 pixeles y 14 pixeles para títulos, texto negro sobre fondo blanco. Las tipografías seleccionadas son: 
– Verdana
– Helvetica/Arial
– Georgia
– Times/Times New Roman
– Trebuchet MS
– Courier/Courier New
– Comic Sans

Familias Tipográficas

Los siguientes gráficos reflejan los resultados del test respecto a la Familia Tipográfica.

El primer gráfico mide la velocidad de lectura. Aunque no se aprecian grandes diferencias, la tipografía “verdana”, y otras tipografías “sin serifes” son las que consiguen una lectura más rápida.

familiatipografica01

El segundo gráfico mide la comprensión del texto. De nuevo la fuente “verdana” junto a “Comic Sans” muestran un mayor grado de comprensión.

familiatipografica02
El tercer gráfico mide el análisis subjetivo: legibilidad, personalidad y elegancia. En legibilidad la fuente “verdana” vuelve a destacar, aunque la fuente “trebuchet MS” obtiene los mejores resultados totales en análisis subjetivo.

familiatipografica03

Cuerpo e interlínea

Los siguientes gráficos detallan los resultados del estudio realizado respecto al cuerpo e interlínea del texto.

El primer gráfico refleja el promedio del tiempo de lectura. El cuerpo 12 e interlineado 12 alcanza el mejor resultado de velocidad de lectura.

cuerpoeinterlinea

En el próximo gráfico podremos revisar el resultado de comprensión del texto. Un cuerpo 12 y un interlineado bastante amplio, 18, resultaron ser lo de más fácil comprensión para los participantes.

cuerpoeinterlineado02

El tercer gráfico detalla el análisis subjetivo. Los participantes valoraron la legibilidad, el confort y color tipográfico. De nuevo, el cuerpo 12 interlineado 18 alcanzó la mejor valoración.

cuerpoeinterlineado03


Ancho de Columna

Los siguientes gráficos reflejan los resultados del estudio respecto al ancho de columna.

El primer gráfico mide el tiempo de lectura promedio. Un ancho de columna bastante amplio, 120 caracteres por línea, resulta ser el más rápido de leer en proporción al resto.

anchodecolumna01

En el segundo gráfico se mide la comprensión del texto según el ancho de columna. En los resultados apenas se aprecian diferencias, aunque el ancho más amplio, 120 caracteres por línea, consigue el mejor resultado.

anchodecolumna02

En tercer lugar encontramos el  gráfico de análisis subjetivo. Resulta llamativo que la columna no excesivamente amplia, 60 caracteres, alcanza la mayor valoración.

anchodecolumna03

Color

A continuación mostraremos los gráficos representativos del estudio de color del texto.

En el primer gráfico se mide el tiempo de lectura promedio según los colores elegidos. La combinación texto blanco sobre fondo verde resultó ser la más rápida de leer.

colortexto01El segundo gráfico refleja los resultados del estudio de la comprensión del texto. La combinación texto negro sobre fondo blanco resultó la más legible.

colordetexto02El tercer gráfico detalla el análisis subjetivo, la combinación de texto negro sobre fondo blanco obtuvo el mejor resultado.

colordetexto03

Pese a que no se podían sacar conclusiones totales, el resultado promedio general sería:
– Fuente Tipográfica: Verdana
– Cuerpo/Interlinea: 12/15
– Negro sobre blanco.

Algunas de nuestras conclusiones son, respecto a la familia tipográfica, que las fuentes “sin serifes” tales como verdana, helvetica o arial son más legibles.

El texto color negro sobre fondo blanco resulta más “cómodo” de leer, y un ancho de columna mayor así como un cuerpo de texto  e interlineado también amplio favorecen la legibilidad y comprensión del texto.

Resulta llamativo la diferencia entre funcionalidad y estética en los resultados del estudio, que demuestran que no siempre “gusta” más lo que es más eficiente.

————————————————————————————

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s