Tutorial completo sobre Google Fonts

En este tutorial sobre Google Fonts no solo aprenderás a buscar tipografías, también a descargarlas y a elegir la mejor combinación tipográfica para que puedas usarla en tu página web.

Google Fonts es un directorio de fuentes o tipografías de calidad. Es decir, son fuentes que están optimizadas, para evitar ralentizar los tiempos de carga de tu página web y además están libres de virus. 

Antes de comenzar

Antes de comenzar a elegir y descargar tipografías, tienes que tener claro qué tipo de página web vas a diseñar.

Por ejemplo, para una página de una guardería podrías elegir una fuente Sans Serif, con letras redondeadas y más divertidas.

Para una web de un emprendedor que se dedica al marketing para farmacias, sería conveniente una letra más seria.

Una vez que lo tienes claro, es el momento de comenzar a buscar la tipografía perfecta para tu web.

Psicología tipográfica

Cuando entras a Google Fonts te encontrarás con un apartado de Categorías en el que te salen varias opciones a elegir. A continuación te explicaré la psicología tipográfica que se esconde detrás de cada categoría:

psicologia de las tipografias

Serif

Las letras con serifa son las que tienen como una especie de patitas en sus terminaciones. Es la más utilizada en las instituciones o en los sectores más tradicionales. Da sensación de seriedad y respeto.
En el entorno web se utiliza para los titulares.

tipografía-Serif

Varios ejemplos de esta fuente sería la típica Times New Roman, Book Antigua, Garamond o Courier.

Sans Serif

La tipografía Sans Serif o de palo seco, es la contraria a la Serif, es decir, no tiene esas patitas en sus terminaciones, sino que es recta. Esta fuente transmite modernidad, seguridad, alegría y neutralidad. 
En las páginas web la utilizamos para los párrafos, ya que es mucho más legible.

tipografía-Sans-serif


Podemos encontrar la tipografía Arial, Tahoma o Elvética dentro de esta categoría.

Display

El estilo Display es una fuente decorativa, con diferentes formas dentro de cada letra, podemos usarlas para entornos más divertidos y únicos. Se suele utilizar en grandes tamaños y podemos verla en el uso de carteles y flyers.
Este estilo de tipografía evitamos usarlo en las páginas web, ya que dificultan la lectura a tamaños pequeños.

tipografía-display

Un ejemplo de esta fuente sería Amarante, Amerika o Eurostile.

Handwriting

La tipografía de estilo Handwriting es la que parece que está escrita a mano. Se caracteriza por su uso en cursiva. Transmite elegancia y es una fuente seductora.
En el entorno web podemos usarlas en pequeños detalles, para reforzar un título o en firmas. Evita usarla en titulares, ya que dificulta la lectura. 

tipografía-script



Algunos ejemplos típicos serían Dancing Script, Pacifico o Antro Vectra.

Con este Ebook Gratuito descubrirás cuáles son las herramientas para hacer una web estratégica, que atraiga y retenga a los usuarios:

DESCUBRE LAS HERRAMIENTAS PARA DISEÑAR TU WEB

· 5 herramientas esenciales.

· Cómo elegir la plataforma adecuada.

· Qué tema elegir para tu web.

· Los plugins imprescindibles.

Responsable » Beatriz Calvo  (servidor)

Finalidad » envío de mis publicaciones así como correos comerciales.

Legitimación » tu consentimiento.

Destinatarios » los datos que me facilitas mi plataforma de email marketing Active Campaign cuyo titular es Active Campaign LLC, alojada en EEUU y suscrita al EU PrivacyShield.

Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Cómo descargar una tipografía

Cuando has elegido la tipografía que vas a usar en tu web, es el momento de descargarla.

Para ello tienes que pinchar dentro de la tipografía elegida y darle al botón “Download Family” que encontrarás arriba a la derecha. Cuando pinchas sobre el botón, automáticamente comenzará la descarga. 

descargar-tipografia-google-fonts

Revisa tu carpeta de descargas para encontrar un archivo .zip que después tendrás que extraer.

Si quieres instalar esta tipografía en tu ordenador, es tan sencillo como hacer doble clic sobre el archivo que se ha extraído, se abrirá una nueva ventana y darle al botón instalar.

como-instalar-una-tipografia-en-mi-ordenador

De esta forma podrás comenzar a usar la nueva fuente en tu ordenador, pero ojo, que hacer esto no significa que se quede instalada en tu WordPress. Para ello te invito a que le eches un vistazo a este otro tutorial en el que te explico cómo instalar una tipografía en WordPress.

Combinaciones tipográficas perfectas

En mi caso, he elegido la tipografía Roboto. Cuando he pinchado dentro, para descargarla, se ha abierto una página en la que puedo visualizar los diferentes pesos y estilos de la fuente elegida.

Dentro de esta misma página, bajas hasta abajo del todo y encontrarás una opción llamada “Popular Pairings”.

Combinaciones-tipográficas-perfectas

Este es un selector que te indica qué tipo de fuentes son combinables con Roboto o con la tipografía que hayas elegido en tu caso.

Ejemplos de combinaciones tipográficas

A continuación de dejo varios ejemplos de combinaciones tipográficas que casas perfectamente entre ellos y que podrás usar en tu página web sin patinar.

Lora y Open Sans

Pacifico y Merriweather

Parisienne y Roboto

Tutorial en vídeo

Si prefieres ver este tutorial en vídeo y pasas de leer todo lo anterior, no te preocupes, aquí te explico paso a paso cómo buscar, descargar y combinar diferentes tipografías desde Google Fonts.

Conclusión

Podrás encontrar muchísimos directorios para descargar tipografías y eres libre de elegir el que quieras. El que yo te recomiendo es Google Fonts. 

Por un lado tiene una gran variedad de fuentes para descargar y que puedes usar en tu web, respetando la licencia de uso.

Por otro lado, como te decía al principio, las tipografías están optimizadas y libres de virus, lo cual es una gran seguridad para ti.

Si tienes alguna duda o sugerencia, puedes dejar tu comentario y estaré encantada de leerte.

Deja un comentario

¡Sígueme en RRSS!

¡Espera! ¿Todavía no estás

en la Comunidad?

Responsable » Beatriz Calvo  (servidor)

Finalidad » envío de mis publicaciones así como correos comerciales.

Legitimación » tu consentimiento.

Destinatarios » los datos que me facilitas mi plataforma de email marketing Active Campaign cuyo titular es Active Campaign LLC, alojada en EEUU y suscrita al EU PrivacyShield.

Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.