Cómo usar el generador de pares tipográficos paso a paso
- Escribe tu texto — introduce un titular y un párrafo de ejemplo en los campos de arriba para ver cómo quedan las fuentes con tu contenido real.
- Filtra por estilo o uso — usa los botones de categoría (Serif + Sans, Sans + Sans…) o el selector de mood para encontrar el par que encaja con tu proyecto.
- Ajusta el tamaño — los botones S / M / L cambian el tamaño de previsualización para ver cómo queda en móvil y en desktop.
- Copia el CSS — pulsa "Ver CSS" en el par que más te guste para obtener el código @import y las asignaciones de font-family listas para pegar en tu proyecto.
- Verifica la accesibilidad — una vez elegida la tipografía, comprueba que el contraste entre texto y fondo cumple WCAG AA con el verificador de contraste de colores.
Los 4 tipos de combinaciones tipográficas y cuándo usarlas
No todas las combinaciones tipográficas funcionan igual en todos los proyectos. Conocer qué tipo de par elegir según el contexto te ahorra mucho tiempo de prueba y error:
Serif + Sans — La combinación más versátil
Usar una serif para titulares y una sans-serif para el cuerpo es la combinación más usada y probada en diseño web. El contraste entre los remates decorativos de la serif y la limpieza de la sans crea una jerarquía visual inmediata. Funciona bien en casi cualquier contexto: blogs, webs corporativas, portfolios y landing pages. Pares como Merriweather + Open Sans o Playfair Display + Source Sans son consistentemente populares.
Sans + Sans — Para proyectos modernos y digitales
Combinar dos sans-serif requiere más cuidado que serif + sans porque el contraste se basa en diferencias de peso, proporción y personalidad — no en la presencia o ausencia de remates. La regla es que las dos sans tengan personalidades claramente distintas: una geométrica (Poppins, Outfit) con una humanista (Nunito, DM Sans) crea contraste aunque ambas sean sans. Este tipo de combinación domina en productos digitales, SaaS y apps móviles.
Display + Sans — Para máximo impacto visual
Las fuentes display están diseñadas para titulares grandes — tienen rasgos exagerados, alto contraste de trazo o formas inusuales que pierden legibilidad en tamaños pequeños. Combinarlas con una sans-serif neutra para el cuerpo permite usar toda su expresividad en los titulares sin sacrificar la legibilidad del texto corrido. Si buscas que tu web tenga una identidad visual fuerte y memorable, este tipo de par es el más efectivo. Para explorar estas opciones visita la sección completa de herramientas de diseño.
Mono + Sans — Para proyectos técnicos y developer
Las fuentes monoespaciadas (donde todos los caracteres tienen el mismo ancho) transmiten inmediatamente un registro técnico y digital. Usarlas en titulares da un look de código y tecnología sin necesidad de otros elementos visuales. Combinadas con una sans-serif limpia para el cuerpo, crean una identidad reconocible en webs de desarrollo, documentación técnica y portfolios de programadores.
📚 Referencia: Google Fonts Knowledge · Fontpair.co · TypewolfCómo cargar Google Fonts en tu proyecto sin penalizar la velocidad
Cargar Google Fonts de forma incorrecta es uno de los errores más comunes que penaliza el LCP en Google PageSpeed. La forma correcta de cargarlas es con preconnect y el parámetro display=swap:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="..."></noscript>
El preconnect establece la conexión con los servidores de Google antes de que se necesite la fuente, reduciendo la latencia DNS. El preload con onload carga la fuente de forma no bloqueante — la página renderiza inmediatamente con la fuente del sistema y reemplaza cuando llega Google Fonts. El parámetro display=swap activa este comportamiento también a nivel de CSS. Si usas WordPress, el plugin OMGF automatiza todo este proceso descargando las fuentes a tu propio servidor.
Preguntas frecuentes sobre combinaciones tipográficas
Las combinaciones que mejor funcionan para web son las que crean contraste visual claro entre el titular y el cuerpo: una serif expresiva con una sans-serif neutra, o una display con alto impacto junto a un cuerpo limpio y legible. Pares como Playfair Display + Source Sans, Merriweather + Open Sans o Poppins + Nunito son consistentemente populares porque cada fuente cumple un rol claro sin competir con la otra. La regla más fiable es que las dos tipografías tengan personalidades distintas pero proporciones compatibles. Verifica siempre la legibilidad en pantalla pequeña antes de decidir.
La regla fundamental es contraste con armonía. Combina fuentes de categorías distintas — serif con sans-serif, display con texto corrido — y asegúrate de que una sea claramente dominante (el titular) y la otra subordinada (el cuerpo). Evita combinar dos fuentes del mismo estilo y peso similar: produce confusión visual, no contraste. Limita el diseño a 2 tipografías principales más una monoespacio si necesitas mostrar código. Si dudas, usa fuentes de la misma familia tipográfica extendida — como DM Serif Display con DM Sans — porque fueron diseñadas para usarse juntas. Verifica coherencia en fonts.google.com.
Las fuentes serif tienen pequeños remates decorativos al final de los trazos — como Times New Roman o Merriweather. Las sans-serif no los tienen y tienen trazos más uniformes — como Arial, Roboto o Inter. Históricamente se decía que las serif eran más legibles en papel impreso y las sans-serif en pantalla, pero estudios recientes demuestran que la diferencia es mínima a tamaños normales. La elección hoy es más de personalidad que de legibilidad: las serif transmiten autoridad, tradición y elegancia; las sans-serif transmiten modernidad, neutralidad y simplicidad. Verifica la investigación tipográfica en fonts.google.com/knowledge.
La regla profesional es un máximo de 2-3 tipografías en un mismo proyecto: una para títulos, una para cuerpo de texto y opcionalmente una tercera para acentos o código. Usar más de 3 sin un sistema claro genera ruido visual y hace que el diseño parezca amateur. Una sola tipografía bien elegida con variaciones de peso y tamaño puede ser suficiente para proyectos minimalistas — fuentes como Inter, Roboto o Poppins tienen suficiente variedad de pesos para funcionar solas. Verifica siempre que cada tipografía cumple un rol diferente y no se solapa con otra. Fuente: google.com/fonts/knowledge.
El método más eficiente es importar solo los pesos que vas a usar en la URL de Google Fonts. Por ejemplo: @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap"). Después asigna cada fuente en tu CSS: h1, h2, h3 { font-family: "Playfair Display", serif; } y body, p { font-family: "Source Sans 3", sans-serif; }. El parámetro display=swap es obligatorio para evitar que la fuente bloquee el renderizado de la página y mejore el Core Web Vitals LCP. Evita importar pesos que no uses — cada peso extra añade tiempo de carga. Verifica siempre la documentación en developers.google.com/fonts.
El contraste tipográfico es la diferencia visual percibida entre dos o más tipografías usadas conjuntamente. Se crea a través del estilo (serif vs sans-serif), el peso (bold vs regular), el tamaño (36px de titular vs 16px de cuerpo), el ancho (condensed vs extended) o el carácter (geométrica vs humanista). Sin contraste suficiente, el ojo no distingue la jerarquía del contenido y la lectura se vuelve difícil. Con demasiado contraste, el diseño pierde coherencia. El punto óptimo es cuando las fuentes se perciben claramente diferentes pero visualmente compatibles. Verifica principios de tipografía web en fonts.google.com/knowledge.
Google usa Product Sans para su identidad corporativa (logotipo, materiales de marca) y Google Sans para interfaces de sus productos como Gmail, Google Docs y Google Search. Ambas son sans-serif geométricas de trazo uniforme y no están disponibles en Google Fonts para uso externo. Para proyectos propios, Google recomienda Roboto como fuente primaria de Material Design — es la tipografía de Android y de la mayoría de apps de Google. Noto es su familia tipográfica universal, diseñada para soportar todos los sistemas de escritura del mundo sin caracteres en blanco. Verifica en fonts.google.com las familias tipográficas de Google disponibles para uso libre.
La escala tipográfica más usada en diseño web parte de un tamaño base de 16px para el cuerpo de texto — mínimo recomendado para legibilidad en pantalla y para evitar el zoom automático en iOS. Los títulos se calculan con una escala modular: si el cuerpo es 16px, un H3 suele estar en 20px, un H2 en 24-28px y un H1 en 32-48px dependiendo del diseño. La escala perfecta quinta (ratio 1.5) y la escala mayor (ratio 1.25) son las más populares. En móvil, los titulares suelen reducirse un 15-20% respecto al escritorio con clamp() en CSS para escala fluida. Verifica calculadoras de escala tipográfica en typescale.com.