Con las tipografías de Google Fonts los escritos en tu página web, blog, redes sociales u otro espacio digital pueden lucir diferente al común denominador.
En este artículo aprenderás cuáles son las mejores tipografías de Google, y cómo deberías combinarlas para que luzcan extraordinarias.
La gran ventaja de Google Fonts es proporcionar más de 700 fuentes tipográficas gratuitas, para que escojas la que más te guste.
Google Fonts vino a desplazar el uso de las tipografías conocidas como seguras, para el diseño de páginas web.
Estas tipografías conocidas como seguras son: Times New Roman, Arial, entre otras.
Índice de Contenidos
¿Qué es Google Fonts?
Para el año 2010 el gran Google, lanzó el servicio de Google Fonts, que es una base de datos, donde hay cientos de fuentes recopiladas que además es open source o de código abierto.
Lo mejor es que puedes utilizarlas en la página web que desees optimizar y también está disponible para apps como Google Docs. Para el 2019, contaba con casi 900 fuentes y algo que lo caracteriza es que anualmente incluyen entre 100 y 150 fuentes nuevas.
Este servicio de fuentes de texto, tiene tres grandes cualidades:
- Compatibles: Algo que no te dará dolor de cabeza es que no tendrás que usar “web safe fonts”, porque las tipografías que están en el directorio de esta plataforma son compatibles con casi todos los dispositivos, los lenguajes de programación y los tamaños de pantalla.
- Gran Variedad: Al ingresar a Google Fonts lo primero que observarás es la gran cantidad de tipografías que te ofrece. Y te da la información de la velocidad de carga de cada una de ellas.
- Fácil uso: Google Fonts es una plataforma muy sencilla, fácil de consultar y muy práctica al momento de integrar las tipografías en tus páginas web o documentos.
Si aún te preguntas ¿Por qué descargarías Google Fonts? Pues, toca repetirte que es una forma fácil y sencilla, además de segura de tener una gran cantidad de fuentes de texto que puedes utilizar en tus proyectos, bien sea una página web, como ya te mencionamos, o un trabajo de diseño gráfico o aplicarlo en cualquier programa que tengas instalado en tu dispositivo.
Otra de las ventajas de Google Fonts es que, luego de descargar la fuente que quieres utilizar, puedes eliminarla de inmediato hasta que la necesites de nuevo.
Importancia de utilizar una buena tipografía
Para darle identidad a una marca es necesario determinar una serie de elementos tales como:
- La escogencia de una tipografía que ayude a transmitir un mensaje de forma correcta, atendiendo a la misión y visión del producto o servicio.
- Una combinación de colores, que transmita los mensajes de una marca personal o empresarial de manera clara y certera.
- Asimismo, se requiere una correcta alineación de los párrafos, para transmitir un mensaje adecuado.
- Aunado, a la realización de un logo que difunda la razón de ser de la empresa.
Cualquier empresa o negocio debe estar consciente de la importancia de tener una buena presencia en Internet y que la página web esté muy bien diseñada. Sin embargo, no siempre toman cuenta la tipografía que utilizan.
La mayoría utiliza las tipografías “seguras” que ya están predeterminadas en los dispositivos. La influencia de las fuentes es un factor clave en los diseños gráficos. Así como los colores y la estructura de una página, la fuente que decidas utilizar es igual de importante porque proyecta una buena imagen de tu marca. ¿Qué debes tener en cuenta para esto?
- La legibilidad de la fuente: Aunque el contenido es siempre importante, la legibilidad también influye. Esto se debe a la facilidad con la que un lector puede leer el texto en tu página, y es algo que te dará la tipografía que utilices. Siempre opta por una agradable e interesante a la vista.
- El tamaño sí importa: Hoy en día, la variedad de dispositivos que manejan los usuarios es muy diversa, por eso el tamaño de la fuente es muy importante. Debes elegir una tipografía que se adapte al tamaño de todos los dispositivos y jerarquizar lo más importante del contenido de tu página.
- Busca un buen color: El color y la tipografía deben ir de la mano, son clave para lograr textos óptimos en cualquier página web. Ten en cuenta los colores corporativos, los contraste y aunque la premisa es que debe ser negro sobre fondo blanco, no necesariamente tiene que aplicar.
- Sé creativo: La tipografía debe ir acorde con la personalidad de tu marca, aunque más allá de esto no debes dejar de ser original y creativo, esto te hará destacar en el mundo tecnológico.
¿Para qué sirve Google Fonts?
Google Fonts sirve para ayudarte siempre a buscar y seleccionar las fuentes mediante un sistema de filtrado. También te asesora sobre cómo realizar los mejores emparejamientos y te da una vista previa de cómo se vería el resultado final si logras combinar fuentes.
Dentro de sus principales funciones está:
- Ofrece un servicio gratuito: Sin importar cuantas fuentes decidas utilizar ni en cuantos sitios web, no necesitas cancelar ninguna licencia. Google Fonts es de uso totalmente gratuito.
- Puedes elegir entre casi 900 fuentes: El catálogo de Google Fonts es totalmente extenso para que selecciones la tipografía perfecta en tu proyecto.
- La aplicación funciona correctamente: El catálogo de Google Fonts está muy bien organizado y categorizado de forma correcta. Y los filtros de búsqueda permite que se acorten los resultados y te sea más fácil elegir el que realmente te interese.
- Tu web será más rápida: Como las fuentes estarán en los servidores de google no hará pesado tu dispositivo, allí los archivos son comprimidos y todo se pensó para que se cargue rápidamente.
- Es muy fácil de utilizar: Simplemente debes “Copiar y pegar” en el HTML.
Además, cuando ingresas a la página de Google Fonts verás que hay diversos filtros para ayudarte con la búsqueda, entre ellos están:
Fuentes por categorías
Que depende de tu proyecto sabrás si necesitas una fuente manuscrita, con serifa o sin ella, como:
- Serif: Tiene remates laterales en los extremos de las líneas de los caracteres.
- Sans Serif: No tiene remates laterales.
- Display: Puede llegar a ser una versión de fuente única o con un tipo de letra específico. Está creada para su fácil legibilidad en grandes tamaños, siempre por encima de los 36 pixeles. Este tipo de fuente es gruesa y tiene mucho atractivo.
- Handwriting: son fuentes que simulan la escritura a mano.
- Monospace: Es un estilo de tipografía que ocupa exactamente el mismo espacio de forma horizontal, es decir, que una “m” y una “i” pueden ocupar el mismo espacio horizontal.
Fuentes por clasificación
En esta opción encontrarás otras subcategorías de acuerdo a la tendencia, la cronología, la popularidad o si quieres hacer una búsqueda por orden alfabético.
Fuentes por idiomas
La etiqueta deja claro que opciones te ofrece, Google Fonts te da la opción de descargar las fuentes en cualquier idioma que elijas. Sin embargo, debes estar pendiente si deseas que tus letras tengan tilde, porque si no será doble trabajo.
Fuentes por el número de estilos
Las diferentes tipografías que encuentres en Google Fonts tienen la misma cantidad de estilos, pero no todas tienen variantes. Los estilos de las fuentes se distinguen por la inclinación, la anchura y el peso. Pueden ser finas, gruesas o cursivas. Entre las opciones están:
- Thin
- Thin Italic
- Extra-Light
- Extra-Light Italic
- Light
- Light Italic
- Regular
- Regular Italic
- Medium
- Medium Italic
- Semi-Bold
- Semi-Bold Italic
- Bold
- Bold Italic
- Extra-Bold
- Extra-Bold Italic
- Black
- Black Italic
Fuentes por espesor, grosor e inclinación
En el final de los filtros de búsqueda encontrarás está opción con tres subcategorías donde podrás buscar una fuente por su espesor, inclinación o grosor.
Combina las fuentes
Si pensabas que elegir una fuente era complicado, imagínate combinar dos en un solo sitio. Sin embargo, no será un problema con un Google Fonts, ya que te da la posibilidad de resolver el problema asesorándote correctamente.
Una de las principales formas de lograr una buena combinación es ir hasta la pestaña que que te indica cuales son las parejas más populares. También puedes utilizar el sitio web Font Pair que te ofrece aún más sugerencias.
Tipos de Tipografías de Google Fonts
Existen gran variedad de tipografías de Google Fonts, las más buscadas son:
- Comencemos por Alegreya es un tipo de letra con personalidad, que se puede colocar en los titulares de las informaciones digitales.
Una combinación visual perfecta puede ser Alegreya en el titular, y la letra Source Sans Pro para el cuerpo del texto.
- Luego viene otro tipo de letra conocida como Asap la cual tiene bordes redondeados, que puede utilizarse en el cuerpo del texto. Mientras que en el título se puede agregar flamenco, para hacer una combinación de impacto.
- Por otra parte, esta Lato que es una tipografía elegante, sencilla y tiene varias modelos. Puede utilizarse para títulos, y combinarse en el cuerpo del texto con la letra Merriweather.
- Asimismo, esta Roboto, que tiene 12 estilos diferentes, entre las más populares está Roboto Condensed y Robot Slab, esta tipografía se conoce por no tener adornos, ni pequeñas terminaciones o remates. Es ideal para titulares, y puede combinarse en el cuerpo del texto con nunito.
- Vollkorn se caracteriza por ser una letra prominente, que suele usarse en los titulares de publicaciones tanto escritas como digitales. Esta tipografía se puede combinar con Exo en el cuerpo de las publicaciones.
- Lora suele utilizarse para transmitir los estados de ánimo de una historia moderna, o de ensayo artístico. Funciona para el cuerpo del texto en sus presentaciones negritas, y normales. Puede combinarse en el título con Istock Web.
- Advent Pro tiene un estilo moderno y esta diseñada especialmente para webs. Funciona para títulos, y suele combinarse en el cuerpo del texto con Oxygen Light.
- Open Sans fue lanzada en 2011 tiene 5 pesos diferentes donde se incluye las cursivas. Es muy versátil, y se incluye mucho en las páginas web con sus 10 diferentes estilos. Generalmente esta tipografía se usa para títulos, mientras que para cuerpo del texto se usa Lora. Esta fuente fue optimizada para diseñados de impresión, páginas web y dispositivos móviles.
- Una tipografía muy elegante es Gentium la cual sirve para el cuerpo del texto. Gentium tiende a combinarse con Open Sans en los titulares.
- Josefin Slab tiene figuras geométricas, que suele utilizarse en los titulares, cabeceras y cuerpo de texto, lo cual le da un carácter multifuncional.
- A estas tipografías se une Ubuntu que tiene la peculiaridad de poder leerse con facilidad en internet, razón por la cual está tomando gran popularidad.
- Arvo es una fuente que puede quedar bien en la impresión de diseños y pantallas digitales, gracias a sus formas que llaman la atención por tener detalles clásicos.
- Otra fuente que tiene gran protagonismo es Abril Fatface por mantener un juego entre líneas finas, y gruesas que puede usarse en carteles publicitarios.
- Abril Fatface incluye 18 estilos para pantalla y texto, considerándose una de las fuentes con más diversidad que existe en Google Fonts.
- Para textos pequeños, Patua One es ideal por sus curvas sutiles que mejoran la legibilidad.
- La tipografía Karla suele usarse para que los diseñadores consigan imágenes minimalistas.
- Concert One es otra de las fuentes más utilizadas, aunque solo tiene un estilo, se trata de una letra redondeada y grotesca que la hace una buena opción para encabezados.
- Prompot es una fuente reciente que ha logrado posicionarse entre las populares, con sus 18 estilos, es otra de las ofertas que tiene Sans Serif, al igual que la fuente Work Sans, solo que esta última la optimizaron para que se pueda utilizar en cualquier pantalla.
¿Cómo descargar e instalar fuentes de Google Fonts?
- Busca y selecciona la tipografía: Cuando ya elijas la tipografía que quieres utilizar debes hacer clic en el símbolo “+” que estará a la derecha de los títulos de las fuentes. Luego aparecerá en la parte inferior de la pantalla un banner desplegable que te indica que familia seleccionaste.
- Cuando realizas este procedimiento puedes añadir y quitar tantas fuentes como quieras y esa información se actualizar en el banner. Es igual que añadir elementos a un carrito de compras por internet.
- Descargar la tipografía: Cualquiera de las fuentes puedes descargarlas e instalarla en el ordenador. Es un paso fundamental para que logres diseñar tu página con la tipografía que quieres. Cuando ya estés seguro de la opción que quieres debes hacer clic sobre el banner que te mencionamos anteriormente y accede a la información y las opciones adicionales.
- Seleccionar el método para embeber la tipografía en tu web: Cuando aparezca la pestaña embed en el banner puedes seleccionar entre dos métodos para lograr embeber la tipografía en tu web. Tendrás el método HTML estándar y el método @import de CSS.
- Copiar y pegar el código: Debes copiar un código que aprece en la ventana de código y luego debes pegarlo en el <head> de tu archivo html.
- Usa la tipografía en tu CSS: Ya por último solo debes llamar a la fuente desde tu CSS como normalmente lo haces.
Plataformas para probar fuentes de Google Fonts
Para tener una idea de cómo te quedará las fuentes que escogistes Google Fonts te recomiendo utilizar las siguientes plataformas que te ayudarán con esta tarea:
Type Hero
Es una herramienta que permite buscar fuentes de Google, y añadirle texto y color. Esta herramienta nos permite visualizar como quedarán las tipografías en WordPress.
Better Font Finder
Esta herramienta tiene la peculiaridad de mostrar similitud visual entre 70 fuentes. Es una herramienta diseñada por Mattthew. Acá el enlace https://bit.ly/2qHrXyJ
Google Font Previewer for Chrome
Dentro de sus bondades permite visualizar como quedan las tipografías, pero directamente de la página web que será lanzada. Por esta vía puedes ingresar en la plataforma: https://bit.ly/1bTdq2Z
Beautiful web type
Tiene como novedad un catálogo de letras más amplio y con ejemplos, lo cual permite visualizar mejor la tipografía. https://bit.ly/2kw0qlW
Son múltiples los tipos de letras que existen en Google Fonts la idea es ir buscando la que más convenga según el medio por donde se transmitirá los cuales pueden ser escritos, online o en dispositivos móviles. La idea es que busques siempre legibilidad e impacto.