CodeKitHub¿Qué es esta herramienta?
La combinación de fuentes consiste en elegir dos (a veces tres) tipografías para usarlas juntas en una página, normalmente una para los títulos y otra para el cuerpo del texto, de modo que la página tenga jerarquía visual sin verse desajustada ni monótona.
Cada combinación que aparece a continuación muestra una muestra renderizada en vivo: la fuente del título arriba y la del cuerpo debajo, usando los archivos reales de Google Fonts, así que lo que ves es exactamente lo que obtendrás en tu sitio.
Cada combinación incluye una etiqueta de inserción `<link>` de Google Fonts lista para usar y un fragmento de CSS a juego con las declaraciones `font-family` para títulos y cuerpo de texto: copia ambos y listo.
¿Por qué utilizarlo?
- 28 combinaciones seleccionadas a mano, no una lista generada automáticamente: cada una se eligió porque las dos tipografías realmente se complementan.
- Vista previa en vivo: cada combinación se renderiza con las fuentes reales cargadas desde Google Fonts, no con una imagen estática ni una suposición del nombre de la fuente.
- Filtra por estilo — Moderno, Elegante, Audaz, Minimalista, Clásico — para acotar la búsqueda al carácter que necesita tu proyecto.
- Copia con un clic tanto la etiqueta de inserción `<link>` como las reglas CSS de `font-family`.
- Gratis, funciona en tu navegador, sin necesidad de cuenta ni inicio de sesión.
Cómo utilizarlo
- Opcionalmente, haz clic en un filtro de estilo (Moderno, Elegante, Audaz, Minimalista, Clásico) para acotar la lista, o deja seleccionado "Todos" para explorarlas todas.
- Revisa las tarjetas de vista previa en vivo: la línea superior muestra la fuente del título, la de abajo muestra la fuente del cuerpo.
- Abre la combinación que te guste y haz clic para desplegar la sección de código de inserción.
- Copia la etiqueta `<link>` en el `<head>` de tu HTML, y copia el fragmento CSS en tu hoja de estilos para aplicar las fuentes a tus títulos y cuerpo de texto.
Ejemplo
Entrada
Blog eleganteResultado
Playfair Display (títulos) + Source Sans Pro (cuerpo)Filtrar por "Elegante" muestra títulos serif de alto contraste combinados con un cuerpo sans-serif limpio y muy legible, una combinación habitual en diseños editoriales y de blog.
Principios de una buena combinación de fuentes
- Contraste antes que similitud: dos fuentes que se ven casi idénticas (por ejemplo, dos sans-serif geométricas parecidas) suelen parecer un error más que una elección deliberada. Combina una serif con una sans-serif, o una fuente de display pesada con una de texto más ligera, para que la diferencia se perciba como intencionada.
- Iguala la altura de x y las proporciones: las fuentes cuyas minúsculas tienen una altura visual similar suelen sentirse como si pertenecieran a la misma página, aunque sus estilos difieran; una altura de x desajustada es una de las razones más comunes por las que una combinación "no cuadra".
- Limítate a dos familias (a veces tres): una para los títulos, otra para el cuerpo del texto, y como mucho una tercera para acentos como botones o etiquetas. Más de eso y la página empieza a parecer improvisada.
- Ten en cuenta el carácter, no solo la forma: una sans redondeada y amigable combinada con una serif formal transmite señales contradictorias, aunque las formas de las letras encajen técnicamente; elige fuentes que coincidan tanto en tono como en estructura.
- Pruébalo a tamaños reales: una combinación que se ve genial en una vista previa grande puede perder contraste al tamaño del cuerpo de texto, o una fuente de display puede volverse ilegible en tamaños pequeños; comprueba siempre ambos extremos.
Elegir una combinación según el caso de uso
Las landing pages y los sitios de marketing suelen beneficiarse de los filtros "Audaz" o "Moderno": una fuente de título fuerte y de alto contraste capta la atención en la parte superior, combinada con una fuente de cuerpo limpia y neutra que facilita la lectura rápida de textos largos.
Los blogs y el contenido editorial suelen quedar mejor con combinaciones "Elegante" o "Clásico": un título serif refinado transmite una voz cuidada y editada, mientras que un cuerpo serif o sans-serif cómodo mantiene los artículos largos legibles durante sesiones de lectura prolongadas.
Los sitios de comercio electrónico y de productos suelen favorecer combinaciones "Minimalista": fuentes neutras y contenidas mantienen el foco en las fotos de producto y los precios en lugar de en la tipografía misma, algo importante cuando aparecen decenas de tarjetas de producto en una sola página.
Los portafolios y sitios creativos tienen el mayor margen para experimentar: las combinaciones "Audaz" o "Elegante" con más personalidad suelen funcionar bien, ya que el público visita el sitio en parte para valorar el gusto visual.
Notas sobre rendimiento y licencias
La etiqueta `<link>` de inserción carga las fuentes desde el CDN de Google, que es rápido y ya está cacheado en muchos sitios que tus visitantes probablemente hayan visitado antes, pero sí añade una petición externa. Para sitios en los que cada milisegundo cuenta, descargar los archivos de fuente y alojarlos tú mismo (con `font-display: swap` configurado manualmente) elimina esa dependencia externa a costa de algo más de trabajo de configuración.
Todas las fuentes de Google Fonts son de código abierto y de uso comercial gratuito sin necesidad de atribución, aunque acreditar al diseñador tipográfico es un buen gesto cuando resulta sencillo hacerlo.
Preguntas frecuentes
¿Qué hace que dos fuentes "combinen bien"?
Las buenas combinaciones equilibran contraste y armonía. El contraste — combinar una serif con una sans-serif, o una fuente de display en negrita con una fuente de cuerpo sencilla — crea jerarquía visual para que los títulos y el cuerpo se distingan con claridad. La armonía — una altura de x similar, un grosor de trazo comparable y un mismo grado de formalidad o desenfado — evita que ambas choquen entre sí. Las combinaciones de aquí se seleccionaron teniendo en cuenta ambos aspectos.
¿Los títulos y el cuerpo siempre deben usar fuentes distintas?
No. Usar una sola familia tipográfica en ambos (como la combinación "Rubik + Rubik" de esta herramienta) también funciona bien, siempre que la fuente tenga suficiente variación de peso para distinguir los títulos del cuerpo. Es una elección válida y minimalista, no un error.
¿Cómo aplico realmente una combinación a mi sitio?
Copia la etiqueta de inserción `<link>` en el `<head>` de tu página para cargar las fuentes desde el CDN de Google, y luego copia el fragmento CSS en tu hoja de estilos: define el `font-family` para los títulos (h1, h2, h3) y para el cuerpo del texto (body, p). Ajusta los selectores CSS si tu marcado es diferente.
¿Cargar Google Fonts ralentizará mi sitio?
Cada archivo de fuente adicional añade una petición de red y cierto riesgo de bloquear el renderizado. Limítate a un peso para el título y uno o dos para el cuerpo, usa `display=swap` (ya incluido en el código de inserción) para que el texto se muestre con una fuente de reserva mientras carga la webfont, y considera alojar tú mismo los archivos de fuente en sitios de producción que necesiten la carga más rápida posible.
¿Estas fuentes se pueden usar comercialmente de forma gratuita?
Sí. Todas las fuentes de Google Fonts, incluidas todas las combinaciones que aparecen aquí, tienen licencia SIL Open Font License o Apache License; ambas permiten el uso comercial gratuito, la modificación y la redistribución sin pagar regalías.