Mejores combinaciones de fuentes de Google para webs (6 pares que funcionan)

Un buen par de fuentes es una fuente para títulos y otra para el texto que se distinguen lo bastante para trabajar en equipo, pero comparten el mismo estilo. Un punto de partida seguro es un título con serifa y un texto sin serifa limpio, como Playfair Display + Source Sans 3. Abajo tienes seis pares de Google Fonts, uno por estilo, y una forma gratis de probarlos en tu web antes de tocar el código.

Qué hace que dos fuentes formen buena pareja

Piensa en un grupo de música. El cantante es tu fuente de títulos y los músicos que lo acompañan son tu fuente de texto, la de los párrafos. Si todos gritan a la vez, nadie entiende la letra. Un buen par tiene una voz que destaca y otra que la apoya. Tres reglas sencillas te llevan casi hasta el final:

• Contraste, no choque. Elige dos fuentes claramente distintas, como una con serifa (letras con pequeños remates en las puntas, como en un libro impreso) junto a una sin serifa (letras sin ellos). Dos fuentes casi iguales solo parecen un error.
• Un solo estilo. Una fuente juguetona y redondeada junto a una rígida y formal manda señales mezcladas. Elige fuentes que se sentirían cómodas en la misma habitación.
• Dos fuentes, no más. Una para títulos y otra para texto. Añade variedad con el tamaño y el grosor (lo finas o gruesas que son las letras), no con una tercera fuente.

Clásico: Playfair Display + Source Sans 3

Playfair Display es una serifa de trazos afilados y mucho contraste que recuerda un poco a la portada de un periódico. Source Sans 3 es una sin serifa tranquila y fácil de leer que no se quiere lucir. Va bien para blogs, revistas, portfolios y todo lo que quiera transmitir confianza.

Elegante: Cormorant Garamond + Montserrat

Cormorant Garamond es una serifa ligera y elegante, de líneas largas y delicadas. Montserrat es una sin serifa ancha y geométrica que le da un suelo moderno donde apoyarse. Piensa en moda, belleza, bodas y restaurantes. Un consejo: Cormorant se vuelve fina cuando es pequeña, así que resérvala para títulos grandes.

Moderno: DM Serif Display + DM Sans

DM Serif Display es una serifa robusta hecha para titulares grandes. DM Sans es una sin serifa limpia y amable con una sensación suave parecida, así que las dos se mezclan bien. Buena opción para startups, agencias y páginas de aterrizaje que quieren verse frescas pero no frías.

Contundente: Oswald + Open Sans

Oswald es alta y estrecha, así que caben muchas palabras en una línea y aun así gritan. Open Sans es ancha, abierta y muy fácil de leer, lo que la equilibra. Útil para noticias, deportes, eventos y cualquier sitio donde el titular tenga que atrapar.

Técnico: Space Grotesk + Inter

Space Grotesk tiene un aire geométrico algo peculiar que dice «nosotros construimos cosas». Inter se diseñó para pantallas y se sigue leyendo bien en tamaños pequeños, así que lleva los párrafos. Encaja de forma natural en software, paneles y herramientas para desarrolladores.

Cercano: Quicksand + Nunito

Quicksand y Nunito tienen los extremos suavemente redondeados, así que parece que se pertenecen. El resultado es cálido y cercano. Va bien para educación, niños, apps, comida y webs de comunidad.

Cómo probar un par de fuentes en tu propia web

Leer sobre un par no es lo mismo que verlo en tus propias páginas, con tus propias palabras. FontMee es una extensión gratis de Chrome, un pequeño complemento que le da al navegador una función nueva, y te deja probar fuentes en una web real, solo en tu pantalla. Incluso trae pares integrados: 32 combinaciones de título y texto elegidas a mano, entre ellas las seis de arriba. El vídeo muestra el panel en acción.

1. Instala FontMee. Añádela desde la Chrome Web Store. Es gratis y no pide cuenta. Pulsa el icono del puzle en Chrome y fíjala, así siempre está a un clic.
2. Abre tu web y pulsa el icono de FontMee. El panel se abre junto a la página. También puedes pulsar Alt + Shift + F. Las páginas propias de Chrome (Nueva pestaña, la Web Store, las de chrome://) no se pueden cambiar.
3. Pulsa el botón Pares de fuentes. Verás una lista de pares, cada uno con sus fuentes reales y una etiqueta de estilo como Clásico, Contundente o Técnico.
4. Pulsa Usar este par. La fuente de títulos y la de texto cambian en la página al instante. Si ya habías elegido una fuente, FontMee primero te sugiere compañeras para ella, bajo Para y el nombre de la fuente.
5. Compara y ajusta. Alterna entre Fuente original y Vista previa de FontMee (o pulsa Alt + Shift + O) y usa Ajustar para el tamaño, el grosor, la altura de línea y el espaciado. Prueba dos o tres pares, porque el que gana en una tarjeta de muestra no siempre gana en tu página. Mantener en el sitio guarda tu elección en cada visita, y Restablecer todo deja la página como estaba.

Cuatro cosas que revisar antes de decidirte

• Usa tus propias palabras. Un par que queda genial con un eslogan corto puede verse distinto con los nombres reales de tus productos o con un párrafo largo.
• Mira el texto pequeño, y en el móvil. El texto de los párrafos se lee mucho más que los títulos, así que tiene que ser cómodo en tamaño pequeño.
• Comprueba las letras que necesitas. Los acentos como ñ, ç o ş, y las letras cirílicas o vietnamitas, no están en todas las fuentes. FontMee tiene un filtro de Escritura que solo muestra las fuentes con las letras que necesitas.
• Revisa la licencia. Google Fonts es de código abierto y gratis para uso comercial, pero otras fuentes pueden no serlo.

¿Es tu propia web? Entonces probar un par es solo la mitad del trabajo. Cuando te guste uno, pulsa Copiar CSS y pega las reglas en la hoja de estilos de tu web, el archivo que controla el aspecto del sitio (en WordPress está en Apariencia, Personalizar, CSS adicional). FontMee también indica la licencia de cada fuente y puede descargar un ZIP con las fuentes para alojarlas tú mismo, así los navegadores de tus visitantes las cargan desde tu propio servidor y no desde Google. Además, una web necesita un lugar donde vivir, y un constructor es la forma más rápida de conseguirlo sin código.

Consigue la extensión

FontMee es gratis, con más de 1.900 fuentes, 32 pares ya preparados, Copiar CSS y la subida de tus propias fuentes. Sin cuenta, sin suscripción. Añádela desde la Chrome Web Store o lee primero la página de FontMee.

Conviene saber antes de empezar

Preguntas frecuentes