Guía de Google Fonts para mejorar el diseño de tu página web

Si no conoces el poder de Google Fonts, es que no has prestado mucha atención a tus landings. Ni mucho menos a los elementos que las forman.

Si lo haces bien, la tipografía puede ser un arma tremendamente útil en tus diseños. De hecho, existe para dar forma al contenido, revela la relación entre los elementos y te dota de personalidad.

¿Por qué entonces, teniendo una herramienta a tu alcance como es Google Fonts, ibas a ignorarla?

La elección de la tipografía correcta siempre refleja las necesidades específicas de cada proyecto o campaña. Y esas necesidades no solo son estéticas, sino que también son técnicas y funcionales.

Algunas fuentes funcionan mejor en los titulares y otras en párrafos. Algunas familias de fuentes son lo suficientemente grandes como para incluir scrips y caracteres especiales. Y si las fuentes vienen en una variedad de estilos diferentes como cursivas o mayúsculas, proporcionarán más herramientas para ajustar el diseño a la medida que tu landing requiera.

Pero, ¿sueles tener en cuenta este elemento a la hora de optimizar tu sitio web? ¿Tienes en cuenta estas consideraciones? ¿Piensas en lo práctica o no que resulta una fuente?

Solo si lo haces encontrarás la ideal para todos tus diseños.

¿Qué es y cómo funciona Google Fonts?

Lo primero que debes saber es que para utilizar Google Fonts en los diseños de tu sitio web, necesitas conocer HTML y CSS.

De hecho, lo más recomendable es que aprendas a incluir hojas de estilo CSS externas a un documento HTML, conozcas las propiedades para definir la familia y el estilo de la fuente. Y además, sepas también de qué manera se importan esas hojas de estilo y los archivos de fuente externo a través de @import y @font-face.

Tras esta aclaración, es el momento de profundizar en Google Fonts.

Se trata de una herramienta que pone a tu alcance fuentes gratuitas. De hecho, tienes a tu disposición nada más y nada menos que 850 tipografías diferentes.

Google Fonts se lanzó en 2011 y actualmente es una de las herramientas más importantes de los diseñadores web. De hecho, durante este periodo de tiempo, la plataforma ha vivido varios cambios.

Ahora cuenta con una interfaz muy fácil de utilizar y, sobre todo, muy visual. Lo que te permite encontrar todo tipo de fuentes y estilos de código abierto. Aunque lo mejor de todo es que puedes personalizarlas.

 Todo sobre el directorio de Google Fonts

Como puedes ver en la imagen, el directorio está únicamente disponible en inglés, aunque es muy intuitivo y está estructurado de la siguiente manera:

1. El menú superior está compuesto por:
   1. Directory o la página de inicio.
   2. Featured o fuentes destacadas.
   3. About, donde encontrarás respuesta a cualquier duda, además de documentación.
2. El panel de la derecha cuenta con las búsquedas. Que pueden filtrarse por categorías, idiomas, alfabetos o estilos.
3. En el mismo panel también puedes organizar los resultados que vayas encontrando de la siguiente manera:
   • Trending: en función de si quieres estar al tanto de las últimas tendencias en tipografías.
   • Popular: donde encontrarás las fuentes más populares.
   • Date Addedo: fecha en la que se ha creado esa tipografía.
   • Por orden alfabético.

Desglosando las categorías de fuentes

Google Fonts realiza una clasificación de fuentes en función de las cinco categorías principales:

1. Serif. Esta primera categoría hace referencia a las fuentes con serifa o remates. Es decir, los adornos que las letras suelen tener al final del palo. De hecho, la Times New Roman es el ejemplo más claro.
2. Sans Serif. Esta categoría reúne las fuentes sin serifa ni remates. Aunque quizás te suene más el término «palo seco«. El ejemplo más típico es la Arial.
3. Display. La categoría display es una de las más decorativas. De hecho, la legibilidad no es su punto fuerte, aunque sí lo es la exhibición. Lo más recomendable es que en tu sitio web no te acostumbres a utilizar estas fuentes, ya que no son favorables para la experiencia del usuario.
4. Handwriting. Son las manuscritas o caligráficas. En muchas landings puedes incluir fuentes de esta categoría de Google Fonts para simular el trazo humano. Aunque siempre que lo hagas evita que sea en el cuerpo del mensaje, ya que su legibilidad no es sencilla.
5. Monospace. Estas fuentes tienen el ancho de las letras iguales y se utilizan en código de programación, por ejemplo.

