La jerarquía visual
La jerarquía visual es el orden en que se leen los elementos de una pieza, y se construye con peso visual, no con tamaño.
Término
La jerarquía visual
Categoría
Orden de lectura de una composición
No confundir con
La jerarquía tipográfica, que sólo ordena el texto
Dónde se decide
Al componer, y se comprueba con la pieza terminada
Peso visual, no tamaño: por qué un elemento se lee primero
El peso visual de un elemento es la suma de todo lo que lo hace destacar de su entorno, y el tamaño es apenas uno de los factores. Un bloque pequeño de color saturado sobre un campo gris pesa más que un titular grande en un tono cercano al fondo. Un elemento aislado por mucho espacio pesa más que uno mayor apretado entre otros dos. Por eso agrandar un titular es la respuesta menos eficaz cuando algo no se lee primero: casi siempre el problema es que hay tres elementos compitiendo con el mismo peso, y la solución es bajar dos, no subir uno.
Michel Eugène Chevreul describe en 1839 el contraste simultáneo, es decir que un color cambia según el color que tenga al lado, y Josef Albers lo demuestra caso por caso en Interaction of Color, de 1963. La conclusión se aplica directamente a la jerarquía: el peso de un elemento no es una propiedad suya sino de la relación con lo que lo rodea, y por eso una jerarquía no se puede evaluar sobre un elemento aislado.
Los cinco recursos con los que se construye
La jerarquía visual se construye con cinco recursos, y conviene usarlos de a uno o de a dos, porque aplicados todos al mismo elemento producen un nivel que no se parece a ningún otro de la pieza.
| Recurso | Cómo actúa | Riesgo al abusar |
|---|---|---|
| Escala | Un elemento mayor respecto del formato se lee antes | Rompe la proporción con el resto de la página |
| Peso | Un trazo más grueso o una negrita adelantan el elemento | Una página con demasiadas negritas no tiene ninguna |
| Color | El contraste de valor separa un elemento del fondo | Deja de funcionar en escala de grises y para quien no distingue el matiz |
| Posición | Lo que está arriba y a la izquierda se lee antes en escritura latina | Convierte el orden físico en el único orden posible |
| Espacio | El aire alrededor de un elemento lo aísla y lo eleva de nivel | Consume formato y obliga a reducir el resto |
El recurso del peso tiene un caso que vale la pena conocer. Adrian Frutiger publica Univers en 1957 con 21 variantes numeradas, organizadas en una matriz de peso y anchura, de modo que un diseñador puede recorrer la escala de peso sin cambiar de familia y sin que la jerarquía introduzca un segundo lenguaje en la página. Ese es el argumento a favor de una familia con muchos cortes frente a dos familias distintas.
Tres niveles bastan y cinco casi nunca se distinguen
El número de niveles que una jerarquía puede sostener es pequeño. Con tres, un lector distingue sin esfuerzo el titular, el subtítulo y el texto. Con cuatro, la diferencia entre el tercero y el cuarto ya depende de que el lector compare, y comparar es exactamente lo que no hace. Con cinco o más, la pieza tiene niveles nominales que existen en el archivo del diseñador y no en la percepción de nadie.
La regla de oficio que se sigue de esto es que cada nivel nuevo debe diferenciarse del anterior por al menos dos recursos, no por uno. Un titular que sólo es dos puntos mayor que el siguiente nivel no forma un nivel; un titular que es mayor y además tiene otro peso, sí.
El color como nivel jerárquico tiene un límite medido
Usar el color para marcar un nivel funciona hasta un punto que está normado. Las Web Content Accessibility Guidelines del W3C, en nivel AA, piden una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande, entendido como 18 pt, es decir 24 px, en peso normal, o 14 pt, 18.66 px, en negrita. El nivel AAA sube esas cifras a 7:1 y 4.5:1. La versión 2.1, de 2018, añade un mínimo de 3:1 para componentes de interfaz y gráficos indispensables.
Hay además una restricción que no depende de la norma sino de quién mira. La deficiencia en la visión del color más común es la del rojo y el verde, que afecta a alrededor del 8 % de los hombres y a alrededor del 0.5 % de las mujeres de ascendencia europea, con cifras que varían por población. De ahí se sigue una regla sin excepciones: el color no puede ser el único portador de una información, y todo nivel marcado con color necesita una segunda señal de texto, forma, posición o espacio.
Cómo se revisa una jerarquía antes de entregar
Revisar una jerarquía toma menos de cinco minutos si se hace en un orden fijo. Los cuatro pasos siguientes detectan la mayoría de los problemas antes de que aparezcan en la reunión de aprobación.
- Mirar la pieza entrecerrando los ojos y anotar en qué orden aparecen los elementos.
- Convertir a escala de grises y verificar que ese orden no cambie.
- Contar los niveles y eliminar el que no se diferencie del anterior por dos recursos.
- Medir el contraste de cada nivel de texto contra su fondo y compararlo con 4.5:1.
La jerarquía visual gobierna el mismo problema en un cartel, en una doble página editorial y en la pantalla de una computadora, y es previa a la elección de tipografía. Una pieza con tres niveles claros compuesta con una sola familia se lee mejor que una con cinco familias y ningún orden.