Tipografía, jerarquía de contenido y contrastes tipográficos

La importancia de la tipografía y los contrastes tipográficos en un diseño

Tipografía, jerarquía de contenido y contrastes tipográficos para conseguir diseños que comuniquen correctamente de tal manera que lo importante consiga destacar de lo que no lo es. Los contrastes tipográficos nos ofrecen la posibilidad de destacar textos para crear un tipo de lectura diferente en función de nuestra jerarquía de contenido en la cual deberemos definir en primer momento (antes de ponernos a diseñar) una ves conozcamos qué es importante en nuestro diseño pasaremos a trabajar estos contrastes tipográficos.

Existen muchos tipos de contrastes y cada uno de ellos nos ofrecen diferentes posibilidades a la hora de diseñar, lo más normal y aconsejable es no pasarnos con su uso pues podemos llegar a crear una composición repleta de contrastes muy llamativos pero sin ninguna lógica. En todo mal diseño siempre solemos encontrar tipografías con miles de estilos, colores llamativos a la loco y toda una serie de recursos gráficos usados sin ningún tipo de control consiguiendo de esta manera que nuestro mensaje se pierda y nuestra identidad como marca o producto pierda credibilidad y valoración por parte del usuario.

A la hora de crear un diseño lo primero que debemos planificar y tener claro es nuestro objetivo, definir cuáles son nuestras metas y lo qué queremos comunicar. Por ejemplo si queremos crear un cartel sobre un evento debemos decidir qué es más importante en ese evento: ¿la fecha? ¿el nombre del evento? ¿ los organizadores?... una vez tengamos esto claro es cuando debemos pasar a diseñar.

Puedes ver información sobre tipografía y contrastes tipográficos en este vídeo:

Antes de diseñar 

  1. Decide qué es lo más importante en tu diseño
  2. ¿Qué quieres destacar? ¿algo es más importante? 

Toda una serie de preguntas que debes hacerte para conseguir filtrar esa jerarquía de contenido y llegar a un resultado lógico que te permita reflejar en el diseño aquello que realmente quieres transmitir.

¿Quiero transmitir algo concreto?

En muchas ocasiones nos encontraremos con proyectos donde debamos destacar algo determinado muy específico, por ejemplo sin  estuviéramos diseñando un envase de comida ecológica igual nos interesaría destacar la palabra «eco» y ponerla a todo tamaño. Si esta empresa fuera una conocida marca de comida natural ecológica igual lo más importante seria destacar el nombre de la marca y en segundo plano mostrar la palabra eco. Es por eso que debemos definir antes la importancia de cada elemento del diseño pues eso será lo que marcara nuestra línea gráfica de trabajo.

Contrastes tipográficos

Existen varios tipos de contrastes tipográficos en función de las necesidades que estemos buscando.

Tenemos que saber que un contraste no es más que la diferencia entre un conjunto, esto se puede lograr a nivel gráfico de diferentes maneras: fotografías, textos, color, etc. En este caso nos centraremos únicamente en la parte tipográfica.

  • Contraste de peso
  • Contraste de color
  • Contraste de tipo
  • Contraste de cuerpo / tamaño
  • Contraste de peso visual 

Con estos contrastes podemos crear diferentes composiciones que nos permitirán destacar nuestros textos en función del grado de importancia de cada uno de ellos.

Contrastes tipográficos

Contraste de peso

Las palabras tienen diferentes pesos visuales en función del espacio que ocupen, los pesos visuales comunes que podemos cambiar en la tipografía son por ejemplo: narrow, black, bold…etc. Cuando aplicamos este contraste tipográfico nos damos cuenta que una palabra tiene más fuerza que otra, esto es algo muy usado en textos resaltados.

Si nos fijamos en la imagen inferior vemos como la segunda línea de texto tiene contraste entre ambas palabras, en este caso la palabra creativos se quería resaltar más que la palabra online.  Contraste de peso

Contraste de color

El contraste de color consigue resaltar más aún un texto pero debemos tener mucho cuidado de no empeorar la legibilidad del texto, en el caso de usar este tipo de contraste debemos asegurarnos que el texto se lee correctamente y que no hay demasiados colores en el diseño. Lo más eficaz es resaltar con un único color, debemos evitar crear un cuadro de colores. Un ejemplo de este tipo de contraste es el que se usa en todas las ofertas de producto: texto en color rojo muy llamativo con la palabra oferta.  Por medio del color podemos resaltar textos importantes

Contraste de tipo

Cada tipografía tiene un estilo determinado, si usamos dos tipos de tipografías conseguimos que las palabras destaquen entre ellas. Muchas veces se utiliza un tipo de letra diferente para representar distintos contenidos, por ejemplo una revista puede tener un tipo de letra determinado para los títulos y otra para los subtitulos.

Contraste de tipo

Contraste de cuerpo

El contraste de cuerpo o de tamaño es uno de los más usados cuando diseñamos, este contraste 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.

Contraste de cuerpo

Contraste de peso visual

Toda tipografía tiene un peso visual determinado, según el cuerpo que tenga la tipo, el color y el grado de opacidad, una texto puede ser más o menos llamativo para el ojo. Esto se podría aplicar en un diseño cuando tenemos un titular importante y justo debajo uno secundario, el secundario puede tener un porcentaje de color menor que el primario consiguiendo de esta manera que el texto llame más la atención.

El contraste de peso visual se centra en dar importancia a un texto por medio de la intensidad de la tipografía

Jerarquía de contenido

Una vez tengamos claros los contrastes tipográficos debemos pararnos a pensar qué es importante y cómo debemos planificar nuestro diseño. Antes de ponernos a crear esta jerarquía es necesario conocer un poco este sistema.

Estructura una correcta jerarquía de contenido

En el ejemplo que vemos en la parte superior podemos visualizar la importancia de la palabra jerarquía, en este caso como el post habla de este tema se ha querido resaltar esa palabra mediante un contraste de cuerpo. De forma secundaria con un cuerpo menor y un contraste de color se destaca un texto secundario también importante. El resto de los textos tienen menor importancia que los textos de la izquierda pero dentro de su conjunto tienen también jerarquía y grados de importancia.

En las revistas podemos encontrar estos contrastes tipográficos que varían en función de la importancia que tengan, es ideal ver muchas referencias visuales antes de ponernos a diseñar pues estas referencias nos ayudarán a educar nuestro ojo y comprender mejor la manera profesional de trabajar.

¿Consigues ver los tipos de contraste?

Los contrastes tipográficos los podemos encontrar en todos los diseños

En el caso de la revista que veos en la imagen superior nos encontramos con contrastes de pesos visuales diferentes, por un lado tenemos la fotografía y por otro lado el texto, cuando hagamos un diseño donde podamos destacar una fotografía deberemos hacerlo de la misma manera que hemos visto anteriormente en este post: primero pensar que mostrar, qué es importante y cómo mostrarlo para comunicar correctamente.

El mundo del diseño esta repleto de reglas necesarias para conseguir emitir correctamente un mensaje de forma creativa y efectiva, si conseguimos tener claro qué es lo queremos ya tenemos medio camino resuelto para llegar a una buena propuesta gráfica.


Sé el primero en comentar

Deja tu comentario

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

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.