Legibilidad: “La cualidad de ser legible; la propiedad que concierne al hecho de que un artículo pueda ser leído por un largo periodo de tiempo”. – dictionary.com
El texto puede ser hermoso, simple, apasionante, adictivo, emocionante y un gran número de cosas más. Puede provocar emociones y hacer que los usuarios entiendan tu mensaje. El tipo de letra puede ser un gran número de cosas también, pero todos los textos deben tener algo en común: deben ser legibles.
Este es un factor que muchas veces se deja pasar. Los diseñadores web trabajan juntando demasiada información en un espacio pequeño, deciden que el texto debe verse mejor de lo que se lee; pero el punto más importante consiste en lo siguiente: si el tipo de letra de tu texto no es legible, tu diseño no resultará por completo efectivo.
El tipo de texto en Negrita se aplica a casi todo, pero ¿te has preguntado qué hay sobre el tipo de letra como un elemento de arte? Puede que el estilo de letra no vaya con el diseño, pero todo diseño se adaptará a la naturaleza del texto.
Legibilidad en una cáscara de nuez
¿Qué es lo que hace que un estilo de letra sea legible? Es, en realidad, la combinación de algunos factores que incluyen la longitud de la línea, el interlineado, el estilo de letra, los márgenes y el espaciado, el color y el contraste.
Cada elemento contribuye a cuán fácil o difícil se hace la lectura de un texto en la pantalla, y cada uno de estos elementos es algo que el diseñador puede controlar. Notemos que al tratar sobre ellos a lo largo de este artículo, haremos referencia al cuerpo de texto de un sitio web, donde la legibilidad es bastante discutible y nos concierne a todos. (Muchas de estas directrices son bastante simples para otros elementos de texto, mientras el cuerpo del texto sea legible).
Longitud de línea: El número de caracteres en una línea de texto contribuye a la legibilidad en gran parte. Si el texto es extremadamente amplio, puede resultar intimidante y difícil de leer. Lo mismo si la longitud del texto es demasiado corta, lo cual podría causar confusión y estrés a la vista de los lectores.
Interlineado: El espacio que existe entre las líneas del párrafo de texto es también importante. Imagina si en este artículo las líneas chocaran entre sí, de seguro no podrías comprender el texto.
Estilo de letra: El estilo de letra puede afectar la legibilidad. Las fuentes de Simple serif y Sans serif son las más legibles y comprensibles, mientras los estilos adornados, novedosos y en cursiva son los más difíciles de descifrar.
Márgenes y espaciado: Así como el interlineado, la cantidad de espacio en medio y al rededor de las letras también tiene impacto sobre cómo el lector comprenderá el texto.
Color y contraste: El color de texto sobre el fondo correspondiente también tiene mucha importancia. Si se sitúa un texto de color verde sobre un fondo verde, este puede ser difícil de distinguir y leer. Existe una razón por la cual la mayoría de diseñadores optan por una letra de color claro sobre un fondo negro o una letra de color oscuro sobre un fondo claro. El contraste facilita la lectura.
Legibilidad en diferentes pantallas
¿Cómo saber qué tipo de letra es más legible? Cuando se va creando el cuerpo de un texto, existen algunos tips básicos para calcular el número de caracteres por línea, y según el tipo de dispositivo, de modo que favorezcan a una óptima legibilidad.
¿Cómo saber por dónde empezar? Una óptima longitud de línea puede ayudarte a determinar el tamaño del texto. Se puede determinar la longitud de la franja del cuerpo de texto y ajustar el tipo de tamaño para que coincida con un rango ideal de número de caracteres.
Así como estas, existen otras reglas dentro del juego. Esta guía es una buena manera de empezar.
Pantalla de ordenador: De 55 a 75 caracteres por línea, incluyendo espacios; lo ideal es que sean 65 caracteres por línea.
Dispositivos móviles: de 35 a 50 caracteres por línea.
Combina un buen número de caracteres por línea con un interlineado espacioso para favorecer la legibilidad. El interlineado es definido como un porcentaje del tamaño del texto del cuerpo y puede ser definido como un número entero.
Pantalla de ordenador: 1.5 veces el tamaño del tipo de letra.
Dispositivos móviles: 1.75 a 2 veces el tamaño del tipo de letra.
Si estás buscando la herramienta perfecta que te ayude a hacerlo más fácil, prueba el Golden Ratio Typography Calculator.
Otros tipos de legibilidad
El crear un texto legible no necesariamente tiene que ver con el tipo de letra del cuerpo del texto. Los encabezados, boletines y listas electrónicas, espaciado extra entre párrafos y el color, pueden añadir legibilidad (y mejorar la habilidad de lectura de quien lo lee) en cierto modo.
Piensa en agregar jerarquía al texto utilizando estos elementos para crear un diseño web más completo y legible, y recuerda ponerle “estilo” a cada uno de estos elementos con tipo de letra específico, tamaño y color que armonicen con el cuerpo de texto principal.
- Encabezados
- Enlaces
- Negritas o Cursivas en el texto
- Boletín de listas enumeradas
- Elementos gráficos como imágenes
- Fotografías
- Citas
- Tipografías diferentes en cada elemento
10 maneras sencillas de leer tipografías
Ningún artículo sobre legibilidad puede estar completo sin sugerencias de tipografía a utilizar. De modo que aquí dejamos 10 tipografías altamente legibles y populares para la construcción de websites.
- Sans Serifs
- Open Sans
- Lato
- Exo
- Nobile
- Droid Sans
- Serifs
- Arvo
- Old Standard TT
- Abril Fatface
- Vollkorn
- Josefin Slab
Ahora que crees tener una buena idea de la tipografía y el estilo que usarás para tu próximo proyecto de diseño, ¿estás seguro de poner todo de una forma realmente legible? Te dejamos una lista rápida que te ayudará a planear el diseño de una tipografía.
- ¿El cuerpo de texto principal es lo suficientemente grande? ¿Está en el rango de longitud óptima para cada dispositivo móvil?
- ¿Existe suficiente espaciado entre cada línea de texto?
- ¿Existe un espacio suficiente entre el texto, el borde de la página y otros elementos del diseño?
- ¿Hay un contraste suficiente entre el fondo y el cuerpo del texto principal?
- ¿Hay un espacio extra entre cada párrafo nuevo?
- ¿Los encabezados y los otros elementos del texto son diferentes del cuerpo de texto principal?
- ¿Utilizas otros elementos (boletines, textos en negrita, etc.) para cortar bloques largos de texto?
- ¿Utilizas una tipografía legible para el texto principal (preferiblemente un simple serif or Sans serif)?
Conclusión
La legibilidad es una parte esencial del diseño. Si no se puede leer y comprender lo que dice en la página web, el contenido nunca resultará importante para los usuarios.
¿Cómo planificas las estrategias de legibilidad en tus proyectos de diseño web? ¿Conoces tips adicionales para el éxito? Compártelos con nosotros en los comentarios.
