5 Consejos para dar Jerarquía a la Tipografía en tu Proyecto Web

Cuando hablamos de combinaciones tipográficas, hay ciertos factores que hemos de tener muy en cuenta: jerarquía y contraste. Estos dos términos van muy unidos, pues necesitamos crear una cierta jerarquía entre cada uno de textos que compongan el proyecto y esta será la encargada de crear contraste.

En los proyectos gráficos podemos tener una mayor libertar a la hora de crear combinaciones tipográficas, pero en los proyectos de diseño web, esos elementos están más definidos y por lo tanto es más sencillo tomar una política de decisiones sobre cada uno de ellos.

Es muy importante definir la jerarquía entre ellos, pues si no podemos llevar al usuario a error, además de que estaríamos desperdiciando el potencial que nos da la tipografía. El texto debe ir llevando a usuario a través del proyecto y no al revés.

De esta manera, hoy hablaremos sobre 5 consejos para imprimir a la tipografía de tu web la jerarquía que necesita. Come on! 🙂

1. Construye una escala

Es claramente el punto principal y a partir del cual se debe construir una buena jerarquía de texto. Antes de comenzar, define la relación de cada uno de los elementos de texto y la proporción entre ellos.

No sirve para nada definir que el texto de párrafo es de 16 px y que el de los títulos sea de 18 px, cuando la tipografía escogida para los títulos tiene un tamaño menor y el efecto no es el que queremos. La escala no puede solo venir determinada por los números, sino que hay que hacer las comprobaciones previas para poder definir que es la jerarquía que estamos buscando. Parte de la combinación tipográfica adecuada y trabaja la jerarquía a partir de ahí.

construcion-jerarquia-tipografia

Aunque posiblemente, si estás cómodo con esta jerarquía esta te acompañe durante muchos de tus proyectos web, piensa que tendrás que reajustarla en cada uno de ellos, pues las combinaciones tipográficas cambiarán y también el efecto que quieras producir. Aunque algunas cuestiones las mantengas, siempre hay que reajustar!

2. Importancia de un buen texto de párrafo

No me voy a detener pues en el artículo de consejos para que el texto de tu blog sea legible, podéis encontrar los tips a tener en cuenta para tener u buen texto de párrafo. Recordar, la importancia del tamaño de letra y del interlineado, los espacio, las combinaciones de fondo…. Estos consejos son muy importantes, y si quieres que tu texto de párrafo funcione y que lo más importante, sea legible, tienes que tenerlos muy presente.

importancia-texto-parrafo

Además, si el texto aparece en la cabecera o debajo de esta siendo una parte fundamental para entender el proyecto, es una buena idea alinearlo en el centro y por supuesto mantener un tamaño de letra que facilite la lectura. No olvides que si el texto va a aparecer entrado, da igual que no llegue de lado a lado de la pantalla, lo ideal es que este tenga entre 40-70 caracteres.

3. Imprime distinto peso a los diferentes elementos de texto.

Es importante determinar el peso visual que queremos dar a cada uno de los elementos de texto y esto además de con el tamaño del mismo, podemos lograrlo aplicando distintos factores a las tipografías.

Si queremos que nuestro ojo se vaya centrando en diversos puntos de, en este caso, la pantalla, debemos ir guiándolo a través de la jerarquía de las tipografía y por lo tanto del peso que le vamos dando a estas.

Es bastante usado dotar de un mayor tamaño a las tipografías que aparecen en la parte superior, y menor a la inferior. Pero también con esta regla podemos buscar espacios en los que queramos llamar la atención y buscar contrate con la tipografía.

Algunos consejos para dar más peso a la tipografía:

Incluye trazos más gruesos: si tu tipografía tiene distintos tipos dentro de la misma familia, es el momento de hacer uso de ellos. Usa una bold, black o heavy, para dar a tu texto más importancia.

Úsala en mayúsculas: claramente si combinas tipografías mayúsculas/títulos, minúsculas/texto de párrafo, conseguirás crear una jerarquía entre ellas. Además puedes jugar con la proporción de altura/anchura, dependiendo del efecto que estemos buscando, nos iremos hacia uno u otro ancho.

