Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

mejores-google-fonts-93-1.svg

Las 40 mejores Google Fonts para mejorar el diseño de tu página web

En este artículo te quiero enseñar las 40 mejores Google Fonts para mejorar el diseño de tu página web. Google hace de todo, y ha creado hasta sus propias tipografías, las llamadas Google Fonts. Voy a enseñarte que son, cuales son las mejores, y cómo deben combinarse. Al final del post también verás cómo puedes usar las mejores Google Fonts para mejorar el diseño de tu página web.

 

01-60¿Que son las Google Fonts y por que usarlas?

Google Fonts es un catálogo con mas de 700 fuentes tipográficas totalmente gratuitas y de código abierto. Esto significa que podrás utilizar cualquier fuente del amplio catálogo de Google en tu página web o blog.

Esto es un gran avance dada la versatilidad que nos ofrece en cuanto al diseño de páginas web. Anteriormente sólo podían usarse unas pocas tipografías en diseño web, las llamadas “fuentes seguras” (Times New Roman, Arial, Andale mono…). Si se usaban estas fuentes se corría el riesgo de que el navegador no las mostrase correctamente.

Antes de tener esta posibilidad, muchos diseñadores que querían utilizar otras fuentes las ponían como imagen. Esto no es lo mejor para el posicionamiento y por suerte a día de hoy no es necesario.

 

Captura de pantalla 2017-06-29 a las 22.24.41

Storytelling TwitterLas 40 mejores Google Fonts para mejorar el diseño de tu página web

Alegreya

Una de las mas populares, perfecta para el cuerpo de texto de cualquier publicación o contenido digital. Puedes encontrarla en 6 versiones diferentes.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Alegreya
Cuerpo: Source Sans Pro

Asap

Esta tipografía es de las llamadas “de palo seco”. Viene con los bordes redondeados y es muy limpia.

Ver tipografía en Google Fonts
Combinación recomendada:
Título: Flamenco
Cuerpo: Asap

Lato

Lato es tuna tipografía elegante y de las mas populares de Google Fonts. De palo seco, con 10 variantes y 5 pesos, desde una ultra fina (Thin), hasta las mas negrita (Black).

Ver fuente en Google Fonts
Combinación recomendada:
Título: Lato
Cuerpo: Merriweather

Merriweather

Merriweather es una tipografía que funciona muy bien para el cuerpo de texto. Funciona muy bien cuando se combina con su compañera Merriweather Sans.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Merriweather
Cuerpo: Open Sans

Roboto

Creada por Christian Robertson, es una familia de fuentes muy completa. Cuenta con varias versiones, mono, condensed y Slab; ésta última con serifa. La versión normal es muy similar a la Helvetica o la Din. Perfecta para titulares en sus diferentes pesos.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Roboto
Cuerpo: Nunito

Raleway

Tipografía creada por Matt McInerney y con multitud de variantes. Es perfecta para los cuerpos de texto por sus curvas abiertas y redondeadas, ya que facilita mucho la legibilidad. Tiene hasta 8 pesos diferentes y sus correspondientes variaciones en cursiva. Han creado además una versión punteada (dotted) que puedes ver y descargar desde la web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Raleway
Cuerpo: Roboto

Montserrat

Montserrat es una fuente creada por Julieta Ulanovsky, quien se inspiró en los carteles y marquesinas típicos del barrio de Montserrat en Buenos Aires y quiso crear este tipo de letra con dos pesos diferentes, regular y bold.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Cardo

Open Sans

Open sans es una fuente de palo seco diseñada por Steve Patterson y lanzada en 2011. Tiene 5 pesos diferentes incluyendo cursivas. Esto hace a Open Sans una de las tipografías mas versátiles que hay, ya que tiene infinidad de aplicaciones. en diseño web se ve constantemente ya que ha ido muy unida a la inclusión de Google Fonts en WordPress y al auge del flat design.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Open Sans
Cuerpo: Lora

Amaranth

Amaranth es una tipografía de aspecto moderno con remates curvados y redondeados. Fue diseñada por Genie Todt, que buscaba mejorar su legibilidad con toques de estructura cursiva.

Ver fuente en Google FontsCombinación recomendada:
Título: Amaranth
Cuerpo: Titillium Web

Gentium

