Combinaciones Google Font Serif listas para copiar y usar

Read this article in English

El otro día cuando escribía acerca de las tipografías en el diseño web, me di cuenta de que hacía mucho tiempo que no hablábamos sobre nuestras queridas Google Font, y como no, de combinaciones entre ellas!

Sabéis, que aunque me gusta de vez en cuando compartir tipografías de pago, que pueden venirnos muy bien para un trabajo especifico, por ejemplo, de un logotipo, en la mayoría de ocasiones hablamos de tipografías gratuitas y en especial trabajamos con Google Font.

¿Porque elegir una Google Font?

Ni mucho menos, es un requisito “sine qua nun” trabajar con Google Font, de hecho, aquí os hemos mostrado varias tipografías gratuitas que no son Google Font, como las de aire retro, con estilo a mano, para realizar mensajes impactantes…. Hay infinidad de ellas, pero Google Font nos parece un banco de tipografías muy amplio (y muy bien ordenado) y entre las que puedes encontrar tipografías de muchos tipos.

Es un buen cajón de sastre del que partir en tus trabajos web y gráficos porque…

En diseño web: son unas tipografías que están muy testadas, se sabe que funcionan muy bien y que son compatibles con distintos navegadores y dispositivos. Además suelen incluir caracteres especiales y de otros idiomas como el árabe o el cirílico  También son muy sencillas de añadir y usar.

En diseño gráfico: Como siempre decimos, dependerá del tipo de trabajo, pero en general es una biblioteca muy amplia (670 fuentes), en la que seguro encontrarás la que te sirva. Quizás para la creación de títulos, logos y carteles, pueda quedarse un poquitín corta, pero en tipografías serif y sans serif es difícil de superar.

3 combinaciones con familias serif para copiar y usar

Normalmente en Silo Creativo apostamos por tipografías sans serif para texto de párrafo. En nuestras plantillas para WordPress podéis ver tipografías como Roboto, Open sans, Source sans, nuestra querida Raleway o Lato.

La razón es que como hablamos en la infografía sobre 10 consejos para combinar tipografías, cuando estamos ante un texto que se va a leer en un dispositivo digital, es más cómodo leer tipografías sans serif. Sin embargo, esto no quiere decir que no podamos usar serif, al contrario. La tipografía serif la relacionamos a los periódicos y revistas, por lo que poco a poco se está extendiendo la moda de incluir tipografías sans serif en web tipo blogs o magazine.

Un ejemplo de esto es nuestra nueva plantilla para WordPress tipo magazine, Christopher, en la que como podréis ver la tipografía escogida para todo el texto es una serif en distintos tipos de una sola familia.

Así pues veamos algunas combinaciones serif!

Tipografía Crimson text

Con 6 tipos dentro de la familia, podemos conseguir grandes combinaciones tipográficas sin necesidad de usar otra tipografía. Tenemos normal, semibold y bold, y sus correspondientes cursivas. Podemos usar la bold como título, usar la normal cursiva como subtitulo o entradilla y para texto de párrafo la normal será perfecta. Su estilo nos recuerda a la impresión de periódicos antiguos, pero con unas terminaciones modernas. El único problema es que para su uso en web, es algo pesada.

tipografia-crimson-google-font

DESCARGA TIPOGRAFÍA CRIMSON

Tipografía Libre Baskerville

Con un aire similar a la anterior, pero con caracteres algo más grandes y con menos espaciado entre ellos. Tiene tres tipos, normal, cursiva y bold,, por lo que son suficientes para usarlos como párrafo, entradilla y títulos. No es excesivamente pesada, por lo que es buena para usar en web.

google-font-libre

DESCARGA TIPOGRAFÍA LIBRE BASKERVILLE

Tipografía Noto serif

Es la tipografía escogida para nuestra plantilla para WordPress Christopher. Presenta cuatro tipos, normal y bold con sus respectivas cursivas, siendo el peso de las mismas bastante aceptable para su uso en web. El tipo bold tiene mucha fuerza y es perfecta para su uso en títulos, mientras que su espaciado y grosor es perfecto para la lectura.

La tipografía Noto, dispone también de una familia en sans serif.

combinacion-google-font-noto-serif

DESCARGA TIPOGRAFÍA NOTO SERIF

2 Combinaciones tipográficas para contrastar

Si quieres hacer una combinación tipográfica en la que texto y párrafos contrasten y en la que el texto de párrafo sea original, estas son tus combinaciones. Hemos querido contrastar serif- sans serif en titulo y párrafos, para aumentar aun mas ese contraste. Para texto de párrafo, son tipografías que quizá no usamos con demasiada frecuencia, pero que son muy aptas para trabajos de carácter web o gráfico. Vamos con ellas!

Abril + Source Code pro

Abril es una tipografía Serif perfecta para título pues solo cuenta con un tipo, extra bold. Solo con ella podemos hacer láminas tipográficas en incluso logotipos. Tiene mucha fuerza por lo que la combinación con Source Code Pro es perfecta. Esta contrasta con la fuerza de abril, siendo una tipografía limpia. Al tener 7 tipos, podemos escoger el grosor que mejor se adapte a la lectura (dependiendo del medio escogido).

Ambas son ligeras por lo que funcionan muy bien para trabajos web.

contraste-combinacion-tipografica

DESCARGA TIPOGRAFÍA ABRIL DESCARGA TIPOGRAFÍA SOURCE CODE PRO

Montserrat + Cutive mono

Al igual que en la anterior, en este caso el contraste lo conseguimos usando en el titulo la ya conocida sans serif Monserrat y para textos de párrafo tenemos “cutive mono”.

Montserrat con dos tipos es perfecta para títulos, imprimiendo la fuerza que estos necesitan. Es muy ligera por lo que su uso en web es adecuado. Cutive mono solo tiene un tipo, por lo que es perfecta para su uso en párrafo, siendo también muy ligera. Cutive posee otra versión llamada “cutive”.

combinacion-tipografica-original

DESCARGA TIPOGRAFÍA MONTSERRAT DESCARGA TIPOGRAFÍA CUTIVE MONO

Espero que os sirvan esta tipografías, son muy fáciles de combinar y como veis, con solo una misma familia podemos conseguir resultados sorprendentes! 😉

Comentarios (4)

  1. Muy buen post Verónica! Soy un gran apreciador de las fonts de google para web. Raleway tambien es una fuente bastante moderna y limpia.

Deja un comentario

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