# Combinaciones de Google Fonts: 25 parejas que funcionan [Canonical HTML page](https://gradiently.design/es/guide/google-fonts-pairings) Todas las parejas son gratuitas en Google Fonts y se han elegido por cómo se comportan en titulares y texto reales. Agrupadas por la sensación que buscas, con los pesos que hacen funcionar cada una. ## The short version - 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. 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](https://gradiently.design/es/guide/font-pairing) explica por qué gana el contraste a la semejanza, y [serif frente a sans serif](https://gradiently.design/es/guide/serif-vs-sans-serif) cuenta lo que aporta cada familia. Una publicación vertical de estilo editorial con un gran titular de exhibición sobre un texto de apoyo más pequeño y sereno 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. | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Revistas, restaurantes, bodas | | 2 | Fraunces 600 | Inter 400 | Gastronomía, marcas artesanales, newsletters | | 3 | DM Serif Display 400 | DM Sans 400 | Agencias, portfolios, landing pages | | 4 | Instrument Serif 400 | Instrument Sans 400 | Editorial moderna, estudios, moda | | 5 | Cormorant Garamond 600 | Work Sans 400 | Belleza, interiorismo, hoteles boutique | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Edición, derecho, lecturas largas y meditadas | Fraunces tiene un eje de tamaño óptico: a tamaños grandes sus detalles se afinan. Cormorant Garamond es delicada en pantalla, así que resérvala para titulares. ## 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. | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Herramientas para desarrolladores, fintech, paneles | | 8 | Syne 700 | Manrope 400 | Estudios creativos, eventos, música | | 9 | Sora 600 | Figtree 400 | Apps, webs SaaS, onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Marcas futuristas, videojuegos, lanzamientos | | 11 | Archivo Black 400 | Archivo 400 | Páginas de producto atrevidas, deporte, retail | Unbounded y Syne son anchas y potentes: mantén los titulares cortos. Archivo se combina consigo misma porque su peso black es un animal distinto de su regular. ## 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. | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blogs, coaching, webs personales | | 13 | Montserrat 700 | Merriweather 400 | Guías, ONG, informes | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Ensayos, medios independientes | | 15 | Outfit 600 | Source Serif 4 400 | Documentación, material de cursos | ## Combinaciones amables y redondeadas | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Marcas infantiles, juguetes, cafeterías familiares | | 17 | Quicksand 700 | Mulish 400 | Bienestar, mascotas, servicios amables | | 18 | Rubik 600 | Karla 400 | Apps comunitarias, servicios locales, entidades benéficas | Las tipografías redondeadas resultan cercanas, pero suaves. Quicksand se ve ligera por debajo de 600; usa sus pesos más gruesos para todo lo que deba leerse. ## 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](https://gradiently.design/es/guide/typography-for-thumbnails) y [fuentes para titulares](https://gradiently.design/es/guide/headline-fonts) profundizan más. | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniaturas, deporte, publicaciones de estilo noticia | | 20 | Bebas Neue 400 | Montserrat 400 | Gimnasios, eventos, cartas atrevidas | | 21 | Oswald 600 | Lato 400 | Carteles, campañas, rebajas | | 22 | Abril Fatface 400 | Poppins 400 | Publicaciones de moda, bebidas, vida nocturna | ## Combinaciones técnicas y de lujo | # | Titular | Cuerpo | Va bien para | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Documentación para desarrolladores, datos, investigación | | 24 | Space Grotesk 500 | Space Mono 400 | Software indie, fanzines, portfolios | | 25 | Bodoni Moda 500 | Jost 400 | Joyería, perfume, retail de alta gama | En la 24 la monoespaciada es el cuerpo: sirve para notas cortas y etiquetas, no para ensayos. Los trazos finísimos de Bodoni Moda lucen mejor en grande, por encima de unos 32 px. ## 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. ```html ``` La combinación 2, Fraunces con Inter, cargando solo tres pesos. Cambia los nombres de familia por los de cualquier pareja de arriba. Google Fonts es gratuito para uso comercial, pero lee [licencias de fuentes](https://gradiently.design/es/guide/font-licensing) 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](https://gradiently.design/es/guide/brand-typography-system) 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](https://gradiently.design/es/guide/custom-fonts-upload), y el Designer las usa al componer un diseño. ## FAQ ### ¿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.