La versión corta
- Combinar fuentes funciona mejor cuando cada tipografía tiene un papel claro, normalmente una para los titulares y otra para el texto de cuerpo.
- Una buena pareja contrasta con claridad de una sola forma, como serif frente a sans serif o gruesa frente a ligera, mientras comparte proporciones y ambiente.
- Usar una familia con varios pesos, o una superfamilia con versiones serif y sans a juego, es la forma más segura de combinar fuentes.
- Dos tipografías parecidas pero no idénticas, como dos sans serif neutras, suelen parecer un error y no una pareja.
- Dos fuentes bastan para casi cualquier marca, publicación o web; una tercera debe tener un trabajo acotado, como el código o las etiquetas.
En esta página
Una buena combinación de fuentes se reduce a tres reglas: da a cada tipografía un papel propio, haz que las dos contrasten con claridad de una sola forma y deja que coincidan en todo lo demás, como las proporciones y el ambiente. Un titular con serifa sobre un cuerpo en sans serif es el ejemplo clásico. Si dudas, usa una familia en dos pesos; no puede chocar consigo misma.
Empieza por los papeles, no por las fuentes
Antes de elegir ninguna tipografía, decide qué trabajos tiene que hacer el texto. La mayoría de los diseños tienen dos: titulares que marcan el tono y texto de cuerpo que debe leerse con comodidad. Algunos añaden un tercero, pequeño, como etiquetas o código. Elige primero la fuente del cuerpo, porque lleva la mayor parte de las palabras, y luego busca una fuente de titulares que la complemente.
| Papel | Su trabajo | Lo que más importa |
|---|---|---|
| Titular | Marcar el tono, verse primero | Carácter, peso, cómo se ve en grande |
| Cuerpo | Leerse con comodidad durante mucho rato | Legibilidad, textura uniforme, buena redonda y cursiva |
| Etiquetas y texto pequeño | Leerse deprisa en tamaños pequeños | Formas claras, espaciado abierto, pesos robustos |
| Código o cifras | Alinearse y no dar lugar a dudas | Monoespaciada o cifras tabulares |
Los papeles hechos visibles: un titular grande con carácter, una etiqueta pequeña encima y una línea de apoyo discreta debajo. El contraste está en el tamaño y el papel antes que en la tipografía.
Contraste de una forma, coincidencia en el resto
Una pareja necesita una diferencia visible; si no, la segunda fuente parece un accidente. Pero si las dos difieren en todo a la vez, parece que vienen de proyectos distintos. Elige un solo eje de contraste y mantén cercano el resto.
- Clasificación: una serif con una sans serif. El contraste más fiable. Serif frente a sans serif explica qué aporta cada una.
- Peso: un corte display grueso con un corte de texto normal, incluso de la misma familia.
- Ancho: una fuente de titulares condensada con un cuerpo de ancho normal.
- Coincidir en proporciones: alturas de x parecidas, la altura de las letras minúsculas, hacen que las dos se asienten con comodidad en una misma línea.
- Coincidir en ambiente: una serif cálida y suave combina con una sans humanista y cálida; una sans geométrica y afilada combina con una serif nítida y de alto contraste.
Una familia o dos
La combinación más sencilla es no combinar: una familia en dos o tres pesos. Es coherente por diseño y difícil de equivocar. Las superfamilias van un paso más allá, con una serif y una sans dibujadas juntas para compartir proporciones, de modo que tienes el contraste de dos clasificaciones con la armonía de un solo diseño.
Una familia
- Contraste solo por peso y tamaño
- Armonía garantizada
- Una voz más tranquila y uniforme
- Ejemplo: titulares en Archivo Black, cuerpo en Archivo
Dos familias
- Contraste por clasificación o carácter
- Exige proporciones y ambiente a juego
- Más expresiva, con más personalidad
- Ejemplo: titulares en Fraunces, cuerpo en Inter
Combinaciones probadas de Google Fonts
Estas parejas usan tipografías gratuitas en Google Fonts y muy usadas, lo que las hace fáciles de probar. Tómalas como puntos de partida: compón tus propias palabras con ellas y juzga el resultado.
| Titular | Cuerpo | Contraste | Sensación |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Serif de alto contraste con una sans limpia | Editorial, clásica |
| Fraunces | Inter | Serif suave y con carácter con una sans neutra | Cálida, contemporánea |
| DM Serif Display | DM Sans | Serif display con su sans compañera | Amable, pulida |
| Instrument Serif | Inter | Serif condensada con una sans neutra | Moda, editorial |
| IBM Plex Serif | IBM Plex Sans | La serif y la sans de una superfamilia | Precisa, técnica |
| Space Grotesk | Inter | Grotesca peculiar con una sencilla | Tecnología, producto |
| Archivo Black | Archivo | Peso dentro de una misma familia | Audaz, directa |
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
h1, h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
line-height: 1.1;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.55;
}
</style>Combinaciones que conviene evitar
Evita
- Dos sans serif neutras que se diferencian apenas
- Dos fuentes display compitiendo por la atención
- Una tercera y una cuarta fuente por variedad
- Fuentes con alturas de x muy distintas en una misma línea
En su lugar
- Una sans en dos pesos, o una serif con ella
- Una fuente display y una de texto tranquila
- Dos fuentes, con pesos y tamaños para dar variedad
- Fuentes con proporciones parecidas
Las fuentes display son las más tentadoras de abusar. Están hechas para tamaños grandes y líneas cortas; el texto de cuerpo compuesto con una cansa la vista enseguida. Fuentes display cubre dónde lucen.
Cómo probar una combinación de fuentes en diez minutos
- 1
Usa palabras reales
Compón un titular de verdad y un párrafo real de tu trabajo, no texto de relleno.
- 2
Ponlas en tamaños reales
El titular grande, el cuerpo en tamaño de lectura, en el formato que vayas a usar de verdad.
- 3
Mira la textura
Aléjate. El cuerpo debe verse como un gris uniforme; el titular debe destacar claramente de él.
- 4
Pruébalo en un móvil
Muchas combinaciones que lucen elegantes en un monitor se desmoronan al tamaño de un móvil. Fuentes para redes sociales cubre lo que aguanta.
- 5
Revisa los detalles
Números, puntuación, cursivas y todos los idiomas en que publiques.
Una vez elegidas, déjalo por escrito con pesos y tamaños para que todos las usen igual; fuentes de marca cubre las licencias y los idiomas, y fundamentos de tipografía cubre la escala. En Gradiently, las fuentes viven en tu kit de marca y se aplican a cada diseño nuevo.
Preguntas frecuentes
¿Qué es combinar fuentes?
Combinar fuentes es elegir dos tipografías, normalmente una para titulares y otra para el texto de cuerpo, que contrasten con claridad de una forma y coincidan en proporciones y ambiente.
¿Cuántas fuentes debo usar?
Dos bastan para casi todo. Una tercera debe tener un trabajo acotado, como el código o las etiquetas pequeñas.
¿Está bien usar una sola fuente?
Sí. Una familia en dos o tres pesos es la combinación más segura que hay, y muchas marcas fuertes usan justo eso.
¿Cuál es una buena combinación de Google Fonts?
Puntos de partida fiables son Fraunces con Inter, Playfair Display con Source Sans 3 e IBM Plex Serif con IBM Plex Sans.
¿Por qué mis dos fuentes se ven mal juntas?
Normalmente son demasiado parecidas, así que la diferencia parece un error, o difieren en todo a la vez. Mantén un único contraste claro e iguala las proporciones.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