Tipografía Serif muy elegante y de tipo romano. Tiene bastante personalidad por si misma y combina muy bien con tipografías sans-serif, tanto para títulos como para cuerpo de texto.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Open Sans
Cuerpo: Gentium

Noto Sans

Es una evolución de la tipografía Droid, y tiene soporte en mas de 30 idiomas. También ocurre lo mismo con su versión Serif, por lo que es una fuente muy práctica.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat (Mayúsculas)
Cuerpo: Noto Sans

Ubuntu

Ubuntu ha cogido gran fuerza y se ve cada vez mas aplicada en muchas páginas web. Se trata de una tipografía sans-serif que ha sido modificada manualmente para mejorar su legibilidad en pantallas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Ubuntu
Cuerpo: Lora

Quicksand

Tipografía moderna sans-serif que destaca por tener  los extremos totalmente redondeados. Además también incorpora varios pesos y una variante a base de puntos, para diseños más creativos.

Ver fuente en  Google Fonts
Combinación recomendada:
Título: Quicksand
Cuerpo: EB Garamond

Droid Sans

Droid Sans es una fuente sans-serif diseñada por Steve Matteson. Está optimizada con el fin de ser amigable con dispositivos móviles, web y otros textos que se muestren en pantallas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Droid Sans
Cuerpo: Cabin

Signika

Inicialmente fue creada para usarse en señalización, pero es aplicable a todo tipo de diseños debido a su ritmo y legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Signika
Cuerpo: Open Sans

Josefin Slab

Josefin Slab es una tipografía que se inspira en las tendencias de 1930 que destacaban por sus formas geométricas. Es una fuente genial para utilizar en titulares y cabeceras, pero también encaja perfectamente como cuerpo de texto.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Josefin Slab
Cuerpo: Josefin Sans

Vollkorn

Vollkorn es una fuente con una serifa prominente y con cuerpo. Fue diseñada para ser discreta y funcionar en cualquier tipo de publicaciones escritas, ya sea en papel o en pantalla. Es perfecta para usar en titulares y tiene varios pesos incluyendo negritas y cursivas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Vollkorn
Cuerpo: Exo

Bree Serif

Fue diseñada en 2008 por Verónica Burian y José Scaglion. Esta tipografía triunfó desde su primer momento. Es muy buena opción para usar en Titulares y combina muy bien con fuentes sans-serif como Lato. Es muy estética y queda muy bien incluso cuando se reduce su tamaño.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Bree Serif
Cuerpo: Lora

Poppins

Poppins es una tipografía geométrica sans-serif creada por Indian Type Foundry en 2014. Está disponible en 5 pesos diferentes, pero desafortunadamente no incluye una variante en cursiva. Es una fuente que funciona mucho mejor en pantallas, por lo que es perfecta para diseño web, donde se utiliza bastante.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Poppins
Cuerpo: Sintony

Hind

Hind, al igual que Poppins tiene 5 variantes, y tampoco incluye cursiva. Se utiliza mucho su variante “bold” para encabezados y titulares en diseño web ya que es muy legible en pantallas y en móviles.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Hind
Cuerpo: Open Sans

Playfair Display

Es una fuente con trazos muy contrastados, que la hacen una tipografía moderna y visual muy buena para titulares. Su variante cursiva es muy bonita, elegante y original para títulos y subtítulos. No es recomendable usarla mucho en cuerpo de texto ya que sus trazos tan contrastados pueden hacer que se pierda algo de legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Playfair display

Space Mono

Space Mono tiene claras influencias del estilo tipográfico geométrico y se puede encontrar en regular y negrita, además de sus correspondientes variantes en cursiva.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Nunito
Cuerpo: Space Mono

Alegreya Sans

Diseñada por Juan Pablo del Peral, y disponible en 7 pesos diferentes, con sus correspondientes variantes en cursiva. Para muchos es de las mejores fuentes de Google Fonts, y cada vez se ve mas usada en la web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Alegreya Sans
Cuerpo: Open Sans

Lora

Lora es una tipografía de Google Fonts disponible en su modo normal y en negrita, incluyendo sus correspondientes cursivas, las cuales tienen un toque muy caligráfico.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Istock Web
Cuerpo: Lora

Domine

