Comprender La Jerarquía Tipográfica

Una de las más importantes técnicas para comunicar eficazmente el contenido (o al menos “honrarlo”) se basa en la jerarquía tipográfica. La jerarquía tipográfica es un sistema empleado para organizar los tipos de manera que se establezca un orden de importancia en la información, permitiendo al lector descubrir fácilmente aquello qué busca y navegar a través del contenido. Guía la vista del lector para ayudarle a localizar dónde empieza y termina cada sección, al mismo tiempo que permite al usuario aislar cierta información basándose en el uso consistente de los estilos a lo largo del cuerpo del texto de una página.

“La tipografía existe para honrar el contenido.”

Robert Bringhurst: Los Elementos del Estilo Tipográfico

Un Sencillo Ejemplo

Veamos el ejemplo a través de un contenido con y sin una jerarquía diseñada.

La imagen (below) de abajo muestra una lista de conciertos que se celebrarán en un espacio exterior de mi calle. Imagina que en este ejemplo tengo libre el fin de semana correspondiente a los días 15-17, y que quiero saber si hay programado algún concierto al que me apetezca asistir durante ese periodo. En la situación que se muestra aquí abajo, esta tarea es mucho más complicada de lo que debería. Sin ningún tipo de jerarquía, uno debe recorrer gran parte del texto hasta encontrar las fechas de los conciertos. Imagina lo que ocurriría si tuviésemos que buscar en un listado con 50 conciertos.

Ok, quizá estoy siendo un poco dramático con este ejemplo, pero podemos hacer que sea mucho más fácil.

Como puedes ver en el siguiente ejemplo, el título, la fecha y la descripción tienen un estilo único y consistente, y están aislados mediante el espaciado entre párrafos. Esto nos permite reconocer fácilmente las fechas aisladas (o los nombres de las bandas) basándonos en sus estilos y leer la información que necesitamos. ¡Parece que finalmente iremos al show de Avett Brothers!

La Jerarquía y la Web

Deberíamos destacar que cuando estamos diseñando para la web, existe otra cuestión a considerar. En sí misma, una página web tiene una jerarquía que no solo se lee, sino que también contiene interacciones. La página en su conjunto debe estar diseñada de manera que comunique al usuario con claridad qué acciones están disponibles y cómo acceder a la información buscan, cómo pueden comprar un producto, etc.

Sin embargo, en este artículo vamos a hablar estrictamente de la jerarquía aplicada a la tipografía. Afortunadamente contamos con las etiquetas HTML que nos permiten establecer semánticamente una jerarquía tipográfica en los sitios web que construimos. Las etiquetas de los titulares (etiquetas H) nos permiten especificar una estructura basada en la importancia de cada parte de nuestro contenido: desde H1 hasta la etiqueta H6, siendo H1 la de mayor importancia y H6 la de menor. Los motores de búsqueda usan esta información para asignar una prioridad a cada fragmento de contenido de una página web.

Pero ahora, ¿cómo aplicamos estilo de forma eficaz a estas etiquetas H de forma que dé sentido a nuestro contenido? ¡Gracias por preguntármelo!

Técnicas de Estilo

Existen algunos métodos básicos para establecer una jerarquía visual básica:

• Tamaño.
• Grosor.
• Color.
• Posición.
• Contraste tipográfico.

Normalmente se combinan varios de estos métodos a la vez. En el listado de conciertos mostrado anteriormente se combina el tamaño, el color, el espaciado, y el contraste tipográfico. Las posibles combinaciones son ilimitadas.

Tamaño

Esta es la forma más sencilla y el método más común para crear una jerarquía.

Grosor

Basta usar un mayor grosor en una fuente (valor “weight” en CSS) para destacarla del resto.

Color

El color juega un importante papel a la hora de determinar lo que la vista percibirá como principal o secundario.  En términos generales; los colores cálidos tienden a destacar, los colores fríos se desvanecen.

Posición

La posición en la que se ubican las distintas secciones de información y la relación que establecen estas posiciones también crea una jerarquía.

Contrastar Tipografías

Un excelente método para generar una jerarquía consiste en crear contraste entre las distintas fuentes tipográficas.

Combinación

Como ya hemos mencionado, estos métodos son más eficaces cuando se usan combinados unos con otros. Esta es la parte divertida, ¡elegir qué combinación es la más adecuada para tu contenido y la maquetación de tu página!

El Espaciado es Importante

Uno de los conceptos más importantes en el diseño tipográfico es la distribución del espacio. Es uno de los conceptos más difíciles de comprender para los diseñadores nóveles, aún siendo uno de los más obvios visualmente. Un espaciado tipográfico adecuado es crucial a la hora de establecer la jerarquía; puede marcar la diferencia entre la confusión y la claridad. Es un recurso que se usa en la mayoría de los sistemas jerárquicos, y está presente en todos los ejemplos que mostramos en este artículo.

En el ámbito del diseño, la regla de la proximidad generalmente afirma que los elementos relacionados deben aparecer más próximos entre sí que aquellos entre los que no existe ningún tipo de relación. Sin embargo, un espaciado adecuado implica mucho más que un retorno de carro entre secciones tipográficas. Generalmente, un retorno de carro crea excesivo espacio entre el contenido o las frases que pertenecen a un mismo párrafo. Se debe hacer uso del espacio entre párrafos, ya sea antes o después. Yo suelo usar un espacio entre párrafos que es igual a la mitad del espacio entre líneas o interlineado. Esto normalmente nos permitirá que el conjunto del contenido se mantenga cohesionado y al mismo tiempo proporcionamos una separación adecuada dentro del propio contenido.

Otras Consideraciones

Es importante tener en consideración el significado de una pieza de contenido específica cuando planificamos la jerarquía. ¿Cuál es la temática del contenido? ¿Qué se está intentando comunicar? Si no lo sabes, léelo antes de tomar una decisión relacionada con la jerarquía y el estilo.

Es determinadas ocasiones, podrás disfrutar de cierta libertad a la hora de hacer uso de los métodos que hemos citado para establecer la jerarquía, pero en otros estarás limitado por un espacio horizontal o vertical específicos, o por el contraste entre la tipografía y el fondo. Valora qué métodos funcionan mejor en tu caso, y usa aquellos que tengan sentido. El antiguo mantra "cuanto más simple mejor", suele funcionar en estos casos. Recuerda, el objetivo es presentar el contenido de forma organizada.

Recursos

Ahora crea algo bello basándote en la jerarquía. Si te interesa el tema, te propongo algunos recursos relacionados con la tipografía, la jerarquía y la web:

• Typekit: Jerarquía Tipográfica
• La Tipografía y la Web de Samantha Warren
• Crear Jerarquías Visuales Atractivas e Inusuales, artículo publicado en Smashing Magazine
• Los Elementos del Estilo Tipográfico Aplicados a la Web
• Fundamentos de Diseño: El Principio de Cercanía
• Los Elementos del Estilo Tipográfico de Robert Bringhurst