10 Awesome Google Font Combinations Trending in 2021

Una lista de fuentes de moda seleccionadas a mano de Google Fonts que combinan bien juntos y cómo instalarlos en su sitio web.

• Artículo de Jason Beever
• Actualizado: 2 de enero de 2020
• Etiquetas: tipografía, diseño web

La tipografía del sitio web solía ser una práctica de diseño más desconcertante de lo que es hoy. El complicado proceso de decorar una página web con fuentes personalizadas requería antaño convertir e incrustar archivos de fuentes que se alojaban en el servidor del usuario, y la elección de fuentes disponibles se limitaba a la propia colección del usuario o a sus conocimientos de tipografía fuera de las fuentes estándar del sistema. Como resultado, la mayoría de los sitios web tenían un aspecto casi idéntico en el formato de su contenido, que se basaba en muchas fuentes seguras para la web, sobreutilizadas y mundanas.

Todo esto cambió en 2010 con el lanzamiento de Google Fonts, un proyecto de código abierto que permite una implementación mucho más fácil de las fuentes personalizadas en los sitios web. La instalación de estas fuentes en tu propio sitio web es, por suerte, un proceso rápido y sencillo, pero debes tener en cuenta que no todas las combinaciones de fuentes de la biblioteca de Google son una receta para el éxito tipográfico. Sin embargo, con los emparejamientos de fuentes y las consideraciones de uso adecuadas, tu marca online puede desprender profesionalidad, belleza y facilidad de lectura sin necesidad de recurrir a costosas fuentes personalizadas. En este artículo, te mostraré cómo lograr todo esto.

Una lista de 10 combinaciones de fuentes de Google que están de moda

¡Vamos a ello! Sin ningún orden en particular, aquí están 10 de las mejores combinaciones de Google Font que son tendencia actualmente:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Aquí hay una combinación fácil que funciona de maravilla para casi cualquier uso aplicable. Open Sans es una de las fuentes, si no la más versátil, de toda la colección de Google Fonts. Es extremadamente fácil de leer en grandes bloques de texto, a la vez que es lo suficientemente llamativa para los titulares.

Simple. Sofisticada. Familiar. No puede equivocarse.

Uso en el mundo real

No puedo prever ningún escenario en el que Open Sans sea una mala elección. A menos que busques específicamente una fuente con serifa, creo que ésta servirá perfectamente para cualquier negocio, blog, página de aterrizaje o aplicación web.

2. Oswald + EB Garamond Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald es una gran fuente para los titulares, sin importar el peso de la fuente o el uso de mayúsculas. Su naturaleza condensada ayuda a captar la atención y a resaltar, pero también hace que el texto sea agradablemente único como fuente del cuerpo principal.

EB Garamond es una elegante actualización de la clásica fuente Garamond. Reconocible al instante y de aspecto intemporal, esta fuente desprende una profesionalidad distintiva en su tipografía.

Uso en el mundo real

Esta combinación funciona bien para los profesionales que tratan con clientela de alto nivel, como abogados, agencias inmobiliarias o incluso boutiques de lujo. La versatilidad de Oswald y el aspecto clásico de EB Garamond son ideales para los textos de descripción de productos en los que es importante destacar un artículo de primera calidad.

3. Montserrat + Merriweather Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat es una de las favoritas de los diseñadores por su versatilidad y sencillez, y Merriweather combina maravillosamente con su estilo contrastado y su fácil legibilidad. Siéntase libre de intercambiarlas como titulares o como texto de párrafo; ambas funcionan muy bien en cualquiera de los dos casos.

Uso en el mundo real

Esta combinación en particular es un buen equilibrio de diseño moderno y clásico. Como tal, su variedad de usos podría servir para muchos tipos de negocios. Personalmente, creo que estas fuentes serían adecuadas para cualquier tipo de fuente de noticias en línea o agencia editorial. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

La familia tipográfica Roboto es una favorita personal y también es una de las que utilizamos aquí en How To Get Online. Extremadamente versátil, con una amplia gama de pesos de fuente, no hay prácticamente ninguna limitación a lo que la fuente podría ser utilizado para. Moderna y geométrica, pero sin dejar de ser amigable y confiable, Roboto es una maravilla de forma y función.

Uso en el mundo real

Aquí hay otra pareja a la que te será difícil encontrarle un mal uso. Mientras que Roboto funciona para casi todo, creo que es particularmente grande para las empresas tecnológicas de nueva creación, las pequeñas empresas modernas, o cualquier tipo de marca con un ojo en el futuro.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

