05 – El color en la tipografía

Para dar una mayor fuerza a la jerarquía, además del tamaño y el peso de la fuente, podemos aplicar el color.

Para los textos, y en pos de la legibilidad, normalmente se utilizan negros y grises, generalmente colores neutros que podemos obtener de nuestra paleta de colores, tal y como vimos en la píldora donde explicamos cómo crear una paleta de color.

Jerarquía de texto solo por tamaño. Falta algo…
Si aplicamos diferente brillo, aunque usemos el mismo color, la jerarquía mejora.

En muchas ocasiones, hay palabras o elementos que, por potenciar el mensaje que queremos dar, debemos resaltar, y podremos hacerlo con el peso o utilizando itálicas. Para indicar interacción, como por ejemplo los enlaces, se suele utilizar el color primario de la web y un subrayado, de forma que el usuario de una forma rápida y sencilla interpreta que ese texto en concreto se trata de un enlace.

Para otros datos en el texto, como una fecha, una aclaración, los pies de ilustraciones o las citas, se suele utilizar un formato diferente al que estamos usando para el texto en general, y destacarán de la forma en la que nos interese, dándole protagonismo si apoyan nuestro mensaje.

Color en el texto para indicar interactividad y jerarquía
En TheVerge usan su main color para enlaces (interactividad) y citas que destaquen

Existen muchas herramientas donde poder combinar diferentes fuentes y tamaños para analizar sus relaciones antes de aplicarlas a nuestros proyectos, como por ejemplo la antigua Typegenius que fue adquirida por Canva.

Landing de Typegenius
La herramienta de Canva nos permite comprobar cómo combinan diferentes familias de fuentes

Lecturas adicionales complementarias:

Lecturas recomendadas:

Capítulos

(Ir a la portada de Guía de tipografía web)

01 – Prólogo

Si algo he aprendido de diseño en mi carrera profesional es la importancia de la Tipografía. En todos los aspectos de nuestra vida, la tipografía tiene un enorme impacto. Nos […]

02 – Introducción a la tipografía web

Introducción a la tipografía web Antes de comenzar a ver qué reglas debemos usar para componer nuestros elementos tipográficos es importante que aclaremos una cosa. No es lo mismo la […]

03 – Tipos de fuente

Antes de tomar una decisión sobre cuál es el tipo de fuente que quiero usar en un proyecto, vamos a ver las clases de tipografía más habituales. Serif: Este tipo […]

04 – Cómo usar una fuente

Jerarquizando el texto: pesos, tamaños y colores. La jerarquía del texto suele y debe ser bastante tradicional, y que en los proyectos web casi siempre se compone de un título […]

05 – El color en la tipografía

Para dar una mayor fuerza a la jerarquía, además del tamaño y el peso de la fuente, podemos aplicar el color. Para los textos, y en pos de la legibilidad, […]

06 – Interlineado, interletrado y márgenes

Los márgenes, el espacio, “el aire” entre los elementos de texto, son necesarios para que el diseño tenga armonía y la estética que necesitamos. Estos elementos de espacio y de […]

07 – Longitud de los párrafos

A la hora de maqueta secciones de texto, es muy importante la relación de escala con el documento. En el diseño web, generalmente se parte de mallas, rejillas o grills, […]

08 – Conclusión

No es bueno generalizar. Y menos en diseño. Pero en este caso creo que una serie de “reglas” o puntos de partida pueden ser útiles y darían sentido a la […]