Jerarquía tipográfica: Mejora tu comunicación visual con estos consejos

Tiempo de lectura aprox: 3 minutos, 38 segundos

Se dice que el 95% del contenido en la web es texto. Puedes estar de acuerdo o no, pero no se puede negar que la mayoría del contenido es escrito. La jerarquía tipográfica juega un papel clave en este sentido.

Las imágenes pueden comunicar, pero sin texto o contexto, tienen poco que decir. La arquitectura de la información también es importante, pero ¿qué sucede cuando el texto carece de jerarquía?

Parte de nuestro trabajo consiste en asegurarnos de que las personas que interactúan con nuestro diseño puedan hacerlo sin esfuerzo adicional y logren sus objetivos.

Utilizando diferentes tamaños, estilos y colores de fuente, podemos resaltar los títulos, subtítulos y párrafos de manera que se destaque la estructura y se facilite la lectura. En resumen, la jerarquía tipográfica es la clave para comunicar eficazmente y captar la atención de los lectores en cualquier proyecto de diseño.

Jerarquiza la tipografía

1. Presta atención al contenido en sí: Lee detenidamente lo que te están comunicando para tener una idea clara de cómo organizarlo correctamente.

2. Evita copiar directamente: No copies directamente lo que te envíe el cliente o cualquier otro equipo. Tómate el tiempo para comprender el mensaje y adaptarlo a tu diseño. Esto te permitirá personalizar la tipografía de acuerdo con tus necesidades.

3. Crea una jerarquía visual: Utiliza diferentes tamaños, estilos y colores de fuente para crear una jerarquía visual. Destaca los títulos principales con una fuente más grande y en negrita, y utiliza fuentes más pequeñas para los párrafos de texto. Esto ayudará a los lectores a identificar rápidamente la estructura y la importancia de cada elemento.

4. Realiza ajustes y revisiones: Una vez que hayas terminado de organizar la tipografía, tómate un descanso y vuelve a leerlo con el diseño y la jerarquía aplicados. Esto te permitirá evaluar si es fácil de leer, si se entiende la jerarquía y si es necesario realizar ajustes adicionales.

Recuerda que la organización de la tipografía es crucial para transmitir eficazmente el mensaje y mejorar la legibilidad de tu diseño.

Pasos clave para lograr la jerarquía tipográfica

1. Variación en tamaños

Cuando nos encontramos con un texto, es natural que nos fijemos primero en el tamaño de la letra. Normalmente, asociamos un tamaño más grande con mayor importancia y uno más pequeño con menor relevancia.

En este ejemplo, podemos observar que «Our Collection» tiene un tamaño más grande que el párrafo de texto, mientras que el nombre de las colecciones es aún más pequeño.

Esta variación en los tamaños nos ayuda a establecer un orden de lectura claro: el título de la página tiene mayor importancia que las colecciones, y a su vez, estas son más relevantes que el párrafo de texto

2. Cambio de pesos

El peso de una fuente puede influir en cómo se percibe y destaca en un texto. Una tipografía más fina tiende a pasar desapercibida, mientras que una fuente regular o en negrita llama más la atención. Los pesos más intensos, como el extra bold o el black, permiten marcar aún más la jerarquía en el diseño.

En el sitio web de Standards, utilizan el mismo tamaño de fuente para varios elementos, pero al agregarle más peso a la palabra «Standards», se convierte en lo primero en lo que te fijas. El detalle del punto rojo también ayuda, pero debes tener en cuenta que está presente en otros bloques de texto también.

3. Uso de diferentes tonos

En ocasiones, simplemente utilizando un tono más claro para el texto de párrafo y otro más oscuro para los titulares, se puede crear una jerarquía visual efectiva.

Un buen ejemplo de esto es Stripe, que utiliza colores para diferenciar los elementos. La diferencia de tono entre el título y el párrafo indica de manera clara qué debe leerse primero. Es lo primero que percibimos, y posteriormente nos damos cuenta de que también tiene un tamaño mayor o está en negrita.

4. Juega con los espaciados

La separación entre los diferentes bloques de texto también juega un papel crucial en la jerarquía visual. Un titular que está separado del resto de párrafos destacará más que los demás.

Un ejemplo interesante es el portfolio de Norgram. A pesar de que «Everyday Experiments» y el bloque de texto a su derecha tienen el mismo tamaño, se crea una separación visual utilizando el espaciado. Además, al leer de izquierda a derecha, se genera una clara división entre los dos bloques.

Por otro lado, el elemento «3.3» está mucho más alejado. En este caso, se utiliza el espaciado para indicar que se refiere a algo que no está relacionado con los dos primeros párrafos. «3.3» hace referencia a la tercera imagen de una serie de diapositivas.

 

5. Versalitas: sí, pero con moderación

Aunque no se recomienda utilizar versalitas debido a que pueden dificultar la legibilidad, a menudo se utilizan en titulares más pequeños o para crear variaciones entre ellos.

El uso de versalitas en «Editions» sirve para diferenciar este bloque de contenido y señalar que no es un título propiamente dicho, como lo es «Designed with purpose».