Uno de los elementos más importantes para las personas que miran cualquier cosa que diseñe es el tipo. Debe ser claro y legible y debe dirigir a los usuarios a través de un diseño, desde los elementos más importantes hasta los menos.
Y eso, en pocas palabras, explica la jerarquía tipográfica. Pero para dominar realmente el arte del tipo, debe comprender cómo se debe aplicar el tipo de capa a lo largo de un diseño para lograr el máximo impacto. Siga leyendo para aprender a dominar la jerarquía tipográfica y crear tipos efectivos en cada proyecto.
¿Qué es la jerarquía tipográfica?
La jerarquía tipográfica es otra forma de jerarquía visual, una subjerarquía per se en un proyecto de diseño general. La jerarquía tipográfica presenta las letras para que las palabras más importantes se muestren con el mayor impacto para que los usuarios puedan escanear el texto en busca de información clave.
Sin jerarquía tipográfica, cada letra, cada palabra y cada oración en un diseño se vería igual. ¿Te imaginas leer algo donde todo sea de la misma fuente, tamaño y color? Por donde empiezas ¿Cómo sabes lo que más importa?
La jerarquía tipográfica crea contraste entre los elementos. Los diseñadores logran esto mediante el uso de tipografías, tamaño, peso, mayúsculas y minúsculas, negrita o cursiva, orientación y color. Las combinaciones de esas herramientas de diseño se utilizan para crear tipos que caen en capas distintas.
Nivel primario
El nivel primario de tipografía es todo el tipo grande. Es titulares y cubiertas - también conocido como? Muebles? - Eso atrae a los lectores al diseño. Este es el tipo más grande en el diseño (a menos que esté utilizando arte tipográfico).
Nivel secundario
El nivel secundario de tipografía son las pepitas de información escaneable que ayuda a los lectores a mantener el diseño. Esto incluye elementos tales como subtítulos, subtítulos, citas extraídas, infografías y otros pequeños bloques de texto que agregan información al nivel primario del texto. El diseño de estos bloques de texto está en el lado grande, pero generalmente mucho más pequeño que las letras en el nivel primario de tipografía.
Nivel terciario
El nivel terciario de tipografía es el texto principal de su diseño. A menudo es uno de los tipos más pequeños en el diseño, pero debe ser lo suficientemente grande como para que todos los usuarios potenciales lo puedan leer por completo. El tipo de letra debe ser simple y consistente en diseño, espaciado y uso general.
Otros niveles
Los otros niveles de tipografía incluyen efectos aplicados al tipo en el nivel terciario para áreas pequeñas de impacto. Los efectos tales como negrita, cursiva, subrayado y color pueden llamar la atención sobre áreas específicas del texto principal. Estos efectos funcionan mejor cuando se aplican a texto del mismo tamaño y tipo de letra utilizados en el nivel terciario. Los efectos se utilizan con moderación y solo para unas pocas palabras en secuencia. Los ejemplos de otros niveles incluyen enlaces subrayados, palabras en negrita para el impacto o cursivas o color para el énfasis.
Jerarquía en proyectos impresos
La jerarquía visual en proyectos impresos es estrictamente visual. Usar el tamaño, el color y otros efectos para hacer que ciertos trozos del tipo parezcan grandes y más importantes, y la escala correspondiente es todo lo que tiene que hacer para obtener un buen comienzo.
Mirando el ejemplo paso a paso anterior, puede ver claramente diferentes niveles de jerarquía tipográfica y cómo hace que el diseño sea más fácil de leer y más atractivo visualmente. Puede aplicar esta misma técnica a cualquier proyecto de diseño agregando énfasis en áreas clave.
Crearlo
Hay una variedad de formas en que puede crear un sentido de jerarquía. Estas son algunas de las técnicas más comunes:
- Selección de tipo de letra: Los tipos de letra más interesantes pueden aparecer más grandes y atraer el ojo más rápido que los que tienen menos intriga visual. Cuando utilice una novedad, un script o tipos de letra elaborados, tenga en cuenta los problemas de legibilidad y asegúrese de que el tipo sea bastante grande.
- Tamaño: Casi no hace falta decirlo, pero cuanto más grande sea el tipo, más rápido atraerá el ojo hacia él. El tamaño del tipo debe estar correlacionado con el orden de importancia en la lectura del texto.
- Peso: El grosor de las letras puede hacer que el texto se vea más grande (negrita, trazos gruesos) o más pequeño (tipografías delgadas o comprimidas).
- Mayúsculas y minúsculas: Has escuchado que enviar un correo electrónico en mayúsculas es como gritarle a alguien. Lo mismo ocurre con todas las gorras en el diseño. Desconfíe de su uso. Las letras mayúsculas aparecerán más grandes y pasarán a primer plano, mientras que las letras minúsculas aparecerán más pequeñas y, a menudo, caerán en segundo plano.
- Negrita: Las letras en negrita son un buen punto de énfasis para una sola palabra o frase. Funciona especialmente bien en el nivel terciario de tipo.
- Cursiva: Las letras en cursiva pueden resaltar una sola palabra o frase de una manera menos dramática y más sutil que la negrita. Funciona especialmente bien en el nivel terciario de tipo.
- Orientación: Poniendo las letras de lado, boca abajo o con cualquier otra orientación, esa orientación horizontal puede tener un atractivo visual inmediato, ya que están colocadas de una manera diferente a la que se espera. Esto puede funcionar bien para palabras o frases cortas en el nivel primario de texto.
- Color: Agregar color a las letras que normalmente no tienen color crea un interés específico e inmediato. Este efecto puede funcionar en cualquier nivel de texto, pero debe ser deliberado para no crear problemas de lectura o confusión.
- Colocación: El lugar donde se encuentra el texto en el lienzo también puede establecer una jerarquía. Por lo general, se lee de arriba a abajo (una jerarquía natural de clases) pero esto se puede cambiar empleando algunas de las técnicas anteriores.
Jerarquía en proyectos digitales
Todas las herramientas que utiliza en proyectos de impresión también se aplican a proyectos digitales, con algunas adiciones. La jerarquía tipográfica digital también debe incluir la consideración de HTML en la creación de tipo web.Este nivel adicional de pensamiento asegura que sus niveles visuales se traducirán a otros usuarios en la pantalla.
Crearlo
Asegúrese de utilizar convenciones comunes, incluidos encabezado, cuerpo y estilos en negrita cuando trabaje en proyectos que se publicarán en línea. Cada una de estas definiciones de estilo utilizadas comúnmente se encuentra dentro de las zanahorias () en el HTML.
- Título (título): Define el título del documento para usuarios y rastreadores web.
- Cuerpo cuerpo): Define el texto del cuerpo en un documento.
- Encabezados (h1 a h6): Define diferentes capas de estilos de encabezado. H1 es típicamente el más grande y más importante, moviéndose hacia abajo a través de H6. Solo necesitas usar tantos como quieras.
- Negrita (fuerte): Define texto más pesado, más importante.
- Cursiva (em): Define el texto con una inclinación para enfatizar.
Jerarquía y Usabilidad
Cuando se trata de aplicaciones móviles, debe pensar en la jerarquía tipográfica visual, la jerarquía tipográfica HTML y la facilidad de uso en la jerarquía tipográfica. El texto no solo debe verse bien y funcionar correctamente, sino que también debe diseñarse de tal manera que los usuarios sepan qué hacer con él e interactúen como se espera.
Esta tipografía basada en la acción incluye algunas cosas clave para los diseñadores. El tipo debe ser lo suficientemente grande para tocarlo, espaciado de modo que cada elemento que se pueda tocar esté claramente definido, y los elementos utilizables tengan algún tipo de definición visual (como un botón).
Crearlo
Lo que hay que tener en cuenta al crear una jerarquía tipográfica utilizable es separar los elementos de tipo con los que los usuarios interactuarán de los que no lo harán y entre sí. Las consideraciones importantes incluyen:
- Espacio: Dé a cada elemento que se supone que debe tocarse o tocarse, mucho espacio. Considere el tamaño del espacio y la cantidad de espacio necesario para que un dedo lo toque. Los usuarios pueden frustrarse rápidamente si el tipo está tan cerca que se hace clic en el elemento incorrecto.
- Color: Crea una paleta de colores para la usabilidad. Considere hacer que cada palabra destinada a tocar un color diferente al texto principal.
- Oscuridad: Las sombras son un indicador común de un botón que se puede presionar de alguna manera.
- Fronteras: Considere agregar bordes a elementos independientes con los que desea que los usuarios interactúen. Asegúrese de que estén separados del fondo. (Los "botones fantasma" de moda son un buen ejemplo de esto, como en el ejemplo del sitio web de Spacecraft arriba).
- Animación: Mover el texto, aunque es difícil de usar, puede ser una forma rápida de ayudar a llamar la atención sobre ciertas palabras.
- Dirección: Recuerde decirles a los usuarios qué hacer en la pantalla, desde tocar hasta desplazarse hasta llamadas a la acción.
Conclusión
Lo más probable es que diseñe con algún tipo de jerarquía tipográfica, incluso sin pensarlo. Pero teniendo en cuenta cómo se alineará el tipo de manera general puede mejorar su diseño general.
Use la jerarquía tipográfica para agregar énfasis, impacto y crear llamadas a la acción que los usuarios puedan ver y reaccionar rápidamente. Recuerde pensar en la legibilidad, la capacidad de escaneo y la comprensión general al tomar decisiones sobre un tipo de letra, el tamaño y los efectos que se le aplican. Tus lectores (o usuarios) te lo agradecerán.