La tipografía es como un segundo idioma que se comunica en un nivel más sutil más allá de las 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 sólo cuenta una historia, sino que crea una atmósfera y una respuesta emocional del mismo modo que un tono de voz. Si todos los elementos visuales del diseño de una página web influyen en la experiencia del usuario, entonces, por supuesto, la tipografía tendrá un gran impacto, especialmente en sitios con mucho contenido. Una tipografía deficiente o deficiente será tan repulsiva para los lectores como los errores gramaticales flagrantes.
Hay muchas reglas que rodean las mejores prácticas en el uso de tipografía; consulte nuestra publicación de diseño de tipografía para obtener una AZ 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 y luego profundizaremos en los elementos individuales.
Para obtener más información sobre los aspectos básicos de la creación y el uso de tipos, consulte esta lista de tutoriales de tipografía. Para obtener más información sobre el uso de la tipografía en el diseño de interacción, descargue el libro electrónico gratuito Mejores prácticas de diseño de interacción.
Este curso te enseñará todo lo que necesitas saber sobre UX (Crédito de la imagen: futuro)
¿Quiere obtener más información sobre el uso de tipos en las interfaces de usuario? Regístrate en nuestro Curso Fundamentos del Diseño UX hoy.
Niveles de jerarquía tipográfica
Como describimos en Mejores prácticas de la interfaz de usuario web, la jerarquía tipográfica es un subconjunto dentro de la jerarquía visual. La jerarquía tipográfica organiza las letras de manera que las palabras importantes se destaquen fácilmente para los lectores que buscan información.
Es fácil ver qué partes son las más importantes en el sitio web de Venus Story (Crédito de la imagen: Historia de Venus)
Sin esta jerarquía, cada letra y palabra de un diseño parecería idéntica. Su 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.
Intente darle forma a su tipografía en estos niveles:
01. Nivel primario
El texto más visible de la página, normalmente 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 sólo para titulares y mazos (conocidos como “muebles”).
02. Nivel secundario
Menos notorio que el nivel primario, pero más notorio que el contenido principal, el nivel secundario maneja todo lo que hay en el medio. Este nivel presenta algunos elementos mínimos pero distintos en tamaño y color y, por lo general, incluye subtítulos, leyendas, citas, infografías o bloques de texto de apoyo separados del contenido principal.
03. 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 distraerse menos.
04. 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 incluye en esta categoría.
Ejemplo de jerarquía visual
Para ilustrar la separación de capas utilizadas correctamente, veamos el siguiente ejemplo de Jon Tangerine.
Cortesía de Jon Tangerine (Crédito de la imagen: Jon Tangerine)
La tipografía aquí tiene tres capas distintas para explicar claramente los elementos de cada pieza sin explicar nada. Veamos la segunda entrada:
El título es obviamente “Nosotros, quienes somos diseñadores web”, pero ¿por qué es tan obvio? El texto es más grande (tamaño), más negrita (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 de el texto, y también en cursiva para dar más distinción. El tercer nivel, la vista previa del artículo, carece de funciones. En comparación con las otras capas, puede parecer sencillo, pero es para que los lectores no se distraigan al intentar apreciar el contenido real.
Elementos de jerarquía en tipografía.
¿Qué parte te interesa? (Crédito de la imagen: UXPin)
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, controlará mejor su tipografía y, por lo tanto, controlará mejor hacia dónde van los ojos de sus usuarios. Para obtener más información sobre esto, consulte el artículo de Jeremy Lloyd sobre cómo comprender la jerarquía tipográfica.
01. Tamaño
La unidad básica de jerarquía tipográfica. El texto de diferentes tamaños atrae diferentes niveles de atención.
02. Peso
¿En negrita o no en negrita? (Crédito de la imagen: W3.org)
El grosor del texto se aumenta más fácilmente mediante negrita. Aunque es más sutil que el tamaño, sigue siendo un método sencillo para hacer que su texto se destaque. La negrita es especialmente eficaz para añadir peso al tipo terciario.
03. Cursiva
Las letras en cursiva llaman la atención de una manera menos dramática que las negritas. Debido a que es un toque sutil, funciona bien para el tipo terciario.
04. Capitalización
Así como los correos electrónicos escritos con Bloq Mayús suenan como si estuvieras gritando, lo mismo se aplica a la tipografía web. Tenga siempre cuidado al escribir letras en mayúscula, porque parecen desproporcionadamente más grandes y aparecen en primer plano.
05. 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, morado), especialmente si el texto de colores cálidos se coloca sobre un fondo de colores fríos. El contraste de color también importa, ya que los colores saturados o brillantes resaltan más que los apagados.
06. Contraste
El contraste entre cualquiera de estos factores (tamaño, peso o color) llamará la atención. Los tipos de letra contrastantes para los titulares y el cuerpo del texto ayudan a crear una jerarquía.
07. 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 parezca más estrecho y pequeño. Cada espacio afecta tu jerarquía, desde el simple interletraje hasta la relación entre las palabras y el borde de la pantalla.
08. Posición
'Seguir leyendo' tendría menos impacto si estuviera más lejos (Crédito de la imagen: Pelotón)
La proximidad puede ser una forma rápida y sencilla de transmitir significado.
09. Orientación
Mezcle la orientación de sus palabras y letras para agregar impacto (Crédito de la imagen: Spotify)
Voltear letras y palabras de lado, en diagonal o al revés aumenta el atractivo visual. El efecto crea un atractivo visual sorprendente para los usuarios. Esto funciona especialmente bien para agregar énfasis a palabras/frases cortas dentro del texto principal. La inclinación, la rotación vertical y otros métodos enfocan inmediatamente al usuario en el texto afectado.
10. Textura
Diferentes elementos tipográficos añaden textura a la página. (Crédito de la imagen: la conferencia)
La textura es muy subjetiva, lo que la convierte en 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 de la página. Cada bloque de texto produce su propio patrón, por lo que para crear textura, rompa el patrón cambiando cualquiera de los otros elementos. Aplicar con moderación, de lo contrario distraerá.
Para ver algunos de los mejores ejemplos de tipografía web, eche un vistazo a esta galería de awwwards.
Leer más:
