7 Combinaciones de Google Fonts que puedes Copiar y Usar

No es la primera vez que hablamos acerca de la importancia de la tipografía, en un diseño, ya estemos hablando de diseño gráfico, web o, que decir, de editorial. En algunos de los artículos de este blog, hemos descubierto, por ejemplo, tipografías creativas y originales, el uso de estas en nuestro diseño, además de mostraros algunas de las preferidas por nosotros. Por eso, ahora que ya tenemos una visión global sobre el uso de las mismas…. ha llegado el momento de combinarlas!

Normalmente, a no ser que estemos ante un proyecto en el que la estructura de párrafos sea muy compleja, dividimos el texto en título, subtítulo y texto de párrafo. Cuando hablamos de subtítulos, estos pueden ser más de uno (subtítulo 1, subtítulo 2…), pero en el caso de que lo sean, lo recomendable es usar la misma tipografía para todos ellos, diferenciándose entre sí, en el tamaño del texto (en subtitulo 1 será de mayor tamaño que el 2 y así sucesivamente).

De esta manera a través de algunos ejemplos de combinaciones de tipografías (usados por nosotros en nuestros proyectos y diseños) comentaremos las 3 reglas básicas que hemos de seguir para combinar las tipografías en nuestros diseños. Como decimos, son ejemplos, pues hay millones de posibilidades, pero al final como veréis tras leer el artículo, lo ideal es tener un “top ten” de tipografías e ir combinándolas siguiendo las reglas!

¿Cuantas tipografías utilizo?

Una de las principales reglas básicas, cuando hablamos de combinaciones tipografías es el número de fuentes distintas que se usan en el mismo proyecto. Todos recordamos nuestros trabajos del colegio, en los que usar el ordenador era la última moda y por eso queríamos plasmar todo lo que sabíamos hacer con él. El resultado del mismo era que en un trabajo de unas 1000 palabras, habíamos usado el mayor número de tipografías distintas, y por supuesto utilizando hasta la saciedad la Comic Sans!! 😉 Esto, además de provocar desorden, en la mayoría de los casos es la causante de falta de legibilidad.

Lo conveniente es usar máximo 2 o 3 tipografías distintas. Como veremos en los ejemplos de combinaciones, a veces con una sola familia de tipografías podemos realizar el texto completamente. Para esto, hay que tener en cuenta que existen familias muy amplias de fuentes en las que contamos con “light”, “médium”, “italic”, “bold”, “black”…. (Oxigen, roboto, lato, advend pro) Y que con una sola familia podemos transmitir la diferenciación entre párrafo y titulo y dar la uniformidad necesaria para que el proyecto tenga un orden.

La familia de la tipografía “Roboto” es tan extensa que solo con ella podemos crear varias combinaciones. Además roboto es la tipografía perfecta para el texto de párrafo, por su buena legibilidad.

Podemos usar tres tipografías distintas, combinando una con fuerza para el título como en este caso la “Oswald”, en mayúsculas y que se distinga de las demás, y para el subtitulo y texto de párrafo distinguir entre sans serif (“Roboto”) y serif (“Bitter”). Es un conjunto arriesgado, pero que puede dar grandes resultados.

Legibilidad en los párrafos vs creatividad en los títulos

Otro de los principios que debemos tener claros, es que aunque casi todas las tipografías sirven para “títulos”, no todas las tipografías son aptas para texto de párrafo. Es más, cuando estamos antes un proyecto en el que el texto de párrafo es primordial, hay pocas tipografías que pueden utilizarse. Como veis, aunque en Silo creativo, tenemos varias tipografías para títulos, cuando hablamos de texto de párrafo solo jugamos con unas pocas tales como “roboto”, “oxigen”, “lato” o “pontano sans”. Al igual que en el título casi todo vale, en el texto de párrafo hemos de ser conscientes de que lo más importante es la legibilidad, puesto que es un texto que va a leerse, y por lo tanto decidir muy bien la tipografía usada.

Con Playfair display podemos aunar todas las reglas: esta tipografía es perfecta para títulos, pero nada recomendable para texto de párrafo y podemos combinar dos tipografías de esta familia con otra que sea la que de contraste (“Lato”).

Puesto que “Advent Pro”, no tiene la legibilidad necesaria para ser texto de párrafo, usamos “Oxygen” para ese fin, pero combinamos dos tipos de la familia Advend Pro, para título y subtítulo.

 

Crea contrastes entre tus fuentes

Unido al principio anterior, usa tipografías con fuertes contrastes entre texto y párrafo. Para el párrafo estamos algo restringidos por la legibilidad, pero para el título, podemos usar la que queramos. Así, una buena manera de combinarlas es incluir tipografías que contrasten.
Si usamos tipografías muy parecidas, pero que no son de la misma familia, lo que conseguimos es un texto plano. En el caso de usar la misma familia combínala, como hemos visto en el primer punto, por ejemplo entre “bold” para titulo y “light” para párrafo.

Otra buena opción es usar la combinación de serif y sans serif. Lo importante es crear el contraste, y ya que sabemos que con el texto de párrafo estamos algo más limitado, es en los títulos donde debemos dejar volar nuestra creatividad.

La originalidad de la tipografía “Lobster two”, hace que cree contraste con tipografías de fácil lectura y gran legibilidad como la “Pontano Sans«. Con Lobster two, se cumple también el principio anterior: solo debe ser usada como título!

La tipografía “Bazar” es perfecta para títulos, pues tiene fuerza y crea contraste con el texto de párrafo (puedes verla en funcionamiento en nuestro diseño para WordPress en la plantilla Vowels). En este, sin embargo, se ha usado la tipografía “Oxigen” puesto que queremos una gran legibilidad, que con Bazar no tendríamos.

Aunque los ejemplos han ido acompañando a cada una de las reglas, cuando los volváis a ver tras leer el artículo completo, observareis que todas las combinaciones cumplen con todas las reglas! ¿Y vosotros, como combináis vuestras fuentes?

NOTA: En este caso, todas a excepción de la tipografía BAZAR, son Google Fonts, por lo que podéis descargarlas de manera gratuita y usarlas con facilidad para todos vuestros proyectos. La tipografía BAZAR no es Google Fonts, pero comparte las mismas características, es gratuita y de licencia abierta.