Cómo estructurar una jerarquía tipográfica efectiva

La organización efectiva del contenido dentro de un diseño para que sea fácil de entender y consumir es uno de los trabajos más importantes de un diseñador. Y dado que gran parte del trabajo de los diseñadores de contenido se basa en texto, crear una jerarquía tipográfica efectiva es una de las cosas más importantes que un diseñador puede aprender.

Si bien practicar y experimentar con la creación de una jerarquía efectiva es la mejor manera de dominar realmente la habilidad, hay una serie de pautas que los diseñadores deben aprender primero, antes de comenzar por su cuenta. Después de todo, es imposible romper las reglas de manera efectiva sin saber primero cuáles son.

¿Qué es la jerarquía tipográfica?

Los diseñadores principiantes a veces subestiman la necesidad de utilizar una jerarquía de tipografía. Sin embargo, mira este ejemplo:

La misma información se transmite en ambos lados, pero a la izquierda es imposible saber si hay un encabezado, un subtítulo y un cuerpo de texto. A la derecha, es inmediatamente evidente que existe una jerarquía en la información que se proporciona.

La jerarquía tipográfica le muestra al lector en qué información debe enfocarse, cuál es la más importante y cuál simplemente respalda los puntos principales.

Hay una variedad de cosas que componen la jerarquía tipográfica en la web. Éstos incluyen:

Tamaño. El tamaño es generalmente lo primero a lo que recurren los nuevos diseñadores cuando intentan crear una jerarquía tipográfica. Y por una buena razón: los lectores lo identifican de inmediato y con facilidad. Más grande = más importante, más pequeño = menos importante. Pero el tamaño puede convertirse en una muleta cuando hay tantas otras opciones para crear una jerarquía.

Peso. Hacer que un tipo de letra sea más audaz o delgado es otra forma fácilmente reconocible de crear una jerarquía que sea fácilmente identificable incluso para quienes no son diseñadores.

Color. El color a menudo se pasa por alto como una forma de crear una jerarquía, pero es una opción fantástica. Incluso el uso de tonos más claros y más oscuros de un color dado puede crear una jerarquía más clara. Crear más contraste entre el tipo y su fondo también puede contribuir a la jerarquía tipográfica.

Contraste. Más allá de los colores contrastantes, el contraste entre los diferentes tamaños, pesos y estilos de letra también es clave para crear una jerarquía tipográfica. Una diferencia de solo uno o dos puntos en el tamaño de letra no creará suficiente contraste para que la jerarquía sea evidente para la mayoría de los usuarios. En su lugar, los diseñadores deben usar tamaños, pesos y estilos fácilmente distinguibles para crear fácilmente contraste entre elementos como encabezados o texto del cuerpo.

Caso. Si bien escribir en mayúsculas el texto del cuerpo generalmente no es una buena idea desde la perspectiva de la legibilidad, el uso de caracteres en mayúsculas en títulos o subtítulos puede ayudar a diferenciar diferentes títulos o de otro tipo.

Posición y Alineación. El posicionamiento de los encabezados y subtítulos, junto con otro tipo que un diseñador quiera destacar, puede tener un gran impacto en la ubicación del tipo dentro de una jerarquía. El tipo centrado, por ejemplo, tiende a resaltarlo. Establecer el tipo fuera de los márgenes regulares de una página también puede hacer que ese tipo se destaque dentro de la jerarquía de una página.

Cómo crear una jerarquía tipográfica (y organizar visualmente su diseño)

Los diseñadores tienen muchas opciones cuando se trata de crear una jerarquía tipográfica. Pero el simple hecho de saber lo que implica crear una jerarquía no necesariamente ayudará a los diseñadores a crear una jerarquía efectiva.

Una de las primeras cosas a considerar es cuántos niveles de jerarquía debe tener un diseño. Como regla general, todo diseño debe incluir tres niveles de jerarquía: encabezado, subtítulo y cuerpo del texto. A partir de ahí, depende del diseñador considerar niveles adicionales que puedan ser necesarios. Estos podrían incluir subtítulos, subtítulos adicionales, citas extraídas y metainformación (para cosas como autores o fechas en un artículo).

A partir de ahí, es clave descubrir cómo distinguir entre las diferentes partes de la jerarquía. No hace falta decirlo, pero los encabezados deben ser más prominentes que los subtítulos, que deben ser más prominentes que el cuerpo del texto. Los subtítulos generalmente deben ser menos prominentes que el cuerpo del texto y las comillas deben estar en algún lugar entre el cuerpo del texto y los subtítulos.

Tipo Tamaño

Las escalas tipográficas tradicionales existen para ayudar a los diseñadores a comenzar. Pero estos son solo un punto de partida, y los diseñadores deben sentirse libres de experimentar con diferentes pesos y estilos mientras se desvían de estas escalas tradicionales. La mayoría basa su escala en el tamaño del cuerpo del texto y se expande a partir de ahí.

La escala tipográfica clásica de The Elements of Typographic Style es familiar para la mayoría de los diseñadores, ya que tienden a ser los valores predeterminados que ofrecen la mayoría de los programas de procesamiento de texto al seleccionar los tamaños de fuente. La escala es:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 y 72.

Hay ejemplos de escalas tipográficas adicionales que siguen varias ecuaciones matemáticas para calcular tamaños crecientes.

