Hoy en Sayonara vamos a contaros qué es Google Fonts y cuáles son las mejores fuentes para tu web según los usuarios.
Todos los diseñadores web saben lo importante que es la elección de la tipografía. A la hora de crear una web la fuente debe ser perfectamente legible y de un tamaño adecuado o las famosas arañas de Google podrían penalizarte.
Cómo en Sayonara sabemos lo importante que es y la locura que supone bucear en el océano de fuentes que puedes encontrar por internet, vamos a ayudarte presentándote a Google Fonts y eligiendo las mejores fuentes para tu web.
Como siempre, comencemos por el principio.
¿Qué es Google Fonts?
Para todos aquellos que aún no lo conozcan, Google Fonts es un directorio o catálogo interactivo de tipografías de uso libre. Esto significa que puedes usar estas fuentes dónde y cómo quieras totalmente gratis.
Esta galería fue lanzada en 2010 bajo el nombre de Google Web Fonts y sólo contaba con 19 fuentes. A día de hoy, tiene 923 familias de fuentes distintas.
¿Cómo se usa?
La web de Google Fonts es muy sencilla e intuitiva. Para utilizar las fuentes podéis hacerlo de dos formas distintas, descargándolas o importándolas a una página web.
¿Cómo descargar fuentes de Google Fonts?
Para descargar las fuentes de Google Fonts sólo tienes que seguir estos sencillos pasos:
1. Abre la web 👉 Google Fonts
2. Encuentra la fuente que quieras utilizar. Puedes hacerlo a través del buscador o de los diferentes filtros de los que dispone la web.
3. Para seleccionarla puedes hacer dos cosas:
4. Independientemente de la opción que elijas, aparecerá en la parte inferior derecha de la web, una ventana. Tenéis que dar click en la ventana para que se despliegue y darle al botón de descarga.
Ahora que tenemos la tipografía que queremos ya solo falta instalarlas. Tanto para Windows como para Mac este proceso es muy sencillo. Simplemente abre el zip que se te descarga, haz doble click sobre el archivo ttf que quieras instalar y sigue las instrucciones del asistente.
¿Cómo importar una fuente de Google Fonts a una web?
Como habéis visto en la imagen anterior, al seleccionar la fuente que queremos y desplegar la ventana, nos aparecen las opciones de compartir y descargar en la parte superior derecha y, justo debajo del nombre de la fuente, la opción de “EMBED” o insertar.
Tenéis que ir al documento HTML de vuestra web, a la sección de <head> y copiar lo siguiente:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Luego cada vez que queráis usar esa fuente en la web, tenéis que poner lo siguiente en el CSS:
font-family: 'Roboto', sans-serif;
Ahora que ya sabemos cómo utilizar las fuentes de Google Fonts, vamos a lo importante.
Cuáles son las 10 mejores fuentes de Google Fonts
Para poder elegir cuáles son las 10 mejores fuentes de Google Fonts, nos hemos ido directamente a ver los números. Y para ello hemos utilizado los propios datos de Google gracias a 👉 Google Fonts Analytics. Esta herramienta de Google rastrea las tipografías y las clasifica según el número de sitios web que las usan.
Aquí podéis ver la interfaz de Google Fonts Analytics:
Google a rastreado 31 billones y sigue contando… ¿no es increíble? En la siguiente imagen vamos a ver la clasificación que ha hecho la herramienta de las 10 tipografías más utilizadas de Google Fonts.
Roboto es una familia de fuentes muy completa creada por Christian Robertson. Google la desarrolló para que sirviera como fuente en el sistema operativo Android Ice Cream Sandwich (4.0) y más tarde pasó a ser también usada en Google SO. Actualmente es usada por todos lo proyectos, productos y servicios de Google.
Esta fuente cuenta con 12 estilos distintos. Se trata de una fuente tipo san-serif, que se destacan por evitar las terminaciones, adornos o remates para facilitar la lectura y no sobrecarguen la vista.
Es, con diferencia, la tipografía más famosa y buscada en Google. Esta fuente aparece en más de 26 millones de sitios web.
En este enlace puedes ver y descargar Roboto en Google Fonts.
Con Open Sans nos encontramos con otra de las fuentes más famosas, creada por el director de tipografía de Ascender Corp, Steve Matterson. Es una sans-serif de apariencia amable especialmente diseñada y optimizada para impresión, sitios web e interfaz móvil.
Se trata de una tipografía muy versátil que cuenta con 10 estilos distintos. Esta fuente aparece en más de 25 millones de sitios web.
Open Sans es la fuente utilizada por Google para algunos de sus sitios y sus anuncios impresos y digitales.
En este enlace puedes ver y descargar Open Sans en Google Fonts.
Lato fue creada por Łukasz Dziedzic en el verano de 2010, como un conjunto de fuentes corporativas para un gran cliente. Pero en diciembre de ese mismo año, esta fuente fue lanzada con licencia Open Font Licence con el apoyo de Google. Se trata de una san-serif elegante y está disponible en 10 estilos diferentes.
Su creador define esta tipografía como “masculino y femenino, serio pero afable”.
Esta fuente aparece en más de 12 millones de sitios web.
Otra cosa a destacar de Lato es que es la fuente utilizada por Lego para sus gráficos impresos y digitales.
En este enlace puedes ver y descargar Lato en Google Fonts.
Oswal es una fuente inspirada en el estilo clásico, antiguamente representadas por tipografías como “Alternente Gothic”. Se trata de una san-serif creada por Vernom Addams y con las modificaciones finales de Kalapi Gajjar y Alexei Vanyashin.
Oswald fue inicialmente rediseñada y reformada para adaptarse a la cuadrícula de píxeles de las pantallas digitales estándar. Actualmente puede ser utilizada por navegadores web en cualquier tipo de dipositivo.
Esta fuente aparece en más de 8,3 millones de sitios web y está disponible en 6 estilos diferentes.
En este enlace puedes ver y descargar Oswald en Google Fonts.
Slabo es una serif creada por John Hudson de Tiro Typeworks. Lo particular de esta fuente es que ha sido creada en tamaños específicos, 27px y 13px, para su uso en publicidad en línea y otros usos web.
Esta fuente aparece en más de 270 mil sitios web.
En este enlace puedes ver y descargar Slabo 27px en Google Fonts.
Roboto Condensed es una san-serif de la familia de fuentes Roboto creada por Christian Robertson.
Esta fuente aparece en más de 2,7 millones de sitios web y está disponible en diferentes.
En este enlace puedes ver y descargar Roboto Condensed en Google Fonts.
Montserrat es una fuente tipo sans-serif creada por Julieta Ulanovsky, quien vive en el vecindario epónimo de Montserrat de Buenos Aires. Se inspiró en los viejos carteles y letreros de su barrio para crearla, de ahí su nombre.
Se trata de una gran familia de tipografías. Ésta es la conocida como Regular, pero existen dos más, Alternates y Subrayada. Tenemos mucho de donde elegir.
Esta fuente aparece en más de 9,4 millones de sitios web y está disponible en 18 estilos diferentes.
En este enlace puedes ver y descargar Monserrat en Google Fonts.
Source Sans Pro es una san-serif diseñada por Paul D. Hunt. Fue la primera familia tipográfica de Adobe de código abierto. Está concebida principalmente para interfaces de usuario.
Aunque está inspirada en los diseños tipográficos góticos estadounidenses del siglo XX, se simplificaron las formas y se decidió por un ancho más generoso. Es una fuente sencilla y fácil de leer en textos largos gracias a sus mayúsculas más cortas y los extensores más largos de las minúsculas.
Esta fuente aparece en más de 4,3 millones de sitios web y está disponible en 12 estilos diferentes.
En este enlace puedes ver y descargar Source Sans Pro en Google Fonts.
Raleway es una elegante san-serif creada por Matt McInerney. En 2012, Pablo Impallari y Rodrigo Fuenzalida expandieron la familia de fuentes.
Está destinada a encabezados y otros usos de gran tamaño. Es altamente legible, por lo que es una fuente excelente tanto para impresión como para la web.
Esta fuente aparece en más de 8 millones de sitios web y está disponible en 18 estilos diferentes.
En este enlace puedes ver y descargar Raleway en Google Fonts.
PT Sans es una fuente san-serif creada por Alexndra Korolkova y desarrollada para el proyecto “Public Types of Russian Federation”. El objetivo de este proyecto era de dar la posibilidad de leer y escribir a la gente de Rusia, en sus idiomas nativos.Esta familia de fuentes es una herramienta muy importante para las comunicaciones digitales modernas, ya que incluyen páginas de código estándar occidentales, centroeuropeas y cirílicas. Además, incluye los caracteres de cada idioma de título en la Federación Rusa.
Esta fuente aparece en más de 2,1 millones de sitios web. Puedes verla y descargarla aquí PT Sans en Google Fonts.
¡Hasta aquí hemos llegado por hoy! En Sayonara esperamos que os haya gustado y que os haya sido útil. Si creéis que deberíamos incluir alguna tipografía más, escribidnos un comentario 😉