¡Es nuestro amigo Roboto de nuevo! Esta vez, sin embargo, estamos viendo la variante con gracias, Roboto Slab. Se trata de una fuente tan versátil como su prima, pero con un estilo más clásico. Cuando se combina con la distintiva y atrevida Raleway, tenemos una increíble combinación de tipografía limpia y refinada.

Uso en el mundo real

Raleway es una de esas fuentes que grita sofisticación. Cuando se utiliza como un titular todo en mayúsculas, creo que funciona muy bien para los artículos de lujo como la joyería, ropa de diseño, o productos de comercio electrónico similares de lujo. Roboto Slab la apoya bien con un texto descriptivo simple y accesible.

También funcionan indistintamente. Pruebe diferentes variaciones de peso para ambas fuentes en los titulares y en el cuerpo del texto y vea qué combinación capta mejor su marca.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Según su diseñador, Playfair Display se inspiró en las formas de las letras del siglo XVIII durante la transición de las plumas a los bolígrafos con punta de acero. No es de extrañar, pues, que esta fuente desprenda el encanto del viejo mundo pero con un toque moderno.

La fuente Sans Pro se adentra un poco más en el futuro, creando una intrigante combinación que es ornamentada sin dejar de ser utilitaria.

Uso en el mundo real

Playfair Display añade un toque personal a algo como un eslogan o la descripción de un producto. Si tiene la oportunidad de utilizar sus símbolos de ampersand o moneda, verá inmediatamente por qué es la elección perfecta para un producto o servicio centrado en el lujo y las apariencias. Source Sans Pro mantiene el texto en una presentación moderna y limpia.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One puede no ser la más versátil de las fuentes, pero una cosa que hace extremadamente bien es crear titulares que exigen atención. Pequeñas o grandes, en minúsculas o en mayúsculas, esas letras son hipnóticas independientemente de lo que se haga con ellas.

Noto Sans pretende ser una fuente verdaderamente universal en la que, independientemente del idioma, pueda mostrarse sin errores de formato para los usuarios de todo el mundo. La estética de la fuente es tan versátil como su utilidad.

Uso en el mundo real

Los blogs o las páginas de aterrizaje serían ideales para esta pareja, o cualquier cosa con cuerpos de texto largos que requieran subtítulos notables para romper el contenido. La adaptabilidad universal de Noto Sans también la convierte en una buena opción cuando la prioridad es llegar a un público internacional.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya tiene un cierto atractivo que me parece muy «terrenal» y amigable. No hay ninguna pretensión en cuanto a su personalidad; lo que ves es lo que obtienes.

Lato podría hacerle la competencia a Open Sans como campeona de las fuentes polivalentes en la biblioteca de Google.

Juntos forman una combinación divertida, fácil de leer y pragmática.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Otra versión moderna de un estilo del Viejo Mundo, PT Sans y sus hermanas, PT Sans Narrow, hacen una declaración inmediata e inconfundible cuando se combinan.

Uso en el mundo real

Cualquiera de las dos fuentes funciona igual de bien como titular o como cuerpo de texto; la combinación concreta que elijas dependerá de la naturaleza de tus palabras, aunque tiendo a preferir PT Sans Narrow en ráfagas más cortas.

Dirigida como una «herramienta muy importante para las comunicaciones digitales modernas», parece más adecuada -aunque ciertamente no se limita a- el uso de estas fuentes para startups tecnológicas, aplicaciones de software u otros negocios digitales.

10. Amatic SC + Josefin Sans Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Bien, esta es definitivamente más del lado alegre. Obviamente, esta combinación no funcionará para todo el mundo, pero la naturaleza caprichosa de Amatic SC y Josefin Sans crea algo que seguramente destacará, siempre y cuando se tenga precaución. Dependiendo del tono general y del tema, esta combinación podría funcionar también para un blog de nicho.

Un consejo: No utilices Amatic SC como cuerpo de texto principal. Volverás locos a tus lectores.

Bonus: 5 de nuestras fuentes premium favoritas

Sabemos que este artículo trata sobre las mejores fuentes de Google que están de moda, pero también queríamos mencionar algunas de nuestras fuentes premium favoritas como bonus. Las fuentes premium, por supuesto, no son gratuitas, pero dan a tu sitio web un diseño más único y personalizado. Estas fuentes no son populares ni están de moda y, de hecho, son lo contrario de las que hemos enumerado anteriormente. Sin embargo, son excelentes para aquellos que quieren un diseño personalizado para su marca y van bien cuando se utilizan para los logotipos o incluso los títulos creativos:

Bonificación 1: El Mega Craft Bundle X

Bonificación 2: El Valentine’s Bundle

Bonificación 3: El paquete de fuentes geniales

Bonificación 4: El paquete de gráficos pequeños

Bonificación 5: Celos

¿Por qué deberías usar Google Fonts?

