Una imagen vale más que mil palabras. Pero si esas palabras tienen la tipografía correcta, conseguirás el impacto de una gran imagen.
Imagen de Pixabay - © Free-Photos
Las fuentes de Google son un conjunto de tipografías que han agrupado y puesto disponible para todo el mundo.
Puedes descargarlas, instalarlas, y usarlas para maquetar todo tipo de contenido, como un PowerPoint o la portada de un trabajo en Word.
¿Qué encontrarás aquí?
¡Sigue leyendo para saber cómo!
Qué son las Web Fonts
Durante muchos años, en el diseño web solo se podían usar unas fuentes tipográficas, llamadas “fuentes seguras”.
Esto era debido a que, para que se visualizara correctamente una fuente en un ordenador mientras navegabas por Internet, el usuario debía tener instalada en su dispositivo esa tipografía.
Si no, no podía ver ese tipo de letra y la maquetación de la web se “descolocaba”.
Esto pasa hoy en día en la aplicación, por ejemplo, de PowerPoint. Si quieres utilizar una fuente que no viene instalada por defecto, debes instalarla tú mismo.
Este problema se solucionó con la llegada de las “Web Fonts”. Estas son tipografías muy variadas, que se almacenan en el servidor (en vez de tener que descargarlas en cada dispositivo), por lo que, cuando carga una página web, se descargan junto a las fotos y al texto.
Además, las fuentes de Google Fonts están comprimidas para que se descarguen en tu dispositivo de una forma rápida y sencilla.
Estas tipografías se mantienen almacenadas en la caché de tu dispositivo; si vuelves a entrar en una página con estas fuentes no se tienen que volver a descargar.
Qué es Google Fonts o Google Web Fonts
Google Fonts, conocido anteriormente como “Google Web Fonts”, es un catálogo o repositorio de estas fuentes con multitud de estilos tipográficos; completamente gratuito y libre de derechos.
En la actualidad hay más de 900 familias, cada una de éstas con variantes en cuanto al grosor de la letra o el estilo cursiva.
Puedes descargarte y utilizar cualquiera de estas fuentes para un uso personal, como la creación de un PowerPoint, o para uso comercial, como el diseño de una página web.
Por qué utilizar las fuentes de Google Fonts
Aunque las fuentes de Google nacieran en gran parte para dar solución al problema que hemos visto del diseño web, en la actualidad se utilizan para cualquier tipo de diseño, como el de presentaciones de PowerPoint y plantilla de documentos en Word.
Por lo que, aunque no seas diseñador, las fuentes de Google tienen muchas ventajas para ti.
Conseguirás diseños originales y elegantes en tus presentaciones de PowerPoint
Como ya hemos hablado, estas fuentes las puedes utilizar en cualquiera de las aplicaciones de Office, como PowerPoint, y conseguir diseños increíbles.
Dependiendo de la temática que tengas, podrán servirte unas u otras; pero entre las 900 que tienes disponibles seguro que encuentras la combinación perfecta.
Y es que, es muy recomendable utilizar entre dos y tres fuentes para cada diseño.
De esta forma, conseguirás que la gente perciba tu presentación como mucho más trabajada y lograda, además de quedar mucho más estético.
Puedes utilizar su catálogo como inspiración
Si estás un poco perdido y no sabes que fuentes quedarán mejor en tu web o presentación, la página principal de Google Fonts puede servirte de inspiración.
En una de las opciones que hay al principio puedes escribir una palabra o texto para ver cómo queda con cada fuente.
También puedes filtrar el tipo de letra que buscas: desde una con mucho grosor hasta una que imite a la caligrafía.
Por ejemplo, para buscar una fuente con más grosor de lo habitual, haz clic en “Font Properties” y luego marca la casilla de “Thickness”. Al deslizar el cursor por la barra, irás filtrando las tipografías.
Si estás buscando combinaciones de letras que puedan quedar bonitas, ¡echa un vistazo al último apartado de este post!
Son muy fáciles de usar: descarga, instala y ¡listo!
Para utilizar una fuente de Google tan solo deberás elegirla en su página principal, descargarla e instalarla en tu ordenador.
En el apartado siguiente vemos cada uno de esos pasos explicados detalladamente.
Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos y contenido que mantendrá a tus lectores enganchados:
- 77 Plantillas de títulos probados que multiplicarán los clics.
- Sacarás infinitas ideas para crear tus propios títulos.
- Con las palabras "mágicas" redactarás textos irresistibles.
- Vale para todo: blogs, tiendas online, redes sociales, etc.
Anímate, ¡que ya somos +50.000!
Permiten diseños web “responsive”
Un diseño responsive es aquel en el que los elementos de la página web (texto, imágenes, columnas etc) se adaptan a cualquier tipo de pantalla (móvil, ordenador o Tablet).
Las fuentes de Google están diseñadas para cualquier tipo de dispositivo y navegador, por lo que, si eres diseñador web, no tendrás ningún problema a la hora de utilizarla.
Cómo usar Google Fonts
Sí todo lo que hemos visto hasta ahora te ha convencido y quieres empezar a utilizar las cuentas de Google en tus diseños, debes ir a su página principal: www.googlefonts.com
En la parte de arriba hay una barra buscadora, por si ya conoces el nombre de una fuente y quieres buscarla.
Justo al lado encuentras otro apartado, donde pone “Type something”.
Aquí puedes escribir una palabra o frase de ejemplo para visualizar las fuentes.
El siguiente apartado regula el tamaño de las fuentes.
También tienes la opción de hacer la búsqueda con filtros, como la categoría de la fuente (escrita a mano, con poco espacio entre letras etc.), fuentes de otros idiomas (chino, japonés etc.) o las propiedades de las fuentes.
En las categorías de las fuentes tenemos las opciones referentes al estilo: Serif y Sans-Serif (más adelante veremos la diferencia), “Display”, “Handwritting” o “Monospace”.
Cada estilo tiene unas características:
La tipografía “Display” está diseñada para títulos, textos grandes o banners principales. Sus letras son más llamativas que el resto de las fuentes.
La tipografía “Handwritting” en español, “letra manuscrita”, imita la caligrafía humana. Queda muy bonita para textos más pequeños, quizás puntuales, o para textos en los que se quiera imitar la letra humana.
La tipografía “Monospace” es la que tanto sus letras como sus espacios ocupan el mismo espacio horizontal.
Fueron las fuentes originales de las máquinas de escribir, y las que se empezaron a usar en informática (por su sencillez).
Es un estilo de fuente muy sobria que puede dar un toque de seriedad a una presentación.
Otro tipo de filtro es el de “Font Properties”.
Aquí vas a poder filtrar por las características de las fuentes, como el número de estilos de la fuente, el grosor, la inclinación y el ancho de las letras.
En este ejemplo, hemos buscado una fuente con inclinación moderada y un grosor mayor.
Al hacer clic sobre una de las tipografías llega una nueva ventana.
Aquí encuentras los diferentes estilos de la fuente (si tiene más de 1). Cada estilo se diferencia por un grosor e inclinación diferente (más negrita y más cursiva).
Si sigues bajando encuentras todo el abecedario escrito en esa tipografía, la licencia que tiene información sobre su creador.
Por último, encuentras las combinaciones de esa letra con las cinco otras tipografías más utilizadas.
Cómo descargar fuentes de Google Fonts
Para descargar las fuentes de Google Fonts tienes dos opciones: descargar solo un estilo de esa letra o descargarte la tipografía entera.
Si quieres descargarte la tipografía entera, debes hacer clic en el botón que hay arriba a la derecha donde pone “Download Family”.
Automáticamente se descarga en tu ordenador un archivo “.zip” que lleve el nombre de la letra.
Si quieres descargarte tan solo un estilo, ve al que has elegido y haz clic en la opción de “+ Select this style” que encuentras en el margen derecho.
Haz clic sobre esta opción y aparecerá en el margen derecho estas opciones quieres la imagen de abajo.
Para descargarte el estilo haz clic en “Dowload all”.
Se abre una nueva ventana en la que debes hacer clic en “Aceptar” para guardar el archivo en tu ordenador.
Cómo instalar fuentes de Google Fonts
Cuando ya tengas descargado el archivo de la fuente, que tendrá el nombre de esa tipografía y la terminación “.zip”.
Debes descomprimir la carpeta, haciendo clic en “Extraer todo”. Esto crea una nueva carpeta con los archivos descomprimidos.
Ahora, dentro de la nueva carpeta, están los estilos que has elegido.
En este ejemplo solo hemos descargado uno, pero si tienes varios, selecciónalos todos dejando pulsada la tecla “Ctrl”, la flecha que hay justo encima que apunta hacia arriba y ve seleccionando cada una con las teclas de la flecha hacia abajo.
Cuando ya tengas todas seleccionadas, haz clic en el botón derecho. Haz clic en “Instalar para todos los usuarios”, y la tipografía quedará instalada en tu ordenador.
Si no te aparece esta opción (seguramente cuando vayas a instalar varias fuentes a la vez) el método es distinto.
Debes ir al panel de control y buscar la sección de “Configuración de fuentes”.
Arriba, hay una ventana donde pone que agregues los archivos ahí.
Selecciona todos como vimos antes y arrástralos hacia el recuadro.
Ahora, para comprobar que está instalada, búscala en la barra buscadora de tipografías.
Luego abre PowerPoint. Escribe en la barra de letras el nombre de la tipografía, y ves que ya aparece.
Google web Fonts en WordPress
Existen varias maneras de incorporar estas fuentes a tu página de WordPress, pero la más sencilla es mediante la instalación de un plugin.
Easy Google Fonts es un plugin que han publicado hace solo dos meses, pero que ya cuenta con muchas valoraciones positivas de los usuarios.
La fuentes y tipografías más populares de Google Fonts
Las tipografías más famosas suelen diferenciarse en dos grandes familias: Serif y Sans-Serif.
Las tipografías Serif, con origen en los medios de comunicación tradicionales como los periódicos, fueron diseñadas con ciertos detalles, llamadas “serifas”, en el contorno de cada letra.
En cambio, la tipografía Sans-Serif elimina esos detalles y forma letras más sobrias y geométricas.
Te dejamos algunas de las fuentes de Google más utilizadas (por lo bonitas que quedan):
Fonts Montserrat
Montserrat es un tipo de letra Sans-Serif con 18 estilos diferentes en su familia.
Diseñada por Julieta Ulanovsky, está inspirada en los carteles del barrio de Montserrat, en Buenos Aires.
Es una tipografía muy utilizada en la creación de post promocionales.
Fonts Raleway
Diseñada por Matt McInerney, Raleway es una fuente Sans-Serif con 18 estilos diferentes.
Tiene un estilo redondeado que otorga una lectura sencilla.
Fonts Roboto
Diseñada por Christian Robertson, esta fuente Sans-Serif tiene caracteres muy geométricos y curvas abiertas. Algo diferente a las otras, pero muy utilizada en el diseño web.
Fonts Lato
Esta fuente Sans-Serif con 10 estilos en su familia es similar a Roboto.
Las características redondeadas le dan un toque de elegancia y sutileza, por lo que es muy utilizada en el diseño gráfico y web.
10 Ejemplos de combinaciones de Google Fonts
Para conseguir un diseño que impacte a los lectores, te recomiendo que combines entre dos y tres fuentes.
A continuación, te dejamos las 10 combinaciones que más nos gustan mucho.
Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos y contenido que mantendrá a tus lectores enganchados:
- 77 Plantillas de títulos probados que multiplicarán los clics.
- Sacarás infinitas ideas para crear tus propios títulos.
- Con las palabras "mágicas" redactarás textos irresistibles.
- Vale para todo: blogs, tiendas online, redes sociales, etc.
Anímate, ¡que ya somos +50.000!
Y también te recomendamos este post, que nos ha servido de inspiración en numerosas ocasiones, de canva.com
https://www.canva.com/es_mx/aprende/guia-definitiva-para-combinar-fuentes/
Montserrat + Merriweather
En el ejemplo de abajo hemos utilizado estas dos fuentes para una presentación de Power Point.
El título está creado con Montserrat y escrito en mayúsculas, con un tamaño de 126.
El subtítulo, también en mayúsculas, y el texto están escritos en Merriweather con un tamaño de 23 y 15 pt.
Oswald Bold + Montserrat Light
La fuente Oswald en su formato negrita (Bold) junto a Montserrat Light combinan de una forma muy llamativa.
En este ejemplo el título está escrito en Oswald Bold con un tamaño de 123 pt, y el subtítulo y el texto en Montserrat Light con tamaño de 36 y 23 respectivamente.
Archivo Black + Tenor Sans
Para un post de Instagram de promoción de un negocio queda muy elegante la combinación de Archivo Black con Tenor Sans.
En esta ocasión el título está escrito con la primera tipografía y un tamaño de 115 pt, mientras que el subtítulo y el texto están en Tenor Sans con tamaño de 40 pt y 22 pt respectivamente.
Abril Fatface + Lato
AbrilFatce es una letra risueña que da un toque alegre al diseño.
En el ejemplo de abajo el título está escrito con esta tipografía y con un tamaño de 120 pt.
El subtítulo, con un tamaño de 50 pt, y el texto, con 23 pt, están escritos en Lato.
PlayFair Display + Arapey
Este ejemplo está diseñado para una portada de un canal de Youtube, combinando la letra PlayFair Display y Arapey.
El título, escrito en PlayFair Display mayúsculas y con un tamaño de 91 pt ocupa la posición central, mientras que el texto complementario está en Arapey con un tamaño 25 pt.
Roboto Condensed + Droid Serif
Esta combinación, como ves en el ejemplo, es muy sencilla pero muy versátil, con la que puedes crear diseños para cualquier objetivo.
En este caso, el título está diseñado en Roboto Condensed con un tamaño de 101 pt, y el subtítulo y el texto en la fuente Droid Serif con tamaños de 41 y 23 respectivamente.
Permanent marker + Roboto
Permanent Marker es una fuente muy llamativa, que imita a la caligrafía humana y da un toque alegre a cualquier presentación.
Combinada con la tipografía Roboto hemos creado este ejemplo para una portada de un canal de Youtube.
El título tiene un tamaño de 92 pt y el subtítulo de 42 pt.
Sacramento + Roboto
Esta combinación queda muy bonita. La tipografía Sacramento da un estilo único y que llama la atención del lector.
En este ejemplo tiene un tamaño de 152 pt, y el título y texto, en tipografía Roboto, con 45 pt y 23 pt respectivamente.
Anton + Yellowtail
En este ejemplo hemos querido similar una publicación en Instagram de una tienda de discos.
En esta combinación de se complementa la forma geométrica y ruda de Anton con la ligereza y las curvas de Yellowtail.
El título está escrito con la tipografía Anton, con un tamaño de 169, y el subtítulo y el texto en Yellowtail con tamaños de 67 pt y 18 pt.
Vollkorn + Raleway
Esta combinación de Vollkorn con Raleway resulta muy visual para cualquier tipo de presentación.
El título, con tamaño de 141, está diseñado en Vollkorn, mientras que el subtítulo y texto, con tamaños de 48 pt y 23 pt respectivamente, en Raleway.
Enhorabuena por la calidad del post. Una pasada. Bravo.
Hola Josep,
Muchas gracias por tus amables palabras 🙂
¡Un saludo!
Lucía
Hola
la verdad es que es muy interesante el tema de las Google Fonts para que la imagen de la web tenga un buena presencia.
Pero también he visto que cuando haces alguna prueba en GTmetrix o Pagespeed, uno de los problemas habituales suelen ser las Google fonts que retrasan la carga.
Cuál es la mejor manera de combinar para que beneficie la imagen web, pero no la penalize
Gracias
Hola Carlos,
Puedes utilizar plugins de caché que sepan optimizar la carga de fuentes. Nosotros usamos WP Rocket.
¡Un saludo!,
Lucía