Saltar al contenido
AprenderUXUI » Aprender UX / UI y Diseño de Producto » Combinar tipografías para diseño UI

Combinar tipografías para diseño UI

A falta de tener que elegir una tipografía, muchas veces tendremos o querremos utilizar un par de tipografías trabajando a la vez.

Razonas para combinar tipografías

Algunas razones y ventajas de combinar pares tipográficos son las siguientes:

  1. Cambios de contexto.

Es posible que queramos o necesitemos diferenciar el contenido principal de contenido secundario. Por ejemplo el contenido de un blog frente a aclaraciones como pies de fotos, notas a pie de página, notas laterales, etc. 

Tal vez lo que queramos sea diferenciar el contenido de otras secciones como una barra de navegación, una barra lateral o el footer.

  1. Solventar carencias de la fuente principal.

Si la fuente principal está pensada solo para idiomas como el inglés y no tiene en consideración caracteres o grafías como la ñ o la ç, es posible que necesitemos emplear una segunda fuente para los textos en los que pueda o vaya a haber ese tipo de elementos.

De igual manera, algunas tipografías no tienen versión itálica o pueden carecer de algún peso (light, bold, black, etc) que nos interese. Por eso, también utilizar un par tipográfico puede venir muy bien para suplir carencias entre unas y otras.

  1. Ajustar la marca.

La tercera y más importante razón o ventaja es la posibilidad de ajustar la marca con esta segunda tipografía.

Por un lado es posible que la tipografía de la marca sea demasiado expresiva para utilizarla en la web. Por ello podemos utilizar una tipografía más estándar que acentuemos ocasionalmente con la tipografía de la marca. Por ejemplo, si la tipografía principal está construida sobre una fuente de estilo handwritten, probablemente interese combinarla con una más neutral. 

Por otro lado también cabe la posibilidad de que esa tipografía de marca tenga demasiada carga semiótica, o por el contrario, demasiado poca y necesitemos reducir o aumentar la esa carga significativa de la tipografía. Es decir, una tipografía de marca puede tener un estilo conflictivo con lo que realmente quiere comunicar por exceso o por falta. En ese caso, podemos compensar utilizando otra tipografía complementaria. Por ejemplo, una marca puede tener una tipografía totalmente redondeada y ser muy jovial y lúdica, pero necesitar que su sitio web se vea más serio por lo que la combinará con otra que reste esos atributos.

  1. Para facilitar la lectura.

Muchas marcas utilizan familias tipográficas de difícil legibilidad, sobre todo a partir de determinados tamaños. En esos casos, es imperioso combinarla con una segunda tipografía para que la experiencia de uso no se vea perjudicada.

Por ejemplo, imagínate una web o videojuego de Star Wars con solo esa tipografía grande y gorda. Sería muy pesado de leer, igual que la introducción de las películas. Por eso, y sobre todo para elementos de menor tamaño es mejor combinarlo con una tipografía más legible.

Captura del juego Star Wars Battlefront II, no se usa la típica tipografía de Star Wars

¿Cómo combinar los pares tipográficos?

Una vez visto las ventas y razones por las que combinar tipografías diferentes, vamos a ver algunos criterios imprescindibles para que funcionen bien las parejas tipográficas. Puedes usarlos como una guía de pasos a seguir para comprobar que tus dos tipografías elegidas encajan bien.

  1. Contraste

El primer criterio para combinar fuentes es que tengan suficiente contraste ya que de lo contrario, la combinación solo se sentirá rara, como si hubiera algún error tipográfico. Por el contrario, también puede ser problemático combinar dos tipografías excesivamente diferentes, pero eso son más excepciones que reglas.

Por tanto una práctica muy segura es combinar una tipografía con serifa, manuscrita o display con una sin serifa. 

Claro que también podríamos emplear una sola familia tipográfica ya que el contraste no solo se consigue por las formas de las letras sino también por los criterios que veremos a continuación.

  1. Jerarquía