Domine fue diseñada por Pablo Impallari en Fue creada con el objetivo principal de ser utilizada en textos en la web, por lo que buscaron un diseño que prioritaria la legibilidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Montserrat
Cuerpo: Domine

Roboto Slab

Diseñada por Christian Robertson, es una fuente gratuita de Google Fonts del tipo serif-slab. Fue creada con el fin de ser usada combinada con su modalidad sans-serif, y contiene 4 pesos diferentes, pero no incluye cursivas.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Roboto Slab
Cuerpo: Open Sans

Fira Sans

Fira Sans es una fuente open-source creada por Erik Spiekermann y con la contribución de Carrois Type Design. En principio solo fue creada para Firefox OS pero mas tarde fue lanzada en código abierto. Está todavía en desarrollo activo y a día de hoy tiene 9 pesos distintos con cursivas, y una versión monospace.

Ver fuente en Google FontsCombinación recomendada:
Título: Fira Sans
Cuerpo: Lato

Old Standard TT

Su diseño se inspira en las fuentes serif modernas de finales de los 90 . Está disponible gratis en Google Fonts en normal, cursiva y negrita, pero desafortunadamente no existe un estilo cursiva en negrita.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Cabin
Cuerpo: Old Standard TT

PT Serif

Esta Google Font del tipo serif y estilo elegante fue diseñada por tres diseñadores rusos en 2010. Está disponible en normal, cursiva, negrita y negrita cursiva.

Ver fuente en Google Fonts
Combinación recomendada:
Título: PT Sans
Cuerpo: PT Serif

Oswald

Actualmente es una de las fuentes condensadas más usadas de Google Fonts. Cuenta con seis pesos desde la extra-light hasta la bold. 

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oswald
Cuerpo: Roboto

Cabin Condensed

Una sans inspirada en en las tipografías de Edward Johnston y Eric Gill, con un toque de modernismo y disponible en cuatro pesos.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Cabin Condensed
Cuerpo: Gentium

Abril Fatface

Está inspirada en las pesadas fuentes de titulación utilizadas en carteles publicitarios en el siglo XIX en Gran Bretaña y Francia. Es una tipografía con mucha personalidad.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Abril Fatface
Cuerpo: Raleway

Dosis

Una fuente redondeada de la familia sans serif. Comenzó con el estilo extra-light y actualmente ya cuenta con más de seis puntos hasta el extra bold.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Dosis
Cuerpo: Open Sans

Oxygen

La familia de tipos de letra Oxygen se crea como parte del proyecto KDE, un escritorio libre para el sistema operativo GNU + Linu. Disponible en tres estilos:  light, regular y bold. 

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oxygen
Cuerpo: Source Sans Pro

Karla

Es una de las fuentes más populares tipo sans-serif diseñada por Jonny Pinhor y además cuenta con cuatro variantes. Es ideal para darle un toque diferente y minimalista a tu web.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Oswald
Cuerpo: Karla

Pathway Gothic One

Es una sans serif muy similar a Oswald pero con un diseño más fino. Es ideal para títulos. El único inconveniente es que solamente está disponible en un grosor.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Pathway Gothic One
Cuerpo: Sanchez

Advent Pro

Se trata de una tipografía sans-serif con un estilo moderno y diseñada especialmente para webs. Está disponible en siete variantes y es recomendable hacer uso de ella  especialmente para títulos subtítulos..

Ver fuente en Google Fonts
Combinación recomendada:
Título: Advent Pro
Cuerpo: Oxygen Light

Maven  Pro

Una fuente con una curvatura única y con movimiento. Su diseño moderno se adapta a cualquier contexto y además es muy legible.

Ver fuente en Google Fonts
Combinación recomendada:
Título: Josefin Slab
Cuerpo: Maven Pro

¿Cómo puedes usar estas Google Fonts en tu web?

Si utilizas WordPress, seguramente no tendrás problema ya que la mayoría de las plantillas integran Google Fonts para usar en H1, H2, p, etc. No obstante puede ocurrir que aluna no haya sido incluida. En ese caso podrías utilizar el método “@font-face” para usar otras Google Fonts. Básicamente debes subir a tu servidor las fuentes en diversos formatos, y  a continuación colocar un código CSS en tu hoja de estilos.