Bienvenido a lo que muchos diseñadores web consideran su mejor amigo. Hablando por experiencia, puedo decir que rara vez incrustar archivos de fuentes personalizadas en los sitios web más. Google Fonts es ahora casi exclusivamente el primer y último lugar al que recurro para la tipografía de un sitio web. He aquí por qué:

• Es completamente gratis. No importa cuántas fuentes elijas o en cuántos sitios web las utilices. Nunca pagarás un centavo.
• A partir de marzo de 2018, hay más de 850 fuentes en la biblioteca. Lo más probable es que encuentres el estilo adecuado para tu marca.
• Es rápido. Como las fuentes están alojadas en los servidores de Google, los archivos están inteligentemente comprimidos y diseñados para cargarse rápidamente.
• Es fácil. Basta con copiar y pegar en un archivo HTML y ya está.
• Está organizado. Todas las fuentes están clasificadas y se pueden buscar en una base de datos. Ya no tendrá que buscar en las desordenadas subcarpetas de su ordenador para encontrar la fuente perfecta.
• ¿He mencionado que es gratis? Es gratis!

Cómo instalar Google Fonts

No hay que preocuparse. Sólo tienes que ir a Google Fonts y encontrar la(s) fuente(s) que necesitas.

A medida que seleccionas tus fuentes se van añadiendo a una colección en la parte inferior de la página. Cuando hayas terminado con tu búsqueda, haz clic en esa pestaña inferior y aparecerá una ventana con instrucciones de incrustación.

Añadir estilos

Desde aquí puedes elegir incluir estilos adicionales como cursiva, negrita, negrita-cursiva, etc. Sólo tienes que hacer clic en la pestaña PERSONALIZAR y seleccionar los estilos que creas que vas a necesitar.

Por ejemplo, así es como yo seleccionaría tanto el texto normal como la negrita para la fuente Khula.

¿Incorporar el estándar o @Import?

Se dará cuenta de que tiene dos opciones para incrustar las fuentes en su sitio web: utilizar un <link href> estándar que se utilizará en el archivo HTML de su sitio, o una url @import que se incluirá en el archivo CSS de su sitio. Así que, ¿cuál debe usar?

En general, la mejor opción es copiar y pegar la línea <link href> en su archivo HTML. Tus fuentes normalmente se cargarán más rápido de esta manera en lugar de esperar a que se cargue el archivo CSS, y este método también tiene un poco mejor soporte para los navegadores (muy) antiguos.

¿Dónde poner el código

Vas a copiar y pegar la línea de código que Google te da en la sección <head> de tu archivo HTML. Así que usando la fuente Khula que elegí arriba, se verá así:

Usando la fuente en su hoja de estilo

Ahora simplemente llame a la fuente como de costumbre dentro de su código CSS. A modo de demostración, el encabezado principal y el texto del párrafo podrían tener este aspecto:

Consejo para emparejar tus fuentes

Decidir qué fuentes agrupar puede ser a veces un equilibrio artístico difícil de alcanzar. Por un lado, su selección de fuentes será más efectiva cuando haya suficiente contraste de estilos; cada fuente en su sitio debe destacarse de las demás y ganar una justificación para su uso. Por otro lado, no querrá que sus fuentes se alejen demasiado unas de otras desde el punto de vista estilístico, lo que podría dar la impresión de que han sido elegidas al azar.

Serif y Sans-Serif

Un método probado es emparejar una fuente serif con una sans-serif. Sus estilos tienden a contrastar bien juntos, ofreciendo una fácil distinción entre los titulares y los párrafos.

La experimentación es la clave

Cuando estoy eligiendo fuentes para un nuevo sitio web, me gusta descargar todas las opciones posibles de Google Font en mi ordenador y jugar con ellas en un documento de procesamiento de textos. Juguetear con diferentes tamaños y pesos y comparar las combinaciones una al lado de la otra es una forma eficaz de determinar la mejor combinación posible. Si se toma el tiempo de experimentar, puede que incluso descubra que el uso de una variación fina de un tipo de letra determinado hace que el texto del titular sea mejor que si utilizara un tipo de letra completamente distinto. (La solución más sencilla es a menudo la mejor.)

Conclusión

Google Fonts es un poderoso recurso para los aficionados al bricolaje que no quieren pagar por costosas fuentes personalizadas en su sitio web. Pero un gran poder conlleva una gran responsabilidad: la tipografía requiere una cuidadosa reflexión para que se haga bien, y no todas las fuentes que hay son ganadoras. Esperamos que esta guía le ayude a orientarse en la dirección correcta y le inspire a encontrar la combinación perfecta de fuentes para captar la personalidad de su marca.