En este artículo aprenderás a priorizar la información de un texto mediante la jerarquía tipográfica.
La tipografía es como un segundo idioma que se comunica en un nivel más sutil más allá de sus palabras reales. El contenido real es lo que dices, pero la tipografía es la primera impresión de cómo lo dices.
La tipografía crea una experiencia antes de que los usuarios hayan leído una sola palabra o hayan hecho clic en un botón de menú. La tipografía no solo cuenta una historia, crea una atmósfera y una respuesta emocional de la misma manera que un tono de voz. Si todos los elementos visuales de tu diseño influyen en la experiencia del usuario, entonces, por supuesto, la tipografía tendrá un gran impacto, especialmente en diseños con mucho contenido. Una tipografía pobre o ausente será tan repulsiva para los lectores como los errores gramaticales evidentes.
Hay muchas reglas que rodean las mejores prácticas de uso de la tipografía, consulte nuestra publicación de reglas tipográficas para obtener más información tipográfica completa.
En este artículo, hablaremos sobre cómo utilizar la tipografía en toda su extensión. Comenzaremos explorando los niveles de jerarquía tipográfica, luego nos sumergiremos en elementos individuales.
Niveles de jerarquía tipográfica
La jerarquía tipográfica es un subconjunto dentro de la jerarquía visual. La jerarquía tipográfica organiza las letras para que las palabras importantes se destaquen fácilmente para los lectores que buscan información.
Es fácil ver qué partes son más importantes en este ejemplo del sitio web de Venus Story.
Sin esta jerarquía, todas las letras y palabras de un diseño parecerían idénticas. Un diseño sería tan atractivo visualmente como un símbolo del sistema de MS DOS. Como regla general, la diseñadora Carrie Cousins recomienda que su tipografía admita al menos tres niveles de jerarquía.
Intenta dar forma a tu tipografía en estos niveles:
1. Nivel primario
El texto más notable en la página, generalmente más grande y de un color más brillante que las otras capas de texto. Debido a que es tan poderoso, este nivel debería ser escaso; resérvalo solo para titulares y cubiertas (conocidos como 'encabezados').
2. Nivel secundario
Menos perceptible que el nivel primario, pero más perceptible que el contenido principal, el nivel secundario maneja todo lo que se encuentra en el medio. Este nivel presenta algunos elementos mínimos pero distintos en tamaño y color, y generalmente incluye subtítulos, subtítulos, citas extraídas, infografías o bloques de texto de apoyo separados del contenido principal.
3. Nivel terciario
Este es el contenido principal, el más común y el menos notorio. Debe ser simple y no llamativo: el objetivo de las otras capas es llamar la atención; el objetivo de esta capa es animar al lector a sumergirse en el texto y, por tanto, a tener menos distracciones.
4. Otros niveles
Se pueden crear niveles más pequeños de jerarquía aplicando con moderación cursiva, color, negrita, subrayado y otros efectos al tipo terciario. Estos niveles pueden incluir enlaces subrayados, algunas palabras en negrita para enfatizar dentro de los párrafos, etc. El texto que aparece en pancartas, logotipos u otros gráficos de fondo también se incluyen en esta categoría.
Ejemplo de jerarquía visual
Para ilustrar la separación de capas utilizada correctamente, veamos el siguiente ejemplo.
La tipografía aquí tiene tres capas distintas para explicar claramente los elementos de cada pieza sin explicar nada:
- El título es, obvio, pero ¿por qué es obvio? El texto es más grande (tamaño), más audaz (peso) y está ubicado en la parte superior izquierda, donde los ojos de los espectadores van primero (posición).
- El segundo nivel es la fecha de publicación, establecida en un tamaño y color diferente al resto del texto, y también en cursiva para dar más distinción.
- El tercer nivel, la vista previa del artículo, carece de funciones. Comparado con las otras capas, puede parecer sencillo, pero eso es para que los lectores no se distraigan cuando intentan apreciar el contenido real.
Elementos de jerarquía en tipografía
Como otros campos del diseño, la tipografía sigue su propia jerarquía estructural. Conocer la jerarquía tipográfica es como saber utilizar la tipografía, concretamente saber dar prioridad a determinadas palabras sobre otras.
Al manipular los campos a continuación, se controlará mejor la tipografía y, por lo tanto, se controlará mejor hacia dónde van los ojos de los usuarios.
1. Tamaño
La unidad básica de jerarquía tipográfica. Los textos de diferentes tamaños atraen diferentes niveles de atención.
2. Peso
El grosor del texto, que se incrementa más fácilmente mediante negrita. Aunque es más sutil que el tamaño, sigue siendo un método sencillo para hacer que el texto se destaque. La negrita es especialmente eficaz para agregar peso al tipo terciario.
3. Cursiva
Las letras en cursiva llaman la atención en una forma menos dramática que la negrita. Debido a que es un toque sutil, esto funciona bien para el tipo terciario.
4. Capitalización
Al igual que los correos electrónicos escritos en mayúsculas suenan como si estuvieran gritando, lo mismo se aplica a la tipografía web. Siempre ten cuidado al escribir letras en mayúscula, ya que aparecen desproporcionadamente más grandes y aparecen en primer plano.
5. Color
Ahora nos adentramos en los factores complejos. Los colores cálidos (rojo, naranja, amarillo) tienden a atraer más atención que los colores fríos (azul, violeta), especialmente si el texto de colores cálidos se coloca sobre un fondo de colores fríos. El contraste de color también es importante, ya que los colores saturados o brillantes sobresalen más que los apagados.
6. Contraste
El contraste entre cualquiera de estos factores (tamaño, peso o color) atraerá la atención. El contraste de tipos de letra para los titulares con el texto del cuerpo ayuda a crear una jerarquía.
7. Espacio
Los espacios en blanco pueden hacer que el texto parezca más grande (y por lo tanto más legible). La falta de espacio hace que el texto se sienta más apretado y más pequeño. Cada espacio afecta su jerarquía, desde el kerning simple hasta la relación entre las palabras y el borde de la pantalla.
8. Posición
"Read On" tendría menos impacto si estuviera más lejos.
La proximidad puede ser una forma rápida y sencilla de transmitir significado.
9. Orientación
Mezclando la orientación de las palabras y letras agregaras mas impacto a la composición.
Girar letras y palabras de lado, en diagonal o al revés aumenta el atractivo visual. El efecto crea un atractivo visual sorprendente para el lector. Esto funciona especialmente bien para agregar énfasis a palabras / frases cortas dentro del texto principal. Inclinar, rotar a vertical y otros métodos enfocan inmediatamente al usuario en el texto afectado.
10. Textura
Diferentes elementos tipográficos agregan textura a la composición.
La textura es muy subjetiva, por lo que es uno de los elementos más difíciles de dominar. Esto no se refiere a la textura de las letras en sí, sino a la textura creada a través de los patrones tipográficos en la página. Cada bloque de texto produce su propio patrón, así que, para crear textura, rompe el patrón cambiando cualquiera de los otros elementos. Aplicarlo con moderación, de lo contrario se convierte en una distracción.
¿Quieres aprender más? Estos cursos son una gran opción:
Fundamentos de la tipografía de la A a la Z
Descubre todas las posibilidades de la tipografía para transmitir y potenciar tu mensaje.
IR AL CURSO
Diseño de una Tipografía digital de la A a la Z
Aprende a diseñar una tipografía desde cero con Glyphs, Illustrator y funciones OpenType.
IR AL CURSO
