Por qué todo diseño necesita tres niveles de jerarquía tipográfica

Jerarquía – es una gran palabra, pero un concepto fácil de implementar (no obstante importante) cuando se trata de la tipografía.

Y esta guía te mostrará cómo usarla para mejorar tus proyectos de diseño.

Incluso si no estás familiarizado con el término, probablemente te hayas topado con la jerarquía tipográfica en muchas ocasiones. Sólo imagina un periódico, con un título, subtítulo y cuerpo de texto. Este es un clásico ejemplo de los tres niveles de jerarquía tipográfica, un enfoque que aún se usa en la actualidad, tanto para materiales impresos como en línea. Los periódicos de principios del siglo XX ofrecen ejemplos especialmente exagerados, como este:

Hoy en día, nuestros encabezados o títulos no tienen porqué ser de quince centímetros de alto para llamar la atención de los lectores, sino que la imagen brinda un recordatorio dramático de qué trata la jerarquía tipográfica – organizar y formatear tus elecciones de letra de forma tal que los lectores o usuarios puedan ver qué es lo más importante, lo que les permite navegar fácilmente por el diseño con tan sólo una mirada y explorar rápidamente para encontrar la información que están buscando.

Mejorar la legibilidad y la usabilidad son algunos de los beneficios más importantes de establecer una jerarquía tipográfica clara. Si, por el contrario, la primera plana de ese periódico se hubiese visto como uno de los dos ejemplos que se encuentran debajo – ya sea con prácticamente ninguna jerarquía tipográfica o una muy limitada –, el mensaje importante siendo comunicado no hubiese sido tan fácil de ver a primera vista. Los lectores hubiesen tenido problemas en distinguir donde comenzaba y terminaba una sección, lo cual produciría un diseño más difícil de leer y con un menor impacto.

Entonces, ¿cómo puedes crear una jerarquía efectiva en tu diseño? Agregar los tres niveles separados de tipografía es un estupendo punto de partida y será suficiente para muchos diseños.

• Nivel uno: Por lo general, tu tipografía de nivel uno será el contenido o la información más importante; este debería ser el elemento tipográfico más inmediatamente visible en tu diseño.
• Nivel dos: Los elementos de nivel dos normalmente ayudan a organizar tu diseño en secciones o a agrupar información relacionada. No deberían sobresalir tanto como tu tipografía de nivel uno, pero ciertamente deberían dirigir a los espectadores a las diferentes partes del diseño para ayudarlos a navegar a través de él con facilidad.
• Nivel tres: Para un formato cargado de texto, la tipografía de nivel tres usualmente es la esencia del diseño. Es aquí donde entra al juego la redacción creativa, donde entra el mensaje de tu diseño. Podría ser larga o corta – un artículo completo, una nota corta, una descripción breve – pero la preocupación principal para este nivel es que sea fácil de leer, ya que es probable que el tamaño de la fuente será algo pequeño.

Como ejemplo, el diseño de esta página de producto es simple, pero cuenta con los tres niveles de jerarquía tipográfica. Podrías decir que el nombre del producto (los audífonos Major Black) es el nivel uno; el precio el nivel dos, y la descripción del producto el nivel tres. Nota cómo el párrafo de la descripción está escrito con una fuente serif fácil de leer con una generosa cantidad de espacio entre las líneas (también conocido como “interlineado”).

Tienes una variedad de enfoques de entre los cuales puedes elegir para organizar visualmente tu contenido. Muchos de ellos podrían parecer pequeños detalles, pero citando a Charles Eames, un influyente diseñador y arquitecto estadounidense: “Los detalles no son los detalles. Estos crean el diseño”. Veamos numerosas opciones que pueden ayudarte a establecer una jerarquía tipográfica y darle a tu diseño el máximo impacto:

