Jerarquía Tipográfica: Guía para una Mejor Legibilidad

Jerarquía Tipográfica

La jerarquía tipográfica es un subconjunto dentro de la jerarquía visual que nos permite organizar las letras o caracteres para que las palabras importantes se destaquen fácilmente, permitiendo organizar la información y la lectura. Sin esta jerarquía, todos los caracteres y palabras de un diseño parecerían idénticas, volviéndolo tan atractivo visualmente como un símbolo del sistema o documento de texto de programación.

Niveles de Jerarquía

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 su impacto visual, este nivel debería ser escaso; reservarlo solo para titulares y cubiertas (conocidos como 'encabezados').

Nivel Secundario

Menos perceptible que el nivel primario, pero más visible 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, citas extraídas, infografías o bloques de texto de apoyo separados del contenido principal.

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 concentrándose en el contenido.

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 carteles, logotipos u otros gráficos de fondo también se incluyen en esta categoría.

Recursos para Jerarquizar

Tamaño

Es la unidad básica de jerarquía tipográfica. Los textos de diferentes tamaños atraen diferentes niveles de atención. El contraste de cuerpo o de tamaño es uno de los más usados, ya que permite resaltar un texto de forma rápida y clara gracias al gran peso visual que consigue la tipografía cuando esta tiene gran cuerpo en comparación con el resto. Las revistas, los periódicos, los envases, los carteles y un sin fin de soportes utilizan este contraste para resaltar un elemento importante en un diseño.

Variables/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. El grosor de las letras puede hacer que el texto se vea más grande (trazos gruesos en negrita) o más pequeños (tipografías finas o comprimidas).

Al hacer un trabajo, y para conseguir mejores niveles de lectura, si usamos una sola familia tipográfica el consejo es: no usar más de 3 variables.

Cursiva

Las letras en cursiva llaman la atención en una forma menos dramática o drástica que la negrita. Debido a que es un toque sutil, esto funciona bien para el tipo terciario.

Caja Alta y Caja Baja

Al igual que los correos electrónicos o mensajes de WhatsApp al escribirlos en caja alta “suenan” como si estuvieran gritando. Lo mismo se aplica a la tipografía en una pieza de comunicación. Siempre deben tener cuidado al escribir letras en caja alta, ya que aparecen más grandes y se perciben siempre en primer plano.

Color

El color puede ayudarnos a destacar o bajar el peso visual de un elemento gráfico. También debemos tener en cuenta que 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.

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.

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 o soporte impreso.

En otras palabras, el espaciado entre los elementos tipográficos – tanto el espaciado de letras como el espaciado de líneas – puede hacer toda la diferencia entre un diseño equilibrado fácilmente legible y uno que se vea amontonado y confuso.

Proximidad

El espaciado no trata únicamente de separar elementos tipográficos; sino también de la proximidad, o acercar los elementos relacionados para que se perciban como un mismo grupo. Reducir el espaciado un poco entre los fragmentos de texto que van juntos (para que sea más evidente que están relacionados) es otra herramienta visual para ayudar a los espectadores a navegar por el diseño con mayor facilidad.

Si hacen memoria, se trata de una Ley de Gestalt.

En infografías, donde hay mucho contenido para organizar, la proximidad es la clave para crear un diseño equilibrado que tenga sentido visualmente.

Combinaciones Tipográficas

Cada tipografía tiene su propia personalidad. Usar muchas tipografías confunde y dificulta la lectura, entonces, combinar fuentes tipográficas implica usar dos familias distintas. Y al mismo tiempo tampoco se debe abusar de las variables de cada una de ellas para que no termine siendo confuso o logrando todo lo contrario: generar ruido y pérdida de jerarquía visual.

Existen distintas formas de generar combinaciones:

• Familias complementarias
• Familias opuestas
• Familias Sans-serif y familias Serif.

En todos los casos la elección de las familias tendrá que ver con lo que queremos transmitir, por ejemplo: un poster con estética vintage.

Familias Complementarias

Tal como su nombre lo indica son familias dentro de una misma tipología, por ejemplo: serif, que se complementan visualmente. Se logra una integridad visual y al mismo tiempo se puede marcar una jerarquía de información. Seleccionando, por ejemplo, una familia para titulares y destacados (nivel 1 y 2) y otra para el contenido (nivel 3).

Familias Opuestas

Tal como dice el dicho “los opuestos se atraen” y dentro de una misma tipología, por ejemplo: palo seco, podemos encontrar familias que son muy fuertes o rígidas y otras que son mucho más delicadas u orgánicas. Elegir fuentes con estas diferencias en su percepción, nos permiten trabajar la jerarquía en la organización de la información.

Familias Sans-serif y Familias Serif

Es la combinación más histórica y elegida entre diseñadores porque permite una mayor diferenciación tipográfica.

Existen familias que tienen distintas tipologías, lo cual nos asegura que funcionen bien. Por ejemplo la familia Museo es una tipografía que tiene algunos rasgos egipcios combinados con una sans-serif. Con posterioridad se crearon la familia Museo Slab, la cual es completamente egipcia, y la Museo Sans que es totalmente palo seco.
Las tipografías que tienen esta cualidad de poseer más de una tipología son llamadas “super familias”.