Reglas para combinar fuentes que sí funcionan

Pon dos combinaciones una al lado de la otra. A la izquierda, titulares en Playfair Display sobre párrafos en Source Sans: la página se lee compuesta — dos voces, claramente repartidas, cada una haciendo su propio trabajo. A la derecha, titulares en Inter sobre párrafos en Roboto: dos tipos de letra respetables y, sin embargo, la página parece levemente rota, como si una fuente no hubiera cargado y se hubiera colado una de reserva. La combinación de la izquierda contrasta. La de la derecha casi coincide — y ese «casi» es exactamente el problema.

Combinar fuentes con acierto se apoya en un principio fundamental: contraste en la clase, armonía en la proporción. Empareja tipos de letra de categorías distintas — un serif de titular sobre un sans de texto, un geométrico sobre un humanista — para que cada tipo tenga un trabajo definido; y haz coincidir sus proporciones — altura x, ancho, pesos que se solapen — para que se lean al mismo tamaño visual. La mayoría de las reglas de combinación que circulan son casos particulares de este principio. Este artículo forma parte de nuestra guía de tipografía.

¿Por qué dos fuentes parecidas se ven mal juntas?

Porque el ojo registra la diferencia pero no puede clasificarla como intencionada. Una analogía útil es el valle inquietante de la robótica: un robot de dibujos animados resulta encantador y un rostro humano es normal, pero un rostro casi humano inquieta — lo bastante cercano para invitar a la comparación, lo bastante distinto para no superarla. Dos tipos sans casi idénticos caen en el mismo valle. Playfair sobre Source Sans nunca plantea la duda de si fue deliberado; Inter sobre Roboto se lee menos como una decisión y más como un error de renderizado.

Este es el fallo clásico al combinar, y merece su propio párrafo porque es en el que más gente cae: elegir dos fuentes que gustan por separado — ambas resultan ser tipos sans limpios y contemporáneos — y descubrir que la combinación se lee como un error que ninguna de las dos comete por sí sola.

¿Qué significa «contraste en la clase»?

Empareja entre categorías, para que cada tipo tenga un trabajo visiblemente distinto. Las jugadas clásicas:

• Serif de titular sobre sans de texto — una voz serif para los titulares, un sans uniforme y discreto para los párrafos y el texto de interfaz.
• Sans de titular sobre serif de texto — la inversa editorial: estructura nítida arriba, comodidad de lectura en formato largo abajo.
• Geométrico sobre humanista — contraste dentro de la categoría sans: una voz de titular de trazo calculado sobre una voz de texto orgánica, o al revés.

La dirección que elijas es una decisión de voz, no una decisión de corrección. La prueba es más simple que la taxonomía: si alguien que echa un vistazo a la página no distingue de inmediato que hay dos tipos de letra, el contraste es demasiado pequeño.

¿Qué significa «armonía en la proporción»?

El contraste hace legible una combinación; la armonía la hace cómoda. Tres proporciones hacen la mayor parte del trabajo:

• Altura x — la altura de las letras minúsculas en relación con el cuerpo. Los tipos con alturas x compatibles quedan al mismo tamaño visual cuando el cuerpo coincide. Esto importa sobre todo allí donde los dos tipos se encuentran a tamaños parecidos — un párrafo de entrada, una cita destacada, una etiqueta sans en negrita dentro de texto serif — donde un desajuste hace que uno de los tipos parezca más pequeño por accidente.
• Ancho — las combinaciones cotidianas se asientan mejor cuando los anchos de carácter están en el mismo rango. Un titular condensado sobre un texto ancho puede funcionar como un contraste dramático deliberado, pero hay que elegirlo, no tropezar con él.
• Solape de pesos — comprueba que ambas familias tienen los pesos que el diseño necesita allí donde se encuentran. Si el énfasis del texto pide un 600 y la familia de los titulares salta de 400 a 900, ese hueco aflorará como un compromiso incómodo en algún punto de la página.

