← Todas las herramientas
/ Font Pairing Tool
🔤
Herramienta de emparejamiento de fuentes de Google
Descubra combinaciones perfectas de fuentes de Google para su sitio web, aplicación o marca. Obtenga una vista previa de combinaciones de fuentes seleccionadas con texto personalizado. Copie la etiqueta del enlace CSS al instante.
Código de importación CSS
Cómo elegir la combinación de fuentes perfecta
Una gran tipografía es la base de un diseño memorable. El derecho emparejamiento de fuentes crea una jerarquía visual, establece la personalidad de la marca y hace que el contenido sea más fácil de leer. Esta herramienta proporciona combinaciones seleccionadas por expertos de Fuentes de Google - todo gratuito y de código abierto.
Principios de emparejamiento de fuentes
Contraste y complemento — Combina un título serif con un cuerpo sans-serif. El contraste crea interés visual manteniendo la legibilidad.
Proporciones consistentes — Elija fuentes con alturas x similares para lograr armonía visual. Las proporciones no coincidentes resultan discordantes.
Jerarquía primero — La fuente del título debe llamar la atención. La fuente del cuerpo debería desaparecer, legible sin que nadie se dé cuenta.
Límite a dos fuentes — Dos fuentes bien elegidas casi siempre son mejores que tres o más. Utilice el tamaño, el peso y el color para variar.
Preguntas frecuentes
Sí, todas las fuentes de Google Fonts se publican bajo licencias de código abierto (principalmente la licencia SIL Open Font o la licencia Apache). Puede utilizarlos libremente para sitios web comerciales, aplicaciones, materiales impresos y logotipos sin atribución.
Dos métodos: (1) Agregar un
<link> etiqueta en tu HTML <head>. (2) Uso @import en su archivo CSS. Ambos se generan al hacer clic en un par: copie el código de importación CSS del panel debajo de la cuadrícula.Levemente. Para minimizar el impacto en el rendimiento: utilice font-display: swap, preconéctese a fonts.googleapis.com, cargue solo los pesos que necesite y considere la posibilidad de alojar fuentes críticas por sí mismo. La CDN de Google Fonts se almacena en caché global, por lo que las visitas repetidas se cargan instantáneamente.
Para texto de cuerpo largo: Inter, Open Sans, Source Sans 3 y Lato son excelentes opciones. Con un tamaño de fuente de 14 a 18 píxeles y una altura de línea de 1,5 a 1,7, estas fuentes maximizan la legibilidad en todos los tamaños de pantalla.