El texto de una página web puede ser hermoso, simple, salvaje, atractivo, emocionante, o provocar un sin fin de emociones. Fundamentalmente es una ayuda a los usuarios para entender tu mensaje. Para conseguir cualquiera de estas cosas la primera propiedad que debe cumplir es que sea legible.
Este es un factor que a veces se olvida. Los diseñadores trabajamos para adecuar mucha información en espacios muchas veces demasiado pequeños, y otras para conseguir un efecto gráfico especial haciendo que se luzca mejor de lo que se lee. Pero no te olvides de esto: Si tu texto no es legible, tu diseño no cumple.
Entonces, surgen dos preguntas, ¿qué hay del texto como elemento artístico? y ¿qué hace que un texto sea legible? La respuesta a la segunda pregunta es que en realidad es una combinación de varios factores, incluyendo la longitud de línea, el interlineado, el estilo de la fuente, los márgenes y el relleno, y el color y el contraste.
Cada elemento individual contribuye a que sea fácil o difícil leer un texto en la pantalla. Y cada uno de estos elementos es algo que el diseñador puede controlar. Ten en cuenta que cuando hablemos de estos elementos a lo largo de este post, estamos haciendo referencia al texto de cuerpo principal de un sitio web, donde la lectura es sin duda la mayor preocupación. (Muchas de estas recomendaciones son mucho más suaves para otros elementos de texto de la página, siempre y cuando el cuerpo principal sea de fácil lectura.)
- Longitud de la línea: El número de caracteres que se incluyen dentro de una sola línea de texto contribuye en gran medida a la legibilidad del texto. Si el texto es muy largo, puede ser intimidante y difícil de leer. Al contrario, si la línea de texto es muy corta, pueden llegar a causar confusión en la lectura del mismo.
- Interlineado: El espacio entre líneas de texto es igualmente importante. Si fijamos un interlineado demasiado corto y cada línea de texto toca la siguiente, resulta muy complicado comprender el texto que se está leyendo.
- Estilo de la tipografía: El estilo del tipo de letra puede afectar a la legibilidad. Los estilos Serif simple y sans serif son más legibles, mientras que los estilos con serif, ornamentados, , etc. son más difíciles de leer.
- Márgenes y relleno: Al igual que el interlineado, el espacio existente alrededor y entre los elementos que configuran la página web pueden afectar a la legibilidad del texto de contenido.
- Color y contraste: El color del texto dentro del contexto correspondiente es importante también. Si colocas un texto azul sobre un fondo también azul, aunque sea algo diferente, puede ser difícil de leer. Hay una razón para que muchos diseñadores opten por colocar un texto claro sobre un fondo oscuro y viceversa: el contraste hace que los texto sean más fáciles de leer.
Así que ¿cómo puedes crear un texto más legible? Cuando se trata del cuerpo del texto hay algunas pautas básicas para el número de caracteres por línea - según el tipo de dispositivo - que contribuyen a una legibilidad óptima.
Las longitudes de las líneas óptimas pueden ayudar a determinar el tamaño del texto. Lo primero es saber hacia que dispositivo va a ir orientada la maqueta, escritorio o dispositivo móvil. Las siguientes recomendaciones son un buen punto de partida:
- Escritorio: 55 a 75 caracteres por línea, incluyendo espacios; lo ideal es andar cerca de los 65 caracteres por línea.
- Dispositivos móviles: 35 a 50 caracteres por línea
Combina el número óptimo de caracteres por línea con un interlineado grande para aumentar la legibilidad. El interlineado se suele definir como un porcentaje del tamaño de texto del cuerpo y se puede definir como un número fijo o mediante el uso de EMS.
- Escritorio: 1,5 veces el tamaño de la tipografía
- Dispositivos móviles: 1,75-2 veces el tamaño de la tipografía
Otros consejos para aumentar la legibilidad
Para la creación de un texto legible también intervienen otros factores que no son propiamente el texto de cuerpo principal. La utilización de encabezados, listas con viñetas, espacio extra entre párrafos y el color puede incrementar la legibilidad del conjunto.
Debes analizar el conjunto para agregar jerarquía dentro del texto utilizando estos elementos. Y recuerda aportar un estilo definido para cada uno de ellos que trabaje en armonía con el resto de elementos y el cuerpo de texto principal. Los elementos que puedes utilizar son:
- Encabezados
- Enlaces
- Negrita o cursiva en el texto
- Listas de viñetas o numeradas
- Elementos gráficos como fotos o infografías
- Subtítulos
- Entresacas
- Mezclar serif y sans serif según los elementos
10 tipografías “legibles”
A continuación te indicamos algunas tipografías recomendables por su legibilidad.
San Serifs
- Open Sans
- Lato
- Exo
- Nobile
- Droid Sans
Con Serifs
- Arvo
- Old Standard TT
- Abril Fatface
- Vollkorn
- Josefin Slab
Lista de comprobación de legibilidad
Para concluir, un listado de recomendaciones para saber si tu sitioweb cumple con los requisitos para que un texto sea legible.
¿Es el tipo de cuerpo principal lo suficientemente grande? ¿Está dentro del rango de longitud de línea óptimo para cada tipo de dispositivo?
¿Hay suficiente interlineado?
¿Hay suficiente espacio entre el texto y el borde de la página y otros elementos del diseño?
¿Hay suficiente contraste entre el fondo y el texto del cuerpo principal?
¿Hay espacio adicional entre cada párrafo nuevo?
¿Tienen un estilo diferente los encabezados frente al texto de contenido?
¿Utilizas otros elementos (listas de viñetas, negrita, etc) para romper grandes bloques de texto?
¿Utilizas tipografías legibles para el cuerpo de texto principal (preferiblemente serif simple o sans serif)?
La legibilidad es una parte esencial del diseño. Si no puedes leer y entender lo que pone en la página, nunca serás relevante para los usuarios.
Comentarios