Lo más recomendable para optimizar tu sitio web es que escojas las fuentes que mejor se entiendan y tengan una mayor legibilidad. Las decorativas y manuscritas, por ejemplo, puedes dejarlas para ocasiones especiales.

Conociendo los estilos

Para conocer más a fondo Google Fonts, deberías saber que dentro de una misma fuente existe más de un estilo y variante. Aunque la propia herramienta te ayudará a realizar todo tipo de búsquedas en función de tres criterios:

1. Thickness. Se trata del grosor o del peso que tiene el trazo de una letra. Por lo que, como puedes imaginar, se divide en «Fina, Normal y Negrita«. Y además, se corresponde con Font-weightde CSS. Esto quiere decir que pueden personalizarse los grosores de fino a grueso.
2. Slant. Hace referencia a la inclinación que toma el trazo. Puedes encontrar la inclinación normal, que es la vertical, las cursivas o itálicas y las oblicuas. En CSS se corresponde con font-style.
3. Width. Ya has conocido el grosor y la inclinación de las fuentes de Google Fonts, por lo que queda la anchura, que lo define el estilo «Width«.

¿Cómo puedo hacer una buena elección con tantas opciones?

Ahora que has visto todo el potencial de Google Fonts, quizás tu duda radique en el tipo de tipografía que convendría más a tu negocio y a tu sitio web en concreto.

No todas las fuentes valen para lo mismo. Elegir bien las tipografías para web puede marcar la diferencia de tu espacio digital. Por eso, deberás probar cuál es la que mejor te conviene para combinarla con el diseño que elijas, teniendo en cuenta que lo más importante de las tipografías es su legibilidad.

Pero antes de lanzarte a probar todo tipo de letras para los diseños de tus landings, tienes que tener claros ciertos aspectos que son clave.

• Antes de nada, plantea qué dirección toma tu campaña o cómo es tu público objetivo.Tendrás que buscar una tipografía que esté acorde a su estilo y que cuente con unas características que, además, te representen a ti como empresa.
• Procura no saturar al usuario ni a tu sitio web con demasiadas tipografías. Lo más recomendable es que emplees, como mucho, dos familias de letras que además, se complementen entre sí. De esta manera mantendrás la coherencia y el orden en tu sitio web.
• Una de las mejores recomendaciones a la hora de lanzarte a Google Fonts es que hagas pruebas. Puede que a ti te guste mucho una tipografía pero que no cale bien entre tu público potencial. Asegúrate de que realmente funciona y atrae.
• Ante todo, escoge tipografías que sean fáciles de leer y de entender. El dilema viene ahora. ¿Es mejor utilizar una letra con serif o sin serif? Como sabes, las letras con serif tienen una terminación bastante decorativa como la Times New Roman, y suele emplearse en textos largos. Por ejemplo, en un blog. Mientras que las letras sin serif están dirigidas, por lo general, a públicos más jóvenes.

¿Cómo usar Google Fonts?

El funcionamiento de esta herramienta es muy sencillo. De hecho, para poder descargarte o utilizar las fuentes en tu sitio web, solo tendrás que seguir estos pasos:

1. Accede a Google Fonts.
2. En la pantalla principal podrás ver algunas de las fuentes que están disponibles en el momento. De hecho, si quieres probarlas, podrás escribir encima y ver cómo quedan.
3. Por otra parte, también cuentas con la opción de personalizar la tipografía que hayas escogido cambiando el grosor o el tamaño, entre otros.
4. Si has personalizado a tu gusto la tipografía, llegarás al siguiente paso. Encontrarás un símbolo de «+» en la parte superior derecha. Tendrás que hacer clic ahí y saltará una pantalla en la parte inferior derecha con la tipografía final personalizada. Estará lista para usar.
5. Abre esa pestaña y tendrás acceso a la tipografía. Aunque desde ese mismo menú podrás acceder a nuevos movimientos.
   1. El primer movimiento consiste en realizar una descarga de la tipografía para tenerla en tu ordenador. De esta manera, podrás utilizarla en piezas externas de Photoshop u otros programas.
   2. El segundo movimiento te permite copiar el código e incluirlo en tu página web. Así le darás un toque más personal y con más personalidad a tus textos y tu diseño general.
6. Por otra parte, si lo que quieres es buscar una tipografía muy concreta, no tendrás más que ir al menú de la parte izquierda y jugar con las características mencionadas anteriormente hasta dar con ella.