ContraformaLos fundamentos del diseño, explicados

La legibilidad

La legibilidad es la facilidad con que se distingue un signo de otro, y depende del dibujo de la letra, es decir, de la tipografía elegida.

Término

La legibilidad

Categoría

Propiedad medible de la letra y de la composición

No confundir con

La lecturabilidad, que califica al texto y no al signo

Dónde se decide

En el dibujo de la letra y en la medida de la línea

Lámina dibujada: La legibilidad. Entre 55 y 75 caracteres por línea. Fuera de ahí el ojo pierde el renglón o se cansa.
Entre 55 y 75 caracteres por línea. Fuera de ahí el ojo pierde el renglón o se cansa.

La facilidad con que se recorre un texto completo es otra propiedad y se llama lecturabilidad, y depende de cómo está compuesto ese texto. Son dos cosas distintas y se corrigen con decisiones distintas.

La distinción vale la pena porque cada una tiene su remedio. Si la l minúscula, la I mayúscula y el número uno se ven iguales, ese es un problema de legibilidad y sólo se arregla cambiando de familia. Si el texto se sigue con esfuerzo aunque las letras se distingan bien, el problema es de composición: línea demasiado larga, interlineado corto o contraste insuficiente.

Qué hace legible a un signo

Un signo es legible cuando no se confunde con ningún otro del mismo alfabeto, y eso se decide en cuatro rasgos del dibujo. La contraforma abierta, porque el ojo reconoce la a y la e por su interior antes que por su contorno, y una contraforma cerrada las vuelve manchas iguales. La altura de x, porque una minúscula alta ocupa más superficie a igual cuerpo. Las terminaciones diferenciadas, que son las que impiden que la l, la I y el uno colapsen en un mismo palo. Y un peso de trazo que no se cierre al reducir ni se deshaga al ampliar.

La medida: entre 45 y 75 caracteres por línea

La medida es el ancho de la línea contado en caracteres, y es la variable de composición que más afecta a la lectura de un texto largo. Robert Bringhurst, en The Elements of Typographic Style, publicado en 1992, recomienda entre 45 y 75 caracteres por línea y señala 66 como cifra ideal para una sola columna.

El motivo es el movimiento del ojo. Cuando la línea es demasiado larga, el retorno al margen izquierdo falla y el lector repite o salta un renglón. Cuando es demasiado corta, el retorno es tan frecuente que el ritmo se rompe y aumentan las particiones de palabra. La medida se decide junto con el cuerpo y con el interlineado, porque son tres valores que sólo funcionan como conjunto.

VariableValor de referenciaDe dónde sale
Medida de la líneaEntre 45 y 75 caracteres; 66 en una columnaRobert Bringhurst, 1992
InterlineadoDel 120 % al 145 % del cuerpoPráctica establecida en texto corrido
Contraste de texto normal4.5:1 mínimoWCAG, nivel AA
Contraste de texto grande3:1 mínimoWCAG, nivel AA
Texto grande18 pt, es decir 24 px, o 14 pt en negritaDefinición de la propia WCAG

El contraste con el fondo, que sí tiene cifras

El contraste entre el texto y su fondo es la única variable de esta lista que está normada con números verificables. Las Web Content Accessibility Guidelines del W3C, en su nivel AA, piden una relación mínima de 4.5:1 para texto normal y de 3:1 para texto grande. El nivel AAA sube esas cifras a 7:1 y 4.5:1. WCAG 2.0 es de 2008, WCAG 2.1 de 2018 y WCAG 2.2 de 2023, y la versión 2.1 añade el requisito de 3:1 para componentes de interfaz y gráficos indispensables.

Conviene retener la definición de texto grande que usa la propia norma, porque de ella depende qué umbral aplica: 18 pt, equivalentes a 24 px, en peso normal, o 14 pt, equivalentes a 18.66 px, en negrita. Un texto gris claro sobre blanco puede estar dibujado con una tipografía impecable y seguir siendo ilegible por esta razón, y ninguna elección de familia lo compensa.

Qué cambia en pantalla y qué cambia en papel

En pantalla cambian tres condiciones y ninguna es menor. La luz viene de atrás en lugar de reflejarse, lo que altera cómo se percibe el peso del trazo y hace que un texto claro sobre fondo oscuro se vea más grueso de lo que es. La medida no está fijada por el diseñador, porque el texto se recompone según el ancho disponible, un planteamiento que Ethan Marcotte publica en A List Apart en 2010 con el nombre de diseño responsivo. Y el lector controla el tamaño: puede agrandar la letra desde el sistema operativo o desde el navegador, y la composición tiene que seguir funcionando cuando lo hace.

Esa última condición cambia el objeto de la decisión. En papel se decide una composición, con el cuerpo y la medida fijados de una vez. En pantalla se decide un rango: qué medida mínima y máxima resultan aceptables, y qué pasa con la jerarquía cuando el lector duplica el tamaño del texto. Una maqueta que se rompe al agrandar la letra no está terminada.

Los errores que arruinan la legibilidad de un texto correcto

Hay cuatro decisiones que echan a perder un texto compuesto con una tipografía adecuada, y todas se toman por motivos que nada tienen que ver con la lectura.

  1. Estirar la línea hasta ocupar todo el ancho disponible, con lo que la medida se va muy por encima de los 75 caracteres.
  2. Bajar el contraste por debajo de 4.5:1 para que el gris del texto se vea más discreto en la maqueta.
  3. Componer párrafos largos en versales, que suprimen el perfil que dan las ascendentes y las descendentes.
  4. Reducir el interlineado por debajo del 120 % para que el texto quepa en el espacio previsto.

Las cuatro tienen el mismo origen: se resuelve un problema de espacio con un recurso de lectura. Cuando el texto no cabe, la decisión correcta es recortar el texto o rehacer la retícula, no comprimir lo que el lector necesita para leer. Y ninguna de las cuatro se corrige cambiando de familia, porque ninguna es un defecto del dibujo de la letra.