La versión corta
- Una buena combinación de Google Fonts da al titular y al cuerpo trabajos claramente distintos, normalmente contrastando una fuente de exhibición o serif con una sans sencilla.
- Las parejas de la misma superfamilia, como DM Serif Display con DM Sans o IBM Plex Sans con IBM Plex Mono, son el lugar más seguro por donde empezar.
- El texto de cuerpo necesita una fuente con buena altura de x y formas abiertas en peso regular 400; los titulares pueden llevar más personalidad.
- Las fuentes de Google Fonts se publican con licencias abiertas que permiten el uso comercial, también en logotipos, productos y trabajos para clientes.
- Carga solo los pesos que uses y añade display=swap para que las páginas sean rápidas.
En esta página
Las mejores combinaciones de Google Fonts contrastan un titular con carácter con un cuerpo discreto y legible: Fraunces con Inter, Playfair Display con Source Sans 3, Space Grotesk con Inter o DM Serif Display con DM Sans. Debajo tienes 25 combinaciones agrupadas por estilo, cada una con los pesos que la hacen funcionar y para qué sirve. Todas son gratuitas, todas permiten el uso comercial y todas se cargan con una línea de código. Elige primero un grupo por la sensación y luego una pareja por su función.
Cómo leer estas combinaciones
Cada pareja va con el titular primero y el cuerpo después. El peso del titular es el que se usa en tamaños grandes; el texto de cuerpo se queda en 400, con 600 o 700 para destacar. Si el razonamiento es nuevo para ti, combinar fuentes explica por qué gana el contraste a la semejanza, y serif frente a sans serif cuenta lo que aporta cada familia.
Una combinación da a la página dos voces. El titular atrae; el cuerpo explica. Nunca deben competir.
Combinaciones editoriales: titulares serif con cuerpo sans
La estructura clásica. Un titular serif aporta calidez y autoridad; un cuerpo sans mantiene fácil la lectura larga en pantalla.
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Combinaciones sans modernas para tecnología y producto
Para software, startups y todo lo que deba sentirse actual. El titular lleva el carácter mediante la forma, la anchura o detalles peculiares, mientras que el cuerpo es un caballo de batalla.
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Titulares sans con cuerpo serif
La estructura inversa va bien con la lectura larga: un titular sans limpio señala las secciones y un cuerpo serif suena libresco y frena el ojo de forma agradable.
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Combinaciones amables y redondeadas
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Combinaciones de exhibición atrevidas para carteles y redes
Las fuentes de exhibición condensadas y gruesas meten palabras grandes en marcos pequeños, por eso dominan las miniaturas y los carteles. Necesitan una pareja serena. Texto en miniaturas y fuentes para titulares profundizan más.
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Combinaciones técnicas y de lujo
Cuerpo
Va bien para
Cuerpo
Va bien para
Cuerpo
Va bien para
Errores que rompen una combinación
Evita
- Dos sans serif parecidas, que parecen un error
- Dos fuentes de exhibición que se disputan la atención
- Una serif de trazo finísimo para el texto de cuerpo en pantalla
- Cargar todos los pesos de las dos familias
- Una tercera fuente para un titular especial
Haz
- Un contraste claro de estructura, peso o anchura
- Una fuente potente y otra discreta
- Cuerpo en 400 con una fuente de buena altura de x
- Solo los dos a cuatro pesos que uses
- Usa el peso o el tamaño de tus dos fuentes en su lugar
Cómo añadir una combinación de Google Fonts a tu web
- 1
Elige los pesos
Normalmente un peso para el titular y dos para el cuerpo. Cada peso extra es otro archivo que descargar.
- 2
Copia el código de inserción
Selecciona las familias en Google Fonts y copia el enlace que te da, o adapta el código de abajo.
- 3
Define los roles en CSS
Da a titulares y cuerpo sus propias variables de familia tipográfica, para que un cambio posterior sea de una sola línea.
- 4
Prueba con texto real
Revisa un párrafo largo, un titular de dos líneas y el nombre de producto más largo antes de comprometerte.
<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:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
</style>Google Fonts es gratuito para uso comercial, pero lee licencias de fuentes antes de modificar una o de venderla como parte de un producto. Para que la elección se mantenga en toda una marca, conviértela en un sistema tipográfico con roles con nombre.
Para publicaciones sociales y presentaciones, define tu pareja una sola vez en un kit de marca de Gradiently (parte de Pro), que guarda una fuente de titular y una de cuerpo y admite archivos de fuente subidos, y el Designer las usa al componer un diseño.
Preguntas frecuentes
¿Cuáles son las mejores combinaciones de Google Fonts?
Puntos de partida fiables son Fraunces con Inter, Playfair Display con Source Sans 3, DM Serif Display con DM Sans y Space Grotesk con Inter.
¿Qué fuente va bien con Montserrat?
Merriweather para el cuerpo da un contraste clásico de sans y serif. Bebas Neue funciona sobre Montserrat como titular de cartel atrevido.
¿Con qué combina bien Playfair Display?
Con una sans sencilla y abierta para el cuerpo, como Source Sans 3, Lato o Inter. Evita combinarla con otra serif de alto contraste.
¿Son gratuitas las Google Fonts para uso comercial?
Sí. Las fuentes de Google Fonts usan licencias abiertas, sobre todo la SIL Open Font License, que permiten el uso comercial, también en logotipos, webs, impresión y trabajos para clientes. Lee la licencia en la página de cada fuente si piensas modificar o redistribuir los archivos.
¿Cuántas fuentes debe usar un sitio web?
Dos son más que suficientes en la mayoría de los sitios: una para los titulares y otra para el cuerpo, solo en los pesos que necesites.
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