# Combinar fuentes: reglas sencillas que funcionan
[Canonical HTML page](https://gradiently.design/es/guide/font-pairing)
Dos tipografías que lucen bien por separado pueden pelearse al compartir una página. Unas pocas reglas y un puñado de parejas probadas quitan las conjeturas.
## The short version
- 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.
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 tipográficos. Dos fuentes pueden cubrir los cuatro; la del cuerpo suele encargarse también de las etiquetas.
Una publicación editorial con un titular grande, una etiqueta pequeña y una línea de apoyo con un estilo más discreto
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](https://gradiently.design/es/guide/serif-vs-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](https://fonts.google.com/) 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 |
Siete parejas de Google Fonts. Cada una contrasta con claridad de una forma y coincide en proporción.
```html
```
Cargar y aplicar una pareja: Fraunces para los títulos, Inter para el cuerpo, cada una con una alternativa sensata. Solo se piden los pesos que usas.
## 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](https://gradiently.design/es/guide/display-fonts) 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](https://gradiently.design/es/guide/fonts-for-social-media) 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](https://gradiently.design/es/guide/brand-fonts) cubre las licencias y los idiomas, y [fundamentos de tipografía](https://gradiently.design/es/guide/typography-basics) cubre la escala. En Gradiently, las fuentes viven en tu kit de marca y se aplican a cada diseño nuevo.
## FAQ
### ¿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.