Combinaciones de Fuentes — Parejas de Google Fonts seleccionadas, vista previa y CSS
Filtrar por estilo
Parejas de fuentes curadas(28)
Copiar CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }Fuente personalizada (opcional)
Cambia la fuente del título o del cuerpo de la lista.
Herramientas externas relacionadas
Algunos enlaces son enlaces de afiliados.
Herramientas relacionadas
Cómo usar
- Elige una etiqueta de estilo para filtrar las parejas, o navega directamente por la lista completa.
- Haz clic en una pareja para ver la vista previa en vivo con las fuentes reales.
- Edita el texto de la vista previa para probar tu propio contenido. Borrarlo restaura el texto de muestra.
- Usa «Aleatorio» para descubrir una pareja nueva o «Intercambiar» para cambiar título y cuerpo.
- Guarda las parejas favoritas con la estrella — solo en tu navegador, sin enviar datos.
- Cuando encuentres la combinación, haz clic en «Copiar CSS» para obtener el import de Google Fonts y las declaraciones font-family. Sin registro.
¿Qué es la combinación de fuentes?
Combinar fuentes significa elegir dos tipografías complementarias, una para los títulos y otra para el cuerpo. La combinación adecuada crea jerarquía visual, mejora la legibilidad y da personalidad consistente al diseño. Lo más frecuente es usar demasiadas fuentes, lo que hace el diseño caótico. Limitarse a dos — una expresiva y una neutral — es la regla de oro.
Asigna un rol a cada fuente
La fuente del título atrae la mirada y expresa carácter. La del cuerpo sostiene la lectura larga sin fatiga. Como tienen propósitos distintos, pueden (y a menudo deberían) ser de familias tipográficas diferentes.
Añade contraste
Combinar serif con sans-serif es el enfoque clásico — el contraste estructural hace que el diseño parezca más cuidado. Evita combinar dos fuentes muy similares; la diferencia debe ser evidente a primera vista.
Limítate a dos
Dos fuentes suelen ser suficientes. Si tienes dudas, elige una fuente expresiva para los títulos y una neutral y legible para el cuerpo.
Las etiquetas de estilo explicadas
Cada pareja tiene de una a tres etiquetas de estilo para filtrar por sensación. Puedes combinarlas (lógica OR) u omitir el filtro y explorar con «Aleatorio».
Moderno / Minimalista / Limpio
Diseños contemporáneos y depurados. Ideal para SaaS, portafolios y proyectos tecnológicos.
Elegante / Clásico / Editorial
Refinado y atemporal. Para identidades de marca, revistas, blogs y productos de lujo.
Amigable / Juguetón
Cálido y cercano. Para sitios personales, educación, apps de consumo y marcas acogedoras.
Tecnológico / Atrevido
Fuerte y vanguardista. Para herramientas de desarrollo, documentación técnica y startups.
Funcionalidades
Diccionario de parejas curadas
Más de 20 combinaciones título × cuerpo seleccionadas a mano, cada una con etiquetas y descripción. No es un generador aleatorio — cada pareja está elegida porque funciona.
Vista previa en vivo con texto editable
Ve el título y el cuerpo renderizados en las fuentes reales. Edita el texto de muestra para ver tu propio contenido.
Aleatorio e intercambio
Aleatorio encuentra una pareja al azar dentro del filtro actual. Intercambio voltea las fuentes de título y cuerpo para comparar.
Favoritos
Marca parejas con estrella para guardarlas. Solo se almacenan en tu navegador, nada se envía a un servidor.
Copia CSS con un clic
Obtén el @import o <link> de Google Fonts más las declaraciones CSS, listos para pegar en tu proyecto. También disponible en variables CSS o configuración de Tailwind.
Casos de uso
Títulos y texto del cuerpo de un sitio web
Filtra por estilo para encontrar una pareja que encaje con tu marca, luego copia el CSS y pégalo en tu hoja de estilos.
Presentaciones y diapositivas
Incluso sin CSS, la herramienta te muestra qué fuentes funcionan juntas. Luego instálalas en Figma, PowerPoint o Keynote.
Pegar directamente en CSS o Tailwind
El fragmento generado incluye el import de Google Fonts y las declaraciones font-family. El formato Tailwind te da un bloque fontFamily listo para usar.
Nota sobre la visualización en japonés, chino y coreano
La mayoría de las parejas usan fuentes de Google Fonts solo con caracteres latinos. Así es como la herramienta gestiona el texto CJK:
- Cambia al modo de muestra en latín para ver las fuentes como están diseñadas.
- En modo de muestra en tu idioma, la vista previa usa las fuentes del sistema y se muestra una nota explicando que la fuente latina no incluye caracteres CJK.
- Hay parejas específicas para CJK (con fuentes del sistema) disponibles en la lista.
- Esta herramienta es más útil para elegir fuentes en sitios con escritura latina.
Fuentes y privacidad
- Las fuentes de la vista previa se sirven desde este sitio. Tu navegador no se conecta a fonts.googleapis.com para la vista previa.
- El texto de muestra y los favoritos guardados permanecen en tu navegador (localStorage). Nada se sube a un servidor.
- El fragmento CSS que copias contiene una URL de Google Fonts estándar para tu propio sitio — no la ejecuta esta página.
- Todas las fuentes son de código abierto (SIL OFL 1.1), libres para uso comercial. Verifica los términos en Google Fonts antes de usarlas.
Preguntas frecuentes
¿Cómo elijo una buena combinación de fuentes?
Empieza con el contraste: combina serif con sans-serif, o una fuente display con una neutra para el cuerpo. Limítate a dos tipografías. Usa las etiquetas de estilo para filtrar por la sensación que buscas.
¿Las fuentes son gratuitas para uso comercial?
Todas las fuentes están bajo la SIL Open Font License (OFL 1.1), que permite el uso comercial y la incrustación web. Consulta siempre la página de cada fuente en Google Fonts antes de usarla en un proyecto de cliente.
¿Puedo pegar el CSS directamente en mi proyecto?
Sí. El fragmento CSS incluye el @import (o <link>) de Google Fonts y las declaraciones font-family para h1–h3 y body. Pégalo en tu hoja de estilos. El formato Tailwind te da un bloque fontFamily para tu archivo de configuración.
¿Se envía mi texto o datos a algún lugar?
No. Todo se procesa en tu navegador. El texto de muestra, los favoritos y las selecciones de fuentes nunca se suben. Las fuentes de vista previa se sirven desde este dominio, sin contactar los servidores de Google.
¿Funciona para texto en japonés, chino o coreano?
La mayoría de las parejas usan fuentes solo con caracteres latinos. Cambia al modo de muestra en latín para verlas correctamente. También hay parejas específicas para CJK con fuentes del sistema.
¿Puedo personalizar la fuente del título o del cuerpo?
Sí. Abre la sección «Fuente personalizada» para elegir cualquier fuente de la biblioteca para el título o el cuerpo. La vista previa y el CSS se actualizan al instante.
¿Dónde se guardan mis favoritos?
Los favoritos se guardan solo en el localStorage de tu navegador. No se sincronizan entre dispositivos ni se envían a un servidor.