Los diseñadores tienden a usar un tamaño de cuerpo de texto predeterminado de 12 puntos, pero aumentarlo a 14 o 16 (o incluso hasta 24) puede conducir a una mayor legibilidad según el tipo de letra que se utilice. El sitio web personal de Jeffrey Zeldman, por ejemplo, usa un tamaño de fuente de 24 px para el cuerpo del texto, mientras que Vogue.com usa un tamaño de texto de 19 px.

Sin embargo, antes de finalizar la escala real, los diseñadores deben asegurarse de que se hayan finalizado los tipos de letra que se utilizan en el diseño. Diferentes tipos de letra pueden parecer significativamente más grandes o más pequeños incluso cuando técnicamente tienen el "mismo" tamaño.

Elección de tipos de letra coordinados

Lo que a menudo distingue un diseño "profesional" de los esfuerzos más amateurs es la combinación de tipos de letra. La combinación efectiva de tipos de letra es en parte instinto y en parte ciencia, pero hay algunas pautas que los diseñadores pueden seguir para combinar tipos de letra de diferentes familias.

Primero, mezclar serifas con sans serifs es significativamente más fácil que combinar dos serifas o dos sans serifs. Pero no es tan simple como simplemente agarrar cualquier serif y cualquier sans serif, y juntarlos en un diseño.

Tenga en cuenta el contexto en el que se utilizarán los tipos de letra. Por ejemplo, si se supone que el diseño debe ser ligero y divertido, asegúrese de que los tipos de letra se ajusten a ese estado de ánimo. Si el diseño es más serio, entonces los tipos de letra deberían reflejar eso. En otras palabras, el estado de ánimo de cualquier tipo de letra que se combine debe coincidir.

Los diseñadores también deberían usar el contraste a su favor. La combinación de tipos de letra delgados y gruesos a menudo funciona mejor que la combinación de dos que tienen un peso muy similar.

Busque tipos de letra con alturas x similares (la distancia entre la línea de base y la línea media de letras minúsculas en un tipo de letra). Esto ayuda a prevenir conflictos entre tipos de letra. Otras cosas que ayudan a prevenir conflictos incluyen kerning y formas de caracteres similares. Los tipos de letra con formas de letras muy redondas no deben combinarse con tipos de letra más cuadrados.

Si bien las pautas pueden ser útiles para crear combinaciones tipográficas, nada reemplazará la experimentación y la práctica. Los diseñadores deben pasar tiempo experimentando con tipos de letra y practicar combinándolos tan a menudo como puedan. Encontrar algunas combinaciones tipográficas alternativas que puedan funcionar en una variedad de contextos también es útil para proyectos en los que el presupuesto y los recursos disponibles no permiten una tonelada de prueba y error.

Con estas pautas en la mano, los diseñadores pueden seguir el proceso de cuatro pasos que establece la fuente de tipografía web Better Web Type para crear combinaciones efectivas:

1. Encuentre una fuente ancla para el texto de su cuerpo principal
2. Encuentre algunas fuentes secundarias para posibles combinaciones
3. Evalúa las combinaciones
4. Eliminar/elegir combinaciones de fuentes

consideraciones adicionales

Experimentar con diferentes estilos y pesos después de seleccionar los tipos de letra finales puede crear niveles adicionales de jerarquía sin tener que crear encabezados principales de gran tamaño. Mantener los tipos de letra aproximadamente del mismo tamaño, pero hacer que el encabezado más importante esté en negrita, mientras que el menos importante está en cursiva crea una jerarquía visual definida.

Lo mismo se puede hacer con el color. Un subtítulo en un color de énfasis se destacará más que un subtítulo que es del mismo color que el texto del cuerpo. Los diseñadores deben jugar con el color en sus subtítulos para diferenciar el texto más importante sin depender únicamente del tamaño de letra.

El espaciado también se puede utilizar para separar títulos y subtítulos importantes. Crear más espacio alrededor de los encabezados para que se destaquen del texto del cuerpo que los acompaña los hace aún más prominentes. Por el contrario, los subtítulos que tienen el mismo espacio que el cuerpo del texto pierden importancia.

Incluso el espacio entre caracteres se puede utilizar para crear una jerarquía. Espaciar los caracteres puede hacer que una línea en particular sea más prominente. Esto es particularmente efectivo cuando se combina con mayúsculas en esas letras. Sin embargo, los diseñadores deben tener cuidado de no exagerar, ya que también puede parecer amateur si se usa en exceso.

Conclusión

La experimentación y la práctica son las mejores formas de dominar la jerarquía tipográfica, pero aprender estas pautas ayudará a los diseñadores a comenzar con el pie derecho. Aprender cómo el tamaño, el color, el espaciado, el peso y otros factores contribuyen a una jerarquía efectiva es el primer paso.

Una vez que esos conceptos básicos se establecen en la mente (y la práctica) de un diseñador, puede crear de manera más intuitiva jerarquías visuales que siguen o rompen las "reglas" según sea necesario para crear diseños únicos que sean inspiradores y agradables para los usuarios.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Diseño para la legibilidad: una guía para la tipografía web (con infografía)
• Comprender los matices de la clasificación tipográfica
• Fundamentos de diseño: una guía para la jerarquía visual (con infografía)
• Estilos tipográficos para diseño web e impreso
• Mejore su experiencia de usuario con una jerarquía visual clara