Otro criterio a seguir es el de la jerarquía. A la hora de cambiar las dos tipografías, no deben llamar la atención de forma similar, sino que claramente una debe ser mucho más predominante que la otra.  

Por tanto, una buena práctica aquí es combinar diferentes pesos y tamaños tipográficos, lo cual exige que ambas tipografías tengan las variables (pesos) y caracteres (mayúsculas y minúsculas) necesarios para que cumplan con la jerarquía que se les va a imponer.

  1. Utilidad y contexto

Uno la utilidad y contexto en un solo criterio ya que aunque entiendo que son diferentes, no se pueden desvincular. La utilidad es parte del contexto de uso y el contexto requiere una utilidad determinada.

Ciertamente, con utilidad me refiero a casos como el que hemos visto previamente en Solventar carencias de la fuente principal. Si nuestra tipografía base tiene ciertas carencias, es imprescindible ligarlo a otra que no tenga esos problemas.

En cuanto al contexto, me refiero al hecho de saber dónde se va a utilizar esa tipografía.  No es lo mismo en un cartel de gran formato que en una etiqueta. Ni tampoco es lo mismo el encabezado principal de una landing page, que los textos legales que rigen las condiciones de ese título. Aquí es donde vas a ver la unión entre utilidad y contexto. Seguramente queramos que la tipografía del encabezado sea pesada y decorativa para llamar la atención lo máximo posible, esa es su utilidad. Sin embargo, esto suele acarrear importantes problemas de legibilidad en tamaños pequeños. Por ello, deberemos combinarla con otra que se lea bien en poco espacio.

  1. Carga semántica

La carga semántica es el criterio que responde al punto anterior sobre Ajustar la marca. Usaremos este criterio para encontrar una pareja que refuerce, mantenga o suavice la personalidad de nuestra tipografía base según las necesidades del proyecto. 

Las tipografías sin serifa son las más neutras, por eso son las que encajan con más seguridad con el resto de tipografías. Así que pueden ser la vieja confiable para emparejar a nuestras tipografías base independientemente de cómo sean estas.

  1. Ritmo

El ritmo es una propiedad que tiene el texto en base a la combinación de tinta con espacio en blanco. Una tipografía más separada tendrá un ritmo más lento que otra que coloque los elementos más cerca entre ellos. Además, el ritmo no sólo es solo horizontal, sino también vertical. Así que no es solo cuestión de legibilidad, sino de la sensación que provoca en el lector.

En cualquier caso, el ritmo es otro criterio a valorar a la hora de crear un par tipográfico. Como dice Tim Brown en Combining Typefaces, las tipografías más interesantes tendrán un ritmo que se sienta organizado y su pareja, otro ritmo que encaje visualmente. 

No obstante, tal vez queramos utilizar el ritmo para crear sentimientos en el lector. Así pues, si por ejemplo queremos mantener una sensación de lentitud o aburrimiento, elegiremos dos tipografías con mucha separación entre caracteres.

Inspiración y pares de tipografías

Finalmente, veamos algunos recursos de los que aprender, o cuanto menos, utilizar como inspiración

  • Fontpair: Fontpair es una web donde se recomiendan pares de tipografías que se ha comprobado que funcionan bien. Podrás ver cómo se ve cada combinación de tipografías.
  • Typio: Typ.io es otra web, quizá incluso mejor que fontpair porque no solo te sugiere pares tipográficos sino que te pone ejemplos de webs en los que se han usado para que veas cómo quedan aplicados en el mundo real.
  • Font Joy: Fontjoy.com es una web donde puedes crear rápidamente combinaciones de hasta 3 tipografías diferentes y ver cómo quedan o pedirle a la máquina que te las genere ella si solo quieres inspirarte.
  • Google Fonts: ya sé que conoces Google Fonts como fuente de donde obtener tipografías de uso comercial libre. Pero es que además, tiene muchos posts explicando conceptos sobre tipografía y también sobre cómo emparejarlas. De hecho, ha nutrido en parte el contenido de esta entrada.