¿Cómo y por qué debes utilizar las Google Fonts en tu página web?

Cualquier negocio con presencia en Internet es consciente de la importancia que tiene contar con una página web completa, bien diseñada y optimizada. Lo que no todos tienen en cuenta es el buen uso de uno de los elementos que muchas veces pasa desapercibido; la tipografía.

La mayoría de sitios webs recurren a lo que se conoce como ‘web safe fonts’ o ‘tipografías seguras’, instaladas de forma predeterminada en los diferentes dispositivos. Se prefiere, así, asegurar que los textos de la web sean siempre legibles, en cualquier soporte o tamaño.

Sin embargo, existen muchas otras posibilidades, también seguras. Una de ellas consiste en recurrir a Google Fonts, para aprovechar todas las ventajas de usar una tipografía original y adecuada a tu imagen corporativa.

Influencia de la font o tipografía web: Factores clave

Mucho se habla de la importancia de la estructura y de los colores empleados a la hora de diseñar los contenidos y crear una página web, pero no tanto sobre las fonts.

Estas son las 5 principales cuestiones a tener en cuenta:

1) La legibilidad de la fuente

No solo el contenido influye en la legibilidad o, en otras palabras, en la facilidad con la que un texto es entendido y asimilado por los usuarios. También la tipografía permite que un determinado texto sea agradable, resulte interesante y fácil de leer.

2) El tamaño de las letras

El tamaño de la fuente es vital, pues la variedad de pantallas que los usuarios manejan hoy en día es inmensa. Ajusta su tamaño a todo tipo de dispositivos, así como para jerarquizar y marcar la importancia del contenido de la web.

3) El color

La psicología del color, junto a la psicología de la tipografía, son las claves de la configuración de textos óptimos en la página web de cualquier negocio. Estos son sus puntos más importantes:

• El uso en el texto (o en sus contenedores) de los colores corporativos.
• Los diferentes contrastes.
• La premisa ‘el texto más legible es el que se presenta en negro sobre fondo blanco’.

4) Los espacios en blanco

En relación con la legibilidad, encontramos la necesidad de insertar a lo largo de los textos de la web espacios en blanco, que son los que les permitirán ‘respirar’. Esto es clave sobre todo si se utilizan textos grandes o si se visualiza el contenido en un móvil.

5) La creatividad

Está claro que la tipografía que escojas para tu sitio web corporativo tiene que ir en consonancia con la personalidad de tu marca. Pero, más allá de este principio, no hay que olvidar que utilizar tipografías originales y creativas será determinante para que tú público lea lo que quieres contarles.

¿Qué es Google Fonts?

Google Fonts es un recopilatorio de fuentes o ‘fonts directory’, que además es de código abierto y puedes comenzar a integrar en tu web corporativa desde ya. Estas son sus cualidades:

• Compatibles: No deberá preocuparte no usar más ‘web safe fonts’, ya que las tipografías incluidas en el directorio de Google Fonts son compatibles en su mayoría con todos los dispositivos, tamaños de pantalla y lenguajes de programación.
• Gran variedad: Si accedes al directorio de Google Fonts, comprobarás la cantidad de tipografías disponibles. Además, tendrás disponibles informes de la velocidad de carga de cada una de las fuentes que elijas integrar en tu web.
• Fácil uso: consultar, escoger e integrar tipografías de Google Fonts en tu página web es un procedimiento muy sencillo.

¿Y cómo integrar Google Fonts en tu página web?

Existen más de 800 opciones entre las que escoger. Eso es lo que encontrarás si accedes al directorio de Google Fonts, y estos son los pasos a seguir para integrar una de sus tipografías en tu página web:

1) Acceder a Google Fonts

A primera vista, puede parecer abrumador el listado de fuentes disponibles, por lo que es recomendable que utilices los diferentes filtros para encontrar tu tipografía ideal.

2) Seleccionar una tipografía

Una vez que lo tengas claro y que hayas comprobado qué fuente es la que quieres (tienes muchas opciones de previsualización), deberás hacer clic en ‘Select this font’.

3) Copiar el código

En el apartado ‘Specify in CSS’, deberás copiar el código HTML proporcionado.

4) Pegar el código en la web

Una vez copiado en el portapapeles, para insertar la tipografía en tu web deberás pegar el código HTML entre las etiquetas ‘header’ de la misma.

5) Integración de la tipografía

Para terminar, integra la tipografía en el código a través de CSS, u hojas de estilo, escogiendo en qué lugares quieres emplearla.