Share
Una de las técnicas más importantes para comunicar (o “honrar”) efectivamente el contenido es el uso de la jerarquía tipográfica. La jerarquía tipográfica es un sistema para organizar el tipo que establece un orden de importancia dentro de los datos, lo que permite al lector encontrar fácilmente lo que está buscando y navegar por el contenido. Ayuda a guiar al ojo del lector hacia donde comienza y termina una sección, mientras que le permite al usuario aislar cierta información basada en el uso consistente del estilo en todo el cuerpo del texto..
"La tipografía existe para honrar el contenido". - Robert Bringhurst: Los elementos del estilo tipográfico
Veamos un ejemplo de contenido con y sin una jerarquía diseñada.
La imagen de abajo es una lista de conciertos que se realizan en el lugar al aire libre en la calle de mi casa. Por este ejemplo, digamos que tengo libre el fin de semana del 15 al 17 de agosto, y quiero ver si hay un concierto al que me gustaría asistir a esa hora. En el siguiente escenario, esta es una tarea que es mucho más difícil de lo que debería ser. Sin ningún tipo de jerarquía, uno tiene que analizar gran parte de los datos para encontrar las fechas de los conciertos. Imagínate intentando ver una lista de 50 conciertos..
Ok, tal vez estoy siendo dramático en el ejemplo, pero podemos hacer esto mucho más fácil.
Como puede ver en el siguiente ejemplo, el título, la fecha y las descripciones tienen un estilo único, consistente y aislado mediante el espacio entre párrafos. Esto nos permite aislar fácilmente las fechas (o nombres de bandas para esa materia) según el estilo, y además podemos obtener la información que necesitamos. Parece que vamos al show de los hermanos Avett!
Cabe señalar que al diseñar para la web, hay otra capa a tener en cuenta. Una página web en sí tiene una jerarquía que no solo se lee, sino que también contiene interacción. La página en su totalidad debe diseñarse de manera que comunique claramente al usuario qué acciones están disponibles y cómo acceder fácilmente a la información que buscan, cómo comprar un artículo, etc..
Para los fines de este artículo, sin embargo, estamos hablando estrictamente de la jerarquía en lo que se refiere al tipo. Por suerte para nosotros, tenemos nuestra propia etiqueta HTML que nos permite establecer una jerarquía tipográfica en los sitios web que construimos semánticamente. Las etiquetas de encabezado (etiquetas H) nos permiten especificar un orden de importancia en nuestro contenido: H1 a H6, siendo H1 el más importante, siendo H6 el menos. Los motores de búsqueda utilizan estos datos para interpretar la prioridad del contenido en una página web.
Pero, ¿cómo podemos aplicar un estilo a esas etiquetas H de manera que tenga sentido con nuestro contenido? Me alegra que hayas preguntado!
Existen algunos métodos básicos para establecer una jerarquía tipográfica visual:
Más comúnmente estos métodos se usan en combinación unos con otros. En la lista de conciertos que se mostró anteriormente, se utilizaron el tamaño, el color, el espaciado y el contraste de tipo. Las combinaciones son literalmente infinitas..
Este es el método más fácil y más común para establecer una jerarquía.
El simple hecho de utilizar una fuente más gruesa puede ayudar a aislar.
El color juega un papel importante en lo que nuestro ojo ve como primario y secundario. Generalmente hablando; colores cálidos pop, colores más fríos retroceden.
Donde las secciones de información se posicionan en relación entre sí pueden establecer una jerarquía.
Una excelente manera de lograr una jerarquía es usar tipos de letra contrastantes.
Como se mencionó anteriormente, estos métodos pueden ser más efectivos cuando se usan en combinación unos con otros. Esta es la parte divertida: decidir qué combinación es la adecuada para su contenido y diseño!
Uno de los conceptos más importantes en el diseño de tipo es el espaciado. Es uno de los conceptos más difíciles de entender para los diseñadores principiantes, pero también es uno de los más evidentes visualmente. El espaciado tipográfico apropiado es crítico para establecer la jerarquía; puede hacer la diferencia entre confusión y claridad. Se usa en la mayoría de los sistemas jerárquicos y está presente en todos los ejemplos de este artículo..
La regla de proximidad en diseño, generalmente se establece que los elementos relacionados deben aparecer más cercanos entre sí que los elementos que no están relacionados. Sin embargo, el espaciado adecuado implica algo más que un simple retorno entre secciones de tipo. En general, un retorno difícil crea demasiado espacio entre el contenido en el contexto de un párrafo. Se debe utilizar el espacio entre párrafos, ya sea antes o después. Tiendo a usar el espacio entre párrafos que es igual a la mitad de la altura de la línea (o anterior). Esto generalmente permite que el grupo de contenido se mantenga unido al tiempo que proporciona una división adecuada de contenido dentro de él..
Es importante que se tenga en cuenta el significado de una parte particular del contenido al pensar en la jerarquía. ¿Cuál es el tema del contenido? ¿Qué es lo que está tratando de comunicar? Si no lo sabe, léalo antes de tomar decisiones sobre la jerarquía y el estilo..
En algunos escenarios, puede tener la libertad de emplear cualquiera de los métodos de jerarquía enumerados anteriormente, pero en otros casos puede estar limitado a un cierto espacio vertical u horizontal o preocuparse por el contraste adecuado de tipo sobre un fondo. Evalúe qué métodos funcionan para la situación y emplee los que tengan sentido. El viejo mantra "más simple es mejor" generalmente se aplica aquí. Recuerda, el objetivo es presentar el contenido de forma organizada..
Ahora ve a crear algo de belleza jerárquica. Si está interesado, le proporcioné algunos recursos interesantes relacionados con el tipo, la jerarquía y la web:
Accentsconagua