El espacio: si jugamos con este también podemos conseguir jerarquizar las distintas tipografías. No es lo mismo que estas aparezcan con espaciado entre ellas o con una separación concreta, depende de la jerarquía que le demos, este espaciado debe variar.

Usa tipografías mas originales y creativas: lo hemos comentado en numerosas ocasiones, los títulos y los espacios tipográficos, son el lugar perfecto para usar tipografías que llamen nuestra atención. Por lo que si estás buscando crear jerarquía y contraste, usa una tipografía distinta pero que combine con el texto de párrafo.

contraste-tipografico-web

Si por el contrario, lo que estamos buscando es quitar peso a la tipografía, puedes seguir alguno de estos consejos:

Si antes decíamos que es el momento de dar grosor, ahora es el momento de quitárselo: usa grosores de líneas más finos o una tipografía más condensada.

Imprime menos contraste con el fondo: Recuerda que si quieres que el texto sea legible, tiene que existir contraste, pero también, podemos hacer que disminuya un poco para marcar menos contraste.

Usa minúsculas: De la misma manera que antes usábamos mayúsculas para crear jerarquía, usamos minúsculas para aumentar ese contraste.

jerarquia-textos-wb

4. Sigue el patrón de lectura «Z»

Cuando leemos (en la escritura occidental, sino hay que voltear la Z) lo hacemos de izquierda a derecha, nuestro ojo se va automáticamente a la parte superior izquierda (por eso la mayoría de logotipos se encuentran en este lugar).

De esta manera, una gran opción es usar el flujo natural y colocar el texto de nuestra web siguiendo este esquema. Si conseguimos que el texto fluya de esta manera, será más sencillo que lleve a nuestro visitante con más fuerza.

Piensa que siguiendo este patrón, cualquier palabra o conjunto de palabras que quieras realzar puedes hacerlo cambiando el color o imprimiendo un subrayado. Estas técnicas (tan antiguas como el descubrimiento del fuego) siguen dando su efecto.

estructura-texto-z

5. Comprobación visual

Comenzábamos diciéndolo y no podemos más que terminar con ello. Todo lo que he contado no tiene ninguna validez si no realizamos este último punto: hemos de hacer una inspección visual para comprobar que se adecua a lo que estamos buscando y por lo tanto estamos imprimiendo jerarquía a las palabras o frases que queríamos.

Cuando diseñamos un proyecto web, influyen muchos factores, imágenes, ilustraciones… por lo que la jerarquía tipográfica debe adaptarse perfectamente a ellos. Así, aunque definamos unas reglas generales, recuerda que en la mayoría de los casos deben ser especificas para cada proyecto.

La jerarquía va cambiando…

Comentarios (2)

  1. Hola, Verónica:

    Como siempre, leerte es un placer y resulta muy instructivo 🙂
    La buena elección de la tipografía es fundamental para garantizar una lectura cómoda y fácil. Como dices, ante todo, un texto debe ser legible.

    Personalmente, como correctora y asesora lingüística, me fijo en el aspecto de la jerarquía. Y he comprobado que, a pesar de la importancia que tiene, es un factor que está un poco descuidado en muchas páginas web (al igual que ocurre en textos en otros formatos). Al final, si la jerarquía se ha establecido correctamente y se ha adecuado al texto, el lector no repara en ella; pero si se ha dejado de lado… la experiencia de los lectores será bastante peor de lo que podría ser.

    Un abrazo,
    Nuria

    1. Hola Nuria:

      Muchas gracias por tus palabras!
      Opino como tú, a veces se descuida la elección de la tipografía y la jerarquía de esta dentro de la web (o el formato que le corresponda), hacía elecciones solo de tipo estético. Lo repito muchas veces, dependiendo del formato ante el que nos encontremos, tendremos que dar más importancia a una u otra cosa, y en web debemos de establecer una jerarquía clara. Nuestros lectores lo agradecerán.

      Un abrazo! 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *