La jerarquía visual es un elemento importante en cualquier proyecto de diseño. Le dice a la gente dónde mirar y qué cosas en la pantalla o en la página impresa son las más importantes. La jerarquía le da a los lectores una idea de cómo leer realmente el material de principio a fin con señales visuales y flujo.
Si bien puede crear una jerarquía visual utilizando una serie de herramientas diferentes, hoy vamos a buscar formas de crear una estructura con solo tipografía. (Y eche un vistazo a las imágenes utilizadas en esta publicación; todas son ejemplos de una gran jerarquía de tipos en acción).
¿Por qué la jerarquía es importante?
La jerarquía de tipos organiza y da orden a los elementos de texto en su diseño. Al igual que los diseñadores y desarrolladores web utilizan etiquetas de encabezado (h1, h2, h3, etc.) para organizar la importancia del texto, la jerarquía visual utiliza señales visuales. Además, la jerarquía de tipos ayuda a los lectores a escanear texto, leyendo bits de tipo más rápido en trozos que se parecen.
En general, los lectores en inglés comienzan en la parte superior izquierda y leen todo el texto. El tipo a menudo está organizado para reflejar este comportamiento.En general, los lectores en inglés comienzan en la parte superior izquierda y leen todo el texto. El tipo a menudo está organizado para reflejar este comportamiento. Pero, ¿y si el texto más grande y más atrevido está en la mitad de la página? A menudo, un lector comienza allí y luego vuelve a la parte superior de la página y continúa con el comportamiento normal de lectura.
La jerarquía es importante porque le permite al diseñador determinar lo que alguien probablemente leerá primero, segundo y así sucesivamente. Debido a esto, el diseñador puede crear el tipo de manera que sepa qué información es probable que se reciba y en qué orden.
Como la creación de jerarquías es importante para los diseñadores, es igualmente importante para los lectores. Una buena jerarquía visual nos dice lo que es importante, lo que facilita mucho la lectura. Por ejemplo, sabe que el título es la parte más importante (o que llama la atención) de una historia o artículo porque es el más grande, seguido de los subtítulos y luego el texto del cuerpo. Para fines de escaneo, puede leer el texto grande para tener una idea de si el artículo le interesa antes de invertir mucho tiempo en la copia.
Cómo crear jerarquía
No hay una solución de un solo paso para crear una jerarquía visual con texto. Se puede crear con tamaño, peso, color, textura, opciones y combinaciones de tipo de letra, orientación y espacio, o una combinación de esas herramientas.
tamaño
Una de las formas más sencillas de establecer una jerarquía con el tipo es a través del tamaño. Los lectores a menudo ven el tipo más grande primero y comienzan a leer desde allí.
En relación con el tamaño, la escala es igualmente importante. Para crear una jerarquía distinta, los tamaños deben tener una variación significativa en relación con otro tipo en la página. Lo que hay que tener en cuenta es que los diferentes tipos de letra pueden escalar de manera diferente, por lo que simplemente cambiar el tamaño del punto puede no ser suficiente; debe observar cómo las fuentes se combinan para garantizar que el tamaño y la escala se equilibren correctamente.
Entonces, ¿cómo empezar a crear el tamaño y la escala de tipo adecuados para un proyecto? Comience con el texto del cuerpo principal y vaya desde allí. Y para los elementos de texto que se utilizan para atraer a la gente, hazlo a lo grande.
Aquí hay algunos porcentajes para ayudarte a comenzar:
- Copia del cuerpo principal (14 puntos)
- Cabeceras principales: 250 por ciento más que la copia del cuerpo principal (35 puntos)
- Cabeceras secundarias: 175 por ciento más que la copia del cuerpo principal (25 puntos)
- Elementos de navegación: 165 por ciento más que la copia del cuerpo principal (23 puntos)
- Navegación secundaria o menús: 140 por ciento más que la copia del cuerpo principal (20 puntos)
Tipos de letra
Después del tamaño, los tipos de letra son el elemento más utilizado en términos de creación de jerarquía tipográfica. La clave es tener contraste entre tipografías. (Esta es una de las razones por las que los diseñadores a menudo seleccionan un tipo de letra serif y un tipo de letra sans serif para un proyecto).
Para obtener las mejores combinaciones, busque tipografías que sean diferentes en peso por tener un tono o sensación similar. Si está utilizando tipos de letra redondeados, por ejemplo, apéguese a formas de letras con formas similares en las letras. Opte por tipos de letra con x-alturas similares si los estilos se utilizarán en línea unos con otros a lo largo del proyecto.
Peso
El grosor de los trazos en el tipo que selecciona para un proyecto también puede crear una jerarquía. Cuanto más gruesa es la tipografía, más audaz y más grande aparece. Los tipos de letra ligeros, condensados y delgados a menudo aparecen más pequeños de lo que realmente son. Los tipos de letra en negrita, ultra y cabeza de martillo pueden aparecer más grandes que el tamaño de punto que puede representar.
El tamaño o tamaño de un tipo de letra que aparece por peso también es relativo a los otros tipos de letra utilizados en el proyecto. El emparejamiento de tipos de letra gruesos y delgados crea inmediatamente un sentido de jerarquía con el estilo grueso que tiene una apariencia de mayor importancia (a menudo incluso si es más pequeño en la pantalla).
Color
El uso del color también puede agregar énfasis y aumentar el peso para escribir. Piense en algunas de las reglas de color que aprendió de niño: los colores cálidos (rojos, amarillos, marrones) tendrán más pop mientras que los colores fríos (azules, púrpuras, grises) se desvanecerán.
Cuando utilice el color para establecer una jerarquía, tenga en cuenta los tonos utilizados para el primer plano, el tipo y el fondo. El contraste de color también jugará un papel importante. ¿Los colores más saturados o más brillantes a menudo se levantarán? Fuera de la pantalla contra los tonos más apagados.
Orientación
La forma en que la prueba descansa en un diseño siguiente en relación con otro texto puede afectar la jerarquía general. Normalmente, la mayoría del texto está orientado horizontalmente en línea recta a través de la pantalla. ¿Pero qué colocas texto verticalmente?
Este cambio en la orientación traerá el foco a esas palabras o bloque de texto, haciendo que parezca el elemento más importante. Inclinar, torcer o alterar la forma del texto de cualquier manera puede lograr el mismo efecto. (Cabe señalar que la mayoría de los diseñadores a menudo evitan este tipo de trucos, excepto en algunas circunstancias).
Espacio
El espacio en blanco puede hacer que el tipo aparezca más grande y más legible. La falta de espacio en blanco puede hacer que se sienta más apretado y más pequeño. Use el espacio a su favor cuando cree un sentido de jerarquía.
Piense en el espacio que utiliza entre líneas de texto. Piense en el kerning para los estilos de letra más grandes. Piensa en la relación espacial entre las letras y el borde del lienzo. Piense en las relaciones entre tipos de diferentes tamaños, estilos y colores.
Cada espacio puede impactar tu escala jerárquica. Mantenga el tipo similar agrupado más cerca y con menos espacio que los elementos no relacionados. Y diseña tu espacio para que el texto caiga en un orden distinto. Los elementos de texto más grandes, más audaces y más brillantes a menudo necesitan más espacio que los bloques de texto más pequeños y simples.
Textura
La textura es un concepto suelto en términos de tipo. No, no estamos hablando de poner una textura dentro de las letras; nos referimos a crear un patrón de textura con la forma en que las letras y las palabras descansan en la página o la pantalla.
Dentro de los bloques de texto, terminas con una apariencia estampada. Para establecer más jerarquía, rompa el patrón. Esto se puede lograr usando una de las herramientas ya mencionadas o cambiando algo tan simple como la alineación de un solo bloque de texto.
Este cambio en la textura general del texto puede tener un impacto real en cómo se percibe. Tenga cuidado con demasiados cambios en la textura, ya que pueden distraerse cuando se usan con frecuencia.
3 (o 4) niveles de tipo
Si bien algunos proyectos requieren jerarquías complejas, la mayoría de los diseños pueden tener éxito con tres niveles de jerarquía tipográfica. Esos niveles son tipo primario, tipo secundario y tipo terciario. (En esta escala no incluyo banners ni tipo de logotipo; serían considerados un cuarto nivel de tipografía artística).
Tipo primario A menudo es la tipografía en la página con el peso más visual, como encabezados principales o citas de visualización. El propósito del tipo primario es llevar a los lectores al diseño general.
Tipo secundario Es todo lo demás que no es el contenido principal. Esto puede incluir subtítulos, subtítulos y elementos de tipo navegacional o estático.
Tipo terciario Es la copia del cuerpo principal. Hay una cosa que recordar acerca de la copia terciaria: debe ser legible. Poco más importa cuando se trata del estilo de diseño de este tipo de nivel.
Tipo de arte Es el tipo utilizado como elemento gráfico. Está fuera del ámbito real del tipo y es mucho más visual. Esto puede incluir banners o logotipos. Puede incluir imágenes compuestas de letras o cualquier otro elemento tipográfico ornamentado de gran diseño. Típicamente, el tipo de arte consiste en una sola palabra de letra y no es parte de lo que se espera que las personas lean. en el diseño general.
Conclusión
El tipo de organización puede ser divertido y desafiante. Al combinar técnicas y diferentes tipos de efectos y estilos, puede lograr fácilmente un flujo con solo tipo.
Recuerde tener en cuenta las relaciones entre tamaño, peso, color, textura, opciones y combinaciones de tipo de letra, orientación y espacio al crear un contorno. Piense en cómo las personas leen y asimilan la información cuando utilizan estas técnicas para que la copia esté organizada y fluya en un formato lógico para el diseño tipográfico más útil.