¿Cómo deberías probar una combinación de fuentes?

Con texto corrido real, a tamaños reales — no con un muestrario del alfabeto. Las letras de la A a la Z te dicen qué aspecto tiene un tipo; no te dicen casi nada sobre cómo se comportan dos tipos juntos en una maquetación. El protocolo:

1. Compón un titular real sobre un párrafo real — las palabras de tu producto.
2. Usa los tamaños que tu escala realmente produce, no los que la vista previa trae por defecto.
3. Juzga la combinación al tamaño de texto, no al de titular. Casi todo parece aceptable a 51px; el texto de párrafo es donde la armonía falla — donde un desajuste de altura x o un peso ausente se hacen visibles en cada línea.

Carga una combinación clásica de serif sobre sans en Scale Composer — un titular de clase Playfair sobre un texto de clase Source Sans, previsualizado como titular y párrafo en un texto de muestra editable a los tamaños reales de la escala. Sustituye la muestra por tu propio texto y juzga el párrafo antes que el titular.

¿Qué combinaciones de fuentes se citan a menudo como acertadas — y por qué?

Estos cuatro son ejemplos citados con frecuencia, todos de la clase Google Fonts, y cada uno funciona por una razón de proporción que puedes nombrar:

• Clase Playfair Display + Source Sans. Contraste de clase máximo: un tipo serif de titular de alto contraste frente a un sans humanista de trazo uniforme. Los trazos finísimos de Playfair sufrirían en los párrafos; Source Sans nunca tiene que hacer de voz de titular. Cada tipo se queda en su hábitat.
• Clase Space Grotesk + Inter. Contraste dentro del sans: un grotesco de titular con carácter sobre un caballo de batalla deliberadamente neutro. Salva el valle inquietante porque la distancia de personalidad es amplia, mientras que ambos comparten proporciones contemporáneas — alturas x grandes, anchos similares — de modo que el paso del titular al texto es fluido.
• Clase Merriweather + Archivo (la dirección inversa). Un grotesco de habla llana para los titulares sobre un serif dibujado para lectura en pantalla. Funciona porque la gran altura x y los trazos robustos de Merriweather coinciden con las proporciones del sans — ambos parecen del mismo tamaño aunque difieran de clase.
• DM Serif Display + DM Sans. Diseñados como compañeros: contraste de clase construido sobre un ADN esquelético compartido. La armonía llega por construcción y no por auditoría — que es la promesa de cualquier combinación dibujada como un conjunto.

Vale la pena hojear colecciones de combinaciones ya contrastadas una vez que sabes qué buscar; Google Fonts Knowledge es un buen punto de partida entre los recursos sobre combinación de fuentes.

¿De verdad necesitas dos fuentes?

No necesariamente — la alternativa de una sola familia está infravalorada. Una única familia con un rango de pesos de verdad puede producir jerarquía solo con el contraste de peso y de tamaño: titulares en 700 con el interletrado ligeramente más ajustado sobre texto en 400. La armonía sale gratis, porque todas las proporciones son idénticas por definición; el contraste viene del peso en lugar de la clase. Muchos equipos de producto acaban aquí a propósito — una familia es un solo juego de proporciones que gestionar y una sola voz que mantener.

Una superfamilia — un serif y un sans dibujados sobre un esqueleto compartido — es la misma idea con más contraste disponible: combinar sin combinar, porque la mitad del principio que corresponde a la armonía ya la resolvió quien diseñó el tipo.

Intenta romper la combinación antes de comprometerte

Intercambia en vivo los tipos de titular y de texto — la misma muestra de titular y párrafo, con ambas ranuras abiertas a un conjunto curado de alrededor de cincuenta tipos. Prueba una combinación que esperes que funcione y otra que esperes que falle, y mira el párrafo en lugar del titular: en el momento en que dos tipos dejan de quedar al mismo tamaño visual, lo verás primero al tamaño de texto.