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

Lista de puntos a verificar para asegurarse de la legibilidad de los textos en las páginas web. Tamaños, separaciones, número de tipografías usadas...

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

Por Kseso ✎ 6
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:

distinto tamaño para el mismo font-size

La propiedad font-size-adjust y cómo calcular su valor entre distintas familias tipográficas.

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?

uniformidad de alineación en textosLos 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 para que consigas hacer...

  1. texto gris sobre fondo amarillo
  2. o amarillo sobre fondo rojo
  3. o texto verde sobre rojo
... 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. So…

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 Don Kseso Kseso

Comentarios: 6

  1. Cuánta razón tienes Kseso, en ocasiones me he topado con algunos blogs con contenidos muy interesantes; pero desgraciadamente ponen un tamaño de fuente y fondo que hacen que busque en otro sitio. Mis ojos son primero.
    Un saludo.

    ResponderEliminar
  2. Hola Kseso. Acabo de descubrir tu blog y me ha encantado, aunque reconozco que mis conocimientos de Css todavía son demasiado limitados como para poder aplicar muchos de tus tutoriales (¡pero algún día lo conseguiré! :P ).

    La verdad es que, aunque he leído varios artículos relacionados con la legibilidad de los textos, éste es sin duda el que más me ha gustado. Estoy totalmente de acuerdo en que la legibilidad de una web debería ser una de las prioridades absolutas de todos los webmasters. Porque, por muy bien posicionado que estés, como me hagas leer letras blancas sobre fondo negro, o plagues tu web con colores estridentes (tipo rojos o verdes chillones), huiré despavorida aunque el contenido sea muy bueno.

    Tomo buena nota del "font-size: 100%". Tras leer este artículo, he ido a mi blog para verificar los puntos del decálogo y la verdad es que la letra es microscópica (y eso que en su momento llegó a parecerme hasta excesivamente grande). Lo que no acabo de entender es por qué desaconsejas usar texto justificado. En mi opinión, el texto justificado da una sensación de orden que siempre he creído que mejoraría la legibilidad del texto.

    Como ya me he enrollado bastante, te deseo buenas noches y te agradezco mucho toda esta útil información que compartes con nosotros, pobres ignorantes. :P

    ResponderEliminar
  3. Gracias Bettylex por tus palabras, aunque no es para tanto.

    Sobre tus dudas sobre la alineación justificada:
    Fíjate que la única razón es estética. Por lo tanto subjetiva y cada uno puede tener la suya igualmente válida.

    Sin embargo, por la estética de que el margen derecho quede homogéneo se crean ríos dentro de los párrafos, mucho más antiestéticos que lo que se pretende conseguir.

    Pero lo fundamental no es eso. La razón principal está en la legibilidad y accesibilidad del texto.
    Amplié un poco este punto en el artículo. Espero te sirva como punto de partida para buscar más info y evaluar por ti misma esta cuestión y tomar una decisión al respecto.

    Un saludo

    ResponderEliminar
  4. Muchas de tus recomendaciones las voy a poner en practica. Me gusto mucho el articulo.

    ResponderEliminar
  5. Ratio contrast:19,5
    #fffaaa & #000000
    y como el fondo no es blanco, no cansa tanto la vista.

    ResponderEliminar
  6. En la prehistoria experimantabamos con los efectos 3d de texto en color sobre fondo negro, ¡era impresionante! acababas con viendo todo en tecnicolor.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap