Jerarquizando el texto: pesos, tamaños y colores.
La jerarquía del texto suele y debe ser bastante tradicional, y que en los proyectos web casi siempre se compone de un título y de una descripción, o título más subtítulo y descripción para jerarquizar el contenido.
Generalmente el título debe ser el concepto, debe hacer el efecto llamada a nuestro usuario, y el subtítulo se utiliza para precisar y dar más detalle del título. La descripción realmente es leída exclusivamente por los clientes potenciales interesados por el título y en menor medida por el subtítulo.
Hay muchas empresas en cuyas presentaciones o sitios online se sigue el patrón «Z» en las páginas de descripción de características de sus productos, donde el usuario lee de izquierda a derecha y de arriba abajo, hasta leer todo el contenido. Las imágenes hacen de articulación. La jerarquía en la tipografía es evidente y facilita la lectura al usuario. Además, con este patrón ayudamos al usuario a escanear y viajar por nuestro contenido, tal y como vimos en nuestro curso sobre «Cómo diseñar una landing page».
Este tipo de patrón es muy efectivo para ordenar bloques de texto relativamente largos, usando como puntos focales y de unión entre los bloques de información mediante las imágenes de cabecera, esquemas, etc. Sueles utilizarse muchos elementos visuales, excepto videos para evitar interrumpir el hilo narrativo de cómo una tras una, la empresa nos cuenta los beneficios o las características de sus productos.
Como ejercicio muy educativo te recomiendo que cuando te encuentres una landing con la distribución en «Z», apuntes los titulares de los bloques de texto, uno al lado del otro, verás como ese mismo orden de mensaje aparece en más lugares. Nunca es al azar.
Jerarquía por Pesos
Esta jerarquía se puede diseñar de diferentes formas, y obtendremos diversos resultados. El tamaño de la fuente y el peso, suele ser mayor en los títulos, porque es el “core” de nuestro mensaje. Es muy normal utilizar fuentes bold o semibold.
En las descripciones generalmente se utilizan pesos “medium”, “regular” o “normal”, ya que el mayor cometido es que al tener mayor cantidad de texto sea legible y cómodo de leer.
En los subtítulos generalmente se juega con el contraste entre el título (bold) y la descripción (regular) y se suele utilizar una fuente de tamaño un poco inferior al título pero superior a la descripción, lo cual nos permite “adelgazar” la fuente con un peso light, fina o semi-light, de forma que se suele usar una fuente un poco menor y con muchísimo menos peso.
Gracias a las pantallas retina, y a los resoluciones de los dispositivos que se utilizan hoy en día, pueden utilizarse fuente finas sin ningún temor de legibilidad.
Jerarquía por Tamaños
En cuanto a tamaños mínimos y la relación entre la jerarquía de tamaños: siempre debemos de considerar la usabilidad y la legibilidad.
En web pienso que jamás deberíamos usar una fuente por debajo de 12-14 px. Y un peso de regular, ya que un menor peso haría menos legible este texto.
Tomando como base esa medida, podríamos establecer una relación con el tamaño máximo para que exista coherencia entre todos los tipos de texto de nuestro documento, y se perciba la jerarquía.
No deberíamos de usar para subtítulos más del doble del tamaño del texto de una descripción, ni más de la mitad del tamaño del subtítulo para el título.
Al tener unos tamaños mayores, podemos valorar en disminuir el peso de subtítulo e incluso título.
No me gusta establecer cantidades fijas en elementos del diseño, porque al fin y al cabo, las normas están para romperlas y así favorecer la creatividad, pero sí es cierto que una relación ordenada entre los tamaños de las fuentes del documento nos van a ayudar a dar coherencia, y el usuario final lo va a notar.
Resumiendo, si usamos para una descripción un texto de 12 px, no usar más de 24 px para el subtítulo ni más de 36 para el título.
Podemos acentuar o atenuar el tamaño del texto con su peso, de forma que a mayor tamaño, menor puede ser el peso de la fuente, dando un aspecto más sofisticado.
Las combinaciones entre tamaños y textos son casi infinitas.