Otro método es usando @import”. En este caso, en lugar de cargar las Google Fonts en tu servidor, las llamas desde Google. Eso es muy fácil ya que Google Fonts te da la solución directa. Sólo tienes que hacer click en @import para encontrar el CSS necesario. Debes ponerlo sin los códigos que <style> </style> que aparecen al principio y al final.

 

Captura de pantalla 2017-06-29 a las 22.23.55

Herramientas para buscar y probar las fuentes de Google Fonts

Además del propio buscador de Google Fonts, con más de 800 familias de fuentes, existen otras alternativas para encontrar y probar tu tipografía perfecta:

 

Type Hero

Con esta herramienta podrás buscar fuentes de Google, añadirles texto e incluso un color para visualizar cómo van a quedar en tu página de WordPress.

Google Fonts

 

Better Font Finder

Descubre de forma interactiva las tipografías, disponibles en Google Fonts, a través de esta herramienta diseñada por Mattthew. Con Better Font Finder podrás seleccionar  fuentes según su similitud visual. A diferencia del amplio catálogo que ofrece el propio buscador de Google Fonts (más de 800 tipografías) este sitio web solamente cuenta con 70 ejemplos.

 

Google Font Previewer for Chrome

Es una extensión de Google Chrome que te permite visualizar como van a quedar las fuentes directamente en tu web. Es muy útil, sobre todo cuando estás diseñando tu página, para encontrar rápidamente una tipografía de Google Fonts y probarla.

google fonts extension

 

Beautiful web type

Se trata de un amplío catálogo online, un escaparate de los mejores tipos de letras, del directorio de fuentes web de Google, aplicados en ejemplos. Para saber la fuente que se está usando simplemente tienes que hacer clic encima y te llevará al directorio de Google Fonts.

Google Fonts herramienta

Marketng y Online desaparecen¿Nos recomiendas alguna otra Google Font que sea idónea para páginas web?

Esta ha sido nuestra selección de Google Fonts, pero a lo mejor tú conoces alguna otra que puedes recomendarnos para mejorar el diseño de las páginas web. ¡Ánimo! Aporta o pregúntanos en los comentarios.

Las 40 mejores Google Fonts para mejorar el diseño de tu página web
3 (60%) 12 votos
Artículos relacionados

19 claves de Diseño Web para hacer la Landing Page perfecta

En este post te voy a dar un montón de consejos útiles y herramientas prácticas para que consigas
2017-11-16 17:37:44
ernesto

10

25 webs para descargar Vídeos GRATIS libres de derechos [4K y HD]

El formato vídeo cada vez está cobrando más importancia en el sector del marketing digital. En este
2017-07-05 16:33:04
leticia

10

27 Trucos para aumentar el tráfico web de tu página o blog

Una página web no atrae un buen volumen de visitas por sí sola a menos que llevemos a cabo e
2017-06-05 15:58:36
alex

10

Sobre el Autor 

Diseñador Web especializado en WordPress. Apasionado del Marketing online y de la creación y diseño de páginas web funcionales. Formo parte del equipo de Aula CM, donde también imparto clases como profesor.

    Más en:
  • linkedin
  • twitter
Álvaro PeñaLas 40 mejores Google Fonts para mejorar el diseño de tu página web

4 comentarios

Únete a la conversación
  • Guideo - 20 julio, 2017 responder

    Post muy completo de recursos tipográficos para webs. Enhorabuena porque está MUY currado.

    Saludos.

  • Javier Ultra - Páginas web en Tijuana - 1 agosto, 2017 responder

    excelente y abudante info ahora a ponerla en practica saludos maestros

  • Rubén - 24 agosto, 2017 responder

    ¡Interesante post Álvaro! A veces nos ponemos a usar las fuentes “estándar” y nos olvidamos de todas estas que además, son gratuitas y se cargan fácilmente en cualquier sistema WordPress. ¡Gracias por las herramientas!

  • Helena - 29 agosto, 2017 responder

    Hola buenas tardes. Me ha encantado el post. Me surge una duda, he querido entrar en Beautiful web type, la última página que nos recomiendan y no me funciona tal y como decís, veo las combinaciones pero ponéndome enciama no me dice qué tipografía es. Me podríais ayudar?, gracias!
    Helena

Únete a la conversación