Checklist: decálogo para hacer textos legibles en la web 12.9.15

Checklist: decálogo para hacer textos legibles en la web

Con motivo de la remodelación del blog dediqué algo de tiempo al aspecto de la legibilidad de lo escrito. Cuestión que en la versión anterior había dejado totalmente desatendida (los motivos o excusas son lo de menos) y que en esta ocasión decidí que fuese prioritaria.

Fruto de esa inquietud es este pequeño decálogo personal que te propongo como una lista de verificación para que puedas chequear tus propias páginas.

La razón para priorizar el facilitar la lectura es sencilla: Por nada del mundo deberías ser tú quien ponga trabas a que tus visitantes accedan a tus contenidos. Y mucho menos, ser tú quien los fuerce a abandonar la página por ser imposible leer dos párrafos seguidos sin tener que ir al oculista.

Este artículo fue publicado originalmente el 11 de Octubre de 2012 y actualizado el 12 de Septiembre de 2015.

Puntos a verificar sobre la legibilidad de tus textos

¿Has reducido al mínimo el número de tipografías usadas?

Casi todos los autores recomiendan dos tipografías diferentes. Una tipografía en los títulos y otra para el contenido. Y como mucho una tercera para diferenciar algunos elementos muy concretos y minoritarios como pueden ser las citas, quotes o blockquotes, generalmente en itálica si la escogida para los cuerpos no tiene ese estilo.

La excepción y de obligado cumplimiento es mostrar los códigos con una letra tipo monospace.

¿El font-size es lo suficientemente grande?

¿Tu font-size lo marca el diseño gráfico y estética o el contenido y su importancia?

Lo mínimo recomendado es 1rem o 100% del tamaño definido por el usuario en las opciones de su navegador. No hagas trampas para controlar que el tamaño final sea el que tú quieres y no el que necesita quien lee

Renderizado y 'font-size-adjust'

Si utilizas tipografías "no-safety" asegúrate de 2 cuestiones: cómo se ven en los distintos SO y navegadores y su tamaño en relación con su familia genérica. Hay diferencias muy significativas del tamaño resultante con el mismo font-size. Un vistazo a google fonts para verificarlo:

Anchura máxima del párrafo

Asegúrate de que las líneas no se hacen eternas en su longitud o que por ser tan pequeñas no caben ni tres palabras. El tamaño recomendado suele variar, pero la recomendación es que quepan 10 palabras como mínimo y 15 máximo como valor medio.

La alineación

A la izquierda, por unanimidad. Ni derecha, ni centrado ni justificado. Unos apuntes al respecto:

• El texto justificado es antinatural y de entrada fuerza al ojo y al cerebro a hacer un trabajo extra.
• Todo es uniforme, esto es, sin referencias diferenciales entre las líneas.
• Sumar que el ojo y el cerebro están acostumbrados a una separación uniforme entre letras de la misma palabra y entre palabra y palabra.
• El justificado altera la armonía entre palabras y obliga al ojo y al cerebro a asimilarlo.
• Estéticamente (que es la razón del justificado) cambia la creación de líneas rectas a la derecha del párrafo por la ruptura de la armonía. Crea caos y ríos blancos.
• En el caso de líneas suficientemente largas (cada cual tiene un valor límite) dificulta el retorno del ojo al inicio de la siguiente línea. Con lo que hay que retirar esfuerzo de comprensión de la lectura para dedicarlo a encontrar a qué línea sigo.
• Habrá personas que esa pequeña dificultad añadida no le suponga quebrantos (aparentemente). Pero a muchas personas, en especial quienes tengan algún hándicap añadido*, el texto justificado dificulta la concentración sobre lo que se está leyendo y la comprensión de lo leído.
  *: quienes tengan alguna carencia, tanto física como cognitivas.

Interlineado

¿Hay suficiente distancia entre línea y línea?. Una buena regla es que como mínimo no haya superposición del color de fondo al seleccionar varias líneas.

Margen entre párrafos

¿Hay dudas sobre dónde termina un párrafo y comienza otro?

La separación entre un párrafo y el siguiente ha de ser mayor que el line-height de los renglones que los forman.

¿A quién pertenecen los títulos?

Los títulos conforman un cuerpo con los párrafos posteriores y deben marcan un aparte con el texto anterior.

Asegúrate que la distancia entre los encabezados y los elementos precedente y posterior es mayor por arriba que por abajo.

Armonía en la vertical

¿Lectura o eslalon?

Minimiza el desbarajuste de margin/padding izquierdo y el colocar elementos visuales ahora a la derecha ahora a la izquierda que hagan de la lectura una gincana.

Contraste

¿El contraste entre el color del texto y el fondo y entre los párrafos y los encabezamientos es la suficiente para leer sin forzar ni cansar la vista?. ¿La armonía entre los colores elegidos para lo escrito y el background invita a leer o pide salir de paseo?

Unas combinaciones típicas...
texto gris sobre fondo amarillo
amarillo sobre fondo rojo
texto verde sobre rojo
... para que consigas hacer de tus visitantes tus enemigos.

Las recomendaciones como referencia: combinaciones del #222 a #303030 sobre fondos #fff a #f1f1f1.

La palabra escrita es texto

Y como tal tiene que estar en el html. El mayor error de todos, aunque cumplas al cien por cien todo lo anterior y mucho más, es usar imágenes para mostrar el texto. Incluye a cufón y cualquier otro método que convierta el texto en objetos distintos.

Utilidades y herramientas

Calculadora de contraste de Lea Verou

Para solventar un punto de la lista, el contraste entre texto y fondo, lo último de Lea Verou: Contrast-ratio. Pruébala. El artículo explicativo de la autora.

paletton

Paletton.com es una web muy similar a la más conocida Kuler de Adobe. Generadores de paletas de colores. Sin embargo en Paletton encontrarás un valor añadido: bajo el vision simulation nos ofrece cómo será visto un determinado esquema de color por personas con según qué problema visual para percibir los colores.
Web de Paletton.com

Epílogo

Un apunte final para que me pateéis un poco: me gustaría ver, al menos por una vez, a todos los seos y afines incidir con el mismo énfasis sobre la obligatoriedad de hacer web legibles. Por lo menos tanto como machacan sobre otros aspectos. Que no digo que no sean muy importantes, que lo son, pero bastante menos que éste. Creo.

Quid pro quo

Comparte en un comentario eso que me falta o puntualiza alguno de los de arriba.

Un viejo artículo

De 2006 pero totalmente vigente: The 100% Easy-2-Read Standard de Oliver Reichenstein

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso