Diseño de páginas web legibles

Redes sociales

Nada es más importante que la legibilidad cuando hablamos del texto de una página web.

Absolutamente nada.

Si no se pueden leer el texto con facilidad, entonces ¿Qué estamos haciendo? ¿Qué vamos a conseguir?

Legibilidad

Tan importante como las palabras en sí es el diseño del texto: la fuentes utilizadas, la separación entre sílabas, cómo está todo organizado en la pantalla… Parte del diseño incluye las palabras mismas: qué términos utilizamos, cómo distribuimos los títulos…

Selección de fuentes

Hay simplemente tantas fuentes a elegir, que seleccionar las que se van a utilizar puede ser abrumador.

No dejes que esto te intimide. Lo mejor que puedes hacer es buscar la sencillez.

Selecciona uno o dos tipos de letra para su sitio. Comienza por buscar un tipo de letra para el cuerpo del texto principal y otra para los encabezados, banners y textos de ruptura. El uso de una fuente diferente para cada elemento es una distracción, que hará el texto confuso y difícil de leer.

Comienza con un tipo de letra sans serif para el cuerpo del texto principal. Los tipos sans serifs son los más fáciles para el ojo humano cuando se trata de detectar la lectura y tienden a funcionar bien, incluso en tamaños pequeños.

Ten en cuenta que el cuerpo del texto será lo más leído del sitio y tiene que ser fácil de procesar por las pantallas de ordenadores y dispositivos móviles. Está bien usar diferentes estilos de letra dentro del cuerpo, pero no te vuelvas loco. Negrita y cursiva son los estilos más adecuados para los puntos de énfasis, pero para grandes bloques de texto, estos estilos pueden ser difíciles de leer.

Si necesitas ayuda para elegir un tipos de letra puedes utilizar herramientas en línea como Google Fonts o Typecast.

Google fonts

División de palabras con guiones

La división de palabras mediante guiones no es aconsejable. Es antiestético. Es ineficaz y confuso.

Por consiguiente, mantente alejado de esto.

Divisón de palabras

La división de palabras se produce cuando una palabra se divide al final de una línea haciendo que parte de la palabra se muestre al final de una línea y el resto de la palabra al comienzo de la siguiente. El uso de guiones ha ido decreciendo con el paso del tiempo en el diseño web, aunque aún se ve de vez en cuando. Se utiliza regularmente en publicaciones impresas, como periódicos.

La idea detrás del uso de guiones es permitir que el texto se espacie adecuadamente (y de manera uniforme) a través de las líneas. Cuando se trabaja con texto justificado, puede que se presenten problemas de espaciado cuando se elimina la separación silábica.

Las palabras divididas con guiones hacen que el texto sea difícil de leer. La aparición de guiones, puede hacer que una persona pierda el hilo de la lectura o malinterprete la palabra dividida. El uso de guiones también pueden cambiar inadvertidamente el énfasis de ciertas palabras o su impacto en el texto. Inconscientemente un guion puede indicar a un lector que la palabra es un poco menos importante que otras palabras, que se muestran completas.

Reserva los guiones sólo para las palabras que los necesitan, para palabras compuestas o como modificadores, y no rompas las líneas. El texto se verá más limpio, más profesional y legible sin todos esos guiones molestos en los extremos de las líneas.

La justificación

Al igual que la separación de sílabas, la justificación no está de moda en el diseño web, aunque todavía se usa comúnmente en la impresión.
Se habla de justificación cuando al escribir un texto, todas las líneas tienen la misma anchura, es decir se encuentran alineadas tanto por la izquierda como por la derecha. Este efecto, se consigue generalmente modificando el espaciado entre palabras y haciendo que éste no sea uniforme. El uso de este tipo de alineación del texto puede funcionar con algunos sitios web, pero la mayoría de las veces no es la opción más atractiva visualmente. Si utilizas este tipo de alineación revisa el texto, leyéndolo un par de veces para medir como se distribuyen las palabras en él y valora si la justificación es una opción viable.

Hay otros tipos de  alineación del texto. Puede escribir el texto para que se alinee a la izquierda, a la derecha o en el centro.

alineación

Para los sitios web en idioma Español, la alineación izquierda es la práctica más común. Alinear el texto al margen izquierdo y dejarlo desigual en el margen derecho. El resultado, generalmente, es más agradable y fácil de leer. Esta es tu mejor opción para trabajar con grandes bloques de texto.

La alineación a la derecha es otra opción, pero no funciona tan bien con grandes bloques de texto. Con el texto alineado al margen derecho y desigual en el izquierdo, el orden de lectura natural se invierte y en textos extensos, la lectura se ralentizará, la comprensión será más dificultosa y por consiguiente el lector se sentirá incómodo. Reserva el texto alineado a la derecha para pequeños bloques, citas de terceros, explicaciones cortas… que desees incorporar en tu esquema de diseño.

El texto centrado es una recurso muy popular a pesar de que no es recomendable para grandes bloques de texto (aunque es cierto que lo encontrarás en muchas web). Los problemas de la alineación centrada son muy parecidos a los relacionados con el texto alineado a la derecha: no es “natural” y por consiguiente afecta a la velocidad de lectura y comprensión del mismo. La alineación centrada da cierta impresión de seriedad (a menudo se utiliza para artículos tales como invitaciones) y debe reservarse para los pequeños textos donde el énfasis es importante. No es una buena opción para grandes bloques.

Otros efectos

Sombreados y contornos

Utiliza ambos efectos con moderación en textos de tamaño grande como un punto de énfasis, pero evítalos en el texto de pequeño tamaño.

Borrados y subrayados

Ambos son de uso común, tachado, para significar algo que ya no se considera válido y subrayando, para dar énfasis. Utiliza ambos efectos siempre que lo consideres necesario, pero hazlo con moderación. Ambos funcionan bien con pequeños fragmentos de texto, pero causan tremendos problemas de legibilidad cuando se extienden a más de unas pocas palabras.

Rotaciones y distorsiones

Estos efectos son interesantes cuando se utiliza la tipografía como una forma de arte. Pero no son tan eficaces cuando se trata de transmitir un mensaje. Deberías evitar las rotaciones de texto y distorsiones en el cuerpo principal del texto.

distorsión

Color

El uso del color puede ser una gran opción para proporcionar énfasis a una palabra en un bloque de texto. (Las combinaciones más comunes y visualmente más atractivas de colores para bloques de texto son: gris oscuro o negro sobre blanco, o blanco sobre un fondo oscuro.) El objetivo del color en el texto, deber ser el marcar un fuerte contraste con el fondo para que sea fácil de ver y leer. Los colores ultra brillantes (pienso en el amarillo o magenta) pueden ser difíciles de leer a menos que se utilice un tipo de letra grande o gruesa. Considera la negrita como el recurso general para dar énfasis adicional, y reserva el color para un número limitado de palabras.

color

Encabezamientos coherentes

Los encabezamientos, banners, titulares y otros textos de este tipo deben ser de fácil lectura. No sólo se utilizan para estructurar el texto, también deben dar a los lectores una idea general de la web.

Hay que mirar como quedan las líneas de texto de los títulos y encabezamientos. ¿Se llenan las líneas? ¿Cuántas líneas ocupan?

Visualmente querrás encabezados que tengan un aspecto coherente. Esto se aplica tanto al estilo de letra como a la distribución del texto. Evita los encabezamientos que llenan una línea completa y sólo una pequeña fracción de la siguiente. Piensa en ellos, como en rectángulos a llenar; buscarás que todo encaje dentro del rectángulo sin dejar inmensos espacios en blanco.

Con tamaños de texto grandes, tanto la división de palabras como la alineación justificada no deben utilizarse.

Trata de escribir encabezamientos y titulares que ocupen sólo una línea (dos como máximo), utilizando palabras activas.

Títulos coherentes

Piensa en el tamaño de fuente en proporción al del cuerpo del texto principal. Los titulares y encabezamientos que son significativamente más grandes y con diseño más audaz parecerán gritar al lector, mientras que los tamaños más pequeños, parecerán susurrarle.

El contraste es de gran importancia al utilizar tamaños grandes. Al elegir las fuentes, una buena opción, es utilizar una que no sea muy distinta a la del cuerpo del texto. Otra opción es utilizar un patrón de colores distinto del cuero del texto, para de esta forma afianzar su jerarquía.

Hay que pensar también, en el espacio a dejar alrededor de las palabras escritas con un tamaño grande. Como norma general se añadirá espacio adicional encima de cada encabezado o título y reduciremos ese espacio entre éste y el cuerpo.

Todo esto puede ser difícil de lograr y hay que tener cuidado con lo que se hace. Es común utilizar un diccionario de sinónimos y sustituir, por ejemplo, una palabra larga por otra más corta, con la finalidad de obtener un diseño más atractivo visualmente, pero siempre, sin correr el riesgo de usar la palabra incorrecta o el uso de un término que sea difícil de entender para los lectores. Piense de forma conversacional al escribir. Redacta el texto y luego revísalo para acortarlo o alargarlo, pero manteniendo siempre la integridad de lo que quieres expresar de una forma clara y fácil de leer.

Conclusión

Crear un texto legible es algo más que utilizar fuentes sencillas, tener cuidado con la división de palabras o utilizar la alineación correcta. Se trata que el escrito final tenga sentido y presentarlo de una manera amigable.

Piensa en tu público al ponerlo todo junto. tendrás que utilizar una técnica y estilo diferente al escribir entradas para un blog de artículos para bebes (estilo tradicional, de colores suaves) frente a un blogs que trata de tatuajes (probablemente más atrevido y oscuro). Los efectos visuales sobre los lectores son muy importantes, deben sentirse cómodos e identificarse con el diseño al leer.

Piensa en todo ello como en un conjunto. El texto, ¿Es fácil de leer? ¿Hay que acercarse o alejarse del monitor para leerlo? ¿Estás entrecerrando los ojos para hacerlo? Estas son las verdaderas preguntas que debes responder, porque al final, la legibilidad es lo que más importa.

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.