fbpx

10 Combinaciones de tipografías para web.

Avatar

A menudo los diseñadores tenemos que decidir qué tipografía es la mejor para cada trabajo. Y te voy a decir una obviedad: hay muchas y de muchos tipos. Por eso, para intentar hacerte la vida un poco más fácil, hemos preparado una lista con 10 combinaciones de tipografías para web para que las puedas utilizar en tus diseños.

Todas las tipografías de las que vamos a hablar se pueden descargar gratuitamente desde Google Fonts y las puedes utilizar en cualquiera de tus proyectos.

Nosotros hemos hecho manualmente todas estas combinaciones de tipografías para web, pero existe una herramienta la mar de útil, creada por la agencia australiana Bold Web Design, que te aconseja sobre distintas combinaciones de tipografías.

Dicho esto, y antes de meternos en faena, te dejo la lista de todas las tipografías utilizadas con su enlace de descarga.

Tipografías Gratuitas utilizadas de Google Font:

 

TOP 10 combinaciones de tipografías.

Me gustaría aclarar que no siempre es necesario hacer estas combinaciones, ya que hay tipografías que se pueden utilizar perfectamente para título, subtítulo y cuerpo del texto. Un ejemplo puede ser Open Sans (la que utilizamos en esta web), que si la combinas con distintos tamaños y grosores puedes conseguir un buen resultado. También añadir, que si no eres Mr. Wonderful, no utilices más de dos tipografías sin la supervisión de un profesional.

Si no eres Mr. Wonderful, no pongas más de dos tipografías sin la supervisión de un profesional.

1. Playfair Display con Open Sans Light.

Personalmente, esta me parece una de las combinaciones más elegantes y de gran impacto. En el titulo superior utilizamos una tipo gruesa con serifa y en el subtítulo una de palo seco más ligera para aumentar el contraste.

2. Anton Regular con Poppins Light.

Anton Regular es una fuente a la que le favorece la caja alta. Viene muy bien para composiciones verticales y más si la combinamos con la versión estilizada de Poppins.

3. Bree Serif con Montserrat.

Si juntas una serifa más rectangular con unos trazos curvados, obtienes una espléndida Bree Serif. Al combinarla con Montserrat ganamos sencillez y limpieza, pero sin renunciar a la serifa en la visión global.

4. Chomburi con Open sans.

Esta combinación de tipografías es muy parecida a la primera. La fuente Chomburi es en esencia como la Playfair Display: Trazos anchos verticales y trazos horizontales más “estilosos”. De nuevo lo juntamos con Open Sans Light para diferenciar el título del subtítulo.
combinaciones-tipografias-gratuitas_4

5. Merriweather con Raleway

Esta tipografía es de alta legibilidad y tiene pinta de que va a ser de lo más top en este 2019. Para acompañarla podemos utilizar una fuente de palo seco como Raleway.

6. Pacifico con Quicksand

Sacamos a relucir la primera “handwritten”. Pacífico tiene trazos muy fluidos que le dan un aspecto muy fresco, además tengo que añadir, que es una fuente muy utilizada en logos que quieren transmitir buen rollismo. Por todo esto, le viene muy bien combinarlo con Quicksand, que viene a ser su prima segunda de palo seco.

7. Quicksand con Montserrat

Como hemos dicho, Quicksand es como Pacifico pero de palo seco y sin ese toque de mano alzada, por eso, en un tamaño correcto puede quedar muy bien con Montserrat. En este caso, a parte de por la diferencia de grosor, también ganamos contraste al aumentar el tamaño del título.

8. Leckerli One y Montserrat.

Aquí conseguimos una combinación de tipografías parecida a la que hemos visto con Pacifico y Quicksand, pero en este caso utilizamos Leckerli One acompañada de Montserrat para transmitirnos la misma frescura.

9. Raleway con Lato Medium.

La fuente Raleway tiene una trazada muy elegante y una legibilidad considerable. Aunque en este ejemplo no hemos utilizado una versión demasiado fina, si vamos a hacer uso de su versión “thin” hay que tener cuidado con su tamaño y no hacerlo demasiado pequeño, ya que puede dificultar mucho su lectura. De hecho, si la utilizamos para un trabajo de impresión, debemos asegurarnos de que va a reproducirse correctamente, ya que si los trazos son demasiados finos podrían perderse en el limbo. Como en otras ocasiones, la combinamos con una tipografía de trazo más grueso como Lato.

10. Grand Hotel con Raleway.

Para terminar, Grand Hotel es una tipografía muy elegante de mano alzada. Como todas las de esta categoría, transmite frescura, pero esta tiene un toque especial. Si la combinamos con una tipografía de palo seco elegante como Raleway, obtenemos gran impacto y visibilidad.

En definitiva.

Se pueden hacer infinidad de combinaciones con tipografías, pero es importante que no nos volvamos locos utilizando muchas fuentes diferentes si no queréis que vuestros proyectos parezcan una yincana. El objetivo es que el mensaje que queremos transmitir sea claro y que nosotros decidamos qué se va a leer primero, definiendo una buena jerarquía de tamaños y contrastes.

Como hemos dicho al principio, hay veces que con una familia tipográfica es suficiente, por eso, es clave definir qué usos va a tener tu tipografía para que puedas escoger la que mejor se adapte a la esencia de la marca.

¿Te gusta utilizar alguna combinación en especial? Déjanos un comentario con tus combinaciones favoritas de tipografías.

checklist wordpress

Suscríbete para descargar un Checklist para crear una web en Wordpress

  • Responsable del tratamiento: Lourdes Ollero Romanillos
  • Finalidad: Sus datos serán usados para poder atender sus solicitudes y prestarle nuestros servicios.
  • Publicidad: Solo le enviaremos publicidad con su autorización previa, que podrá facilitarnos mediante la casilla correspondiente establecida al efecto.
  • Legitimación: Únicamente trataremos sus datos con su consentimiento previo, que podrá facilitarnos mediante la casilla correspondiente establecida al efecto.
  • Destinatarios: Con carácter general, sólo el personal de nuestra entidad que esté debidamente autorizado podrá tener conocimiento de la información que le pedimos.
  • Derechos: Tiene derecho a saber qué información tenemos sobre usted, corregirla y eliminarla, tal y como se explica en la información adicional disponible en nuestra página web.
  • Información adicional: Más información en el apartado Política de privacidad de nuestra página web.
  • Google reCaptcha: Este sitio está protegido por Google reCaptcha. Consulta su Política de privacidad y Condiciones de servicio.

También te puede interesar:

12 preguntas para hacer antes de diseñar un logo.

Cómo instalar un Plugin en WordPress rápidamente.

Descargar todas las imágenes de tu web en WordPress

WordPress 5.0 y su nuevo editor ¿debes actualizar?

Dejar un comentario