El tamaño es la forma más simple de crear contraste entre los diferentes elementos tipográficos en tu diseño, especialmente si sólo estás trabajando con una tipografía. Con tres niveles de tipografía, el tamaño de la fuente generalmente comienza con el más grande hasta arriba (nivel uno; tu información más importante) y reduce su tamaño conforme te desplazas hacia abajo de la página (con cualquier cuerpo de texto siendo el más pequeño de los tres niveles). Debido a que leemos de izquierda a derecha y de arriba a abajo, una jerarquía descendente resulta más natural para que los lectores puedan navegar a través del diseño. Este es un formato muy común que verás en todos lados desde libros y revistas hasta artículos en la web.

Recuerda – la jerarquía se trata de ayudar a que tu información más importante sobresalga visualmente. Si dicha información es un nombre (quizás en tu tarjeta de presentación; o el nombre de un artista o un orador invitado o incluso un póster de un evento), el título de un artículo o blog, o un descuento o promoción especial en un anuncio, si pones esa letra en un tamaño que sea más grande al resto del texto en el diseño, puedes tener la certeza de que llamarás la atención.

Por ejemplo, el precio en esta oferta especial resalta bien debido a su gran tamaño en relación al resto del texto a la derecha del diseño. Usar un rojo brillante para resaltar aún más la promoción también es una elección inteligente (para saber más sobre el uso del color en tu jerarquía tipográfica, desplázate al punto #4).

Piensa otra vez en el título del periódico “On the Moon” que vimos al principio del artículo. ¿La tipografía sans serif negrita no contrasta dramáticamente con la letra cursiva y la serif del resto de la página? Cuando se combinan tipografías no siempre tiene que ser algo así de dramático, el contraste es el componente clave de cualquier combinación de fuentes exitosa.

Y combinar una fuente sans serif con una serif ha sido una práctica común entre los tipógrafos y diseñadores desde hace mucho tiempo. Es una regla general clásica que sirve como buen punto de partida para todo diseño. Incluso si pones tu tipografía de nivel uno en una fuente diferente, eso puede crear un gran impacto de manera visual.

Toma en cuenta que no quieres elegir demasiadas tipografías, lo cual sólo atestaría y amontonaría tu diseño; dos o tres serán suficientes para la casi todos los diseños. También querrás asegurarte de que tus elecciones sean adecuadas para el estilo y contexto de tu diseño.

Por ejemplo, no quisieras poner información importante como la hora y la fecha de un evento corporativo en una fuente jovial y novedosa que sea difícil de leer. O elegir una fuente caligráfica para párrafos largos de texto sería igual de difícil para los ojos. A veces resulta difícil ver claramente ciertas fuentes cuando se reducen sus tamaños. Estos tipos de problemas y cómo afectan la legibilidad y la apariencia general de tu diseño son cosas importantes a considerarse para cualquier proyecto. Para más consejos sobre cómo combinar fuentes efectivamente, lee otro artículo de la Design School, “10 Reglas de oro que deberías seguir cuando combinas fuentes: consejos de un diseñador.”

Muchas fuentes vienen en un gran número de opciones de estilo y grosor. Los diferentes estilos podrían incluir cursiva, minúsculas, o versiones condensadas o extendidas. El grosor se refiere a la ligereza o pesadez visual de una tipografía. Si una fuente que estés usando viene con versiones ligera, mediana, negrita y gruesa, todos esos son grosores diferentes.

Estas características que dan muchas opciones cuando se trata de asignar roles diferentes (o sólo una apariencia diferente pero complementaria) a distintos elementos tipográficos en tu diseño. Toma esta marca para un boletín, por ejemplo. Todas las letras sans serif son de la misma fuente, pero en grosores diferentes. Las letras más robustas del título del boletín lo vuelven más visible; ese grosor visual señala que esa es la parte importante de la jerarquía de este diseño.

Y estas etiquetas han sido diseñadas con una variedad de grosores regulares y robustos, junto con estilos en cursiva y minúsculas – todas usando la misma tipografía.

Al igual que los estilos y grosores, el color es sólo otra forma de hacer que ciertas partes de tu diseño sobresalgan un poco mejor. Debido a que los colores tienen sus propios significados y asociaciones, querrás asegurarte de que tus elecciones correspondan con tu marca y/o el propósito y humor de tu diseño.

Esta invitación para un evento celebrado por una compañía de café sostenible hace justamente eso, con colores otoñales naturales para la tipografía que respaldan las características de la marca y el tema del evento.

Asimismo, esta tarjeta de presentación muestra una combinación distintiva de color azul y amarillo para su tipografía que es muy llamativa. Los colores tienen una sensación fresca y limpia, por lo que – aunque no haya ningún negro o azul marino tradicional a la vista – siguen siendo apropiados para la práctica ortodóntica para la que se crearon las tarjetas.

En un diseño, el espaciado entre los elementos tipográficos – tanto el espaciado de letras y el espaciado de líneas – puede hacer toda la diferencia entre un diseño equilibrado fácilmente legible y uno que se vea amontonado y confuso.

¿Recuerdas los ejemplos anteriores de imágenes sin jerarquía y con jerarquía limitada? Ninguno de estos tenía algún espaciado entre las secciones del artículo de periódico, lo cual produjo un diseño difícil de leer y menos efectivo. Esto se debe a que el espaciado (o espacio en blanco) no sólo separa visualmente las diferentes partes de un diseño sino que también ayuda al espectador a entender y visualizar cómo las piezas trabajan en conjunto.

Por ejemplo, el generoso espaciado (junto con una variedad de tratamientos de letra creativos y líneas de división bien colocadas) hace que la tipografía aquí se vea equilibrada, incluso en un espacio tan pequeño como la etiqueta de una prenda.

Cuando observas un formato bien espaciado, es inmediatamente obvio cómo deberías empezar a leer u obtener la información del diseño. Pero cuando observas un diseño donde tal vez el diseñador sintiera que no tenía suficiente espacio con el cual trabajar (por lo que amontonó mucho contenido sin considerar el espaciado) –, podrías terminar viéndote a ti mismo entrecerrando los ojos para leer un texto que es demasiado pequeño. O quizás para buscar información, a lo mejor una dirección o número de teléfono, pero no es inmediatamente claro dónde encontrarla. O incluso querer evitar por completo interactuar con el diseño porque parece un desastre.

Estas diapositivas de presentación evitan ese problema al usar un generoso espaciado de línea y rodeando el texto y otros elementos con mucho espacio en blanco. Los bloques de color y las formas geométricas también ayudan a organizar y separar los diferentes elementos de diseño.

No quieres que los lectores se sientan frustrados por tu diseño. Por lo que esforzarse en la creación de un diseño equilibrado con mucho espacio blanco ciertamente vale tu tiempo.

El espaciado no trata únicamente de separar elementos tipográficos; sino también de la proximidad, o acercar los elementos relacionados. Reducir el espaciado un poco entre los fragmentos de texto que van juntos (para que sea más evidente que están relacionados) es otra herramienta visual para ayudar a los espectadores a navegar por el diseño con mayor facilidad.

Particularmente para diseños cargados de contenido, como infográficos, la proximidad es la clave para crear un diseño equilibrado que tenga sentido visualmente.

A veces una línea recta de texto no basta cuando haces una declaración con tu tipografía. En ese caso, un poco de inclinación o distorsión podría ayudar a separar tu diseño del resto y atraer algo de atención extra.

Es probable que usarás todos o casi todos estos métodos de creación de jerarquía tipográfica en un solo proyecto de diseño, como se hizo en esta invitación de despedida de soltera. Usa tamaño de letra, tipografías contrastantes, color, espaciado y proximidad, y orientación para producir un buen efecto.

Si se aplican efectivamente, estas técnicas no sólo vuelven a tu diseño más atractivo, sino que también más sencillo – y cuando un diseño combina la forma y la función, eso es algo muy bueno. Así que la siguiente vez que trabajes con tipografía para un proyecto de diseño, prueba algunos de los consejos que te hemos proporcionado. ¡Feliz diseño!