Tiempo de lectura: 3 minutos

La importancia de la tipografía en el diseño web

A estas alturas del partido a nadie se le escapa la importancia de escoger una tipografía adecuada en cualquier diseño, pero cuando hablamos de diseñar una web las implicaciones van un poquito más allá de la estética, por eso hoy quiero hablarte del uso de Google Fonts en WordPress.

Tipografía y rendimiento web

En los albores de internet, las personas que se dedicaban a esto del diseño web utilizaban «web safe fonts» o «tipografías seguras», es decir, las tipografías que vienen instaladas por defecto en cualquier equipo: arial, verdana, times new roman… ¡incluso comic sans! Esta era la forma más sencilla de asegurarse de que las personas usuarias podrían visualizar correctamente el sitio web, tal y como se había diseñado.

Obviamente, esto suponía unas limitaciones de diseño que era necesario subsanar, y comenzaron a utilizarse soluciones un tanto ortopédicas, como pequeños fragmentos de Flash (a cascarla el rendimiento) o sustituir los párrafos por imágenes (la pesadilla de cualquier SEO).

Hoy en día, de forma muchísimo menos aparatosa, podemos alojar las fuentes en nuestro servidor o integrar bibliotecas de fuentes a través de pequeñas líneas de código en nuestro sitio web.

¿Qué hay que tener en cuenta para escoger una tipografía?

• Legibilidad
  No te olvides nunca de que el objetivo principal de cualquier texto es que lo lean, así que no compliques la experiencia de tus personas usuarias con tipografías recargadas.
• Tu público y tus objetivos
  Al igual que los colores, las imágenes y las propias palabras, las tipografías evocan emociones diferentes. Por eso, dependiendo de a quién te dirijas y qué quieras contarle, habrá tipografías que se adecuen más o menos a tus necesidades, pero eso merecería su propio post.
• Versatilidad
  Escoge una familia tipográfica que tenga la mayor cantidad de variantes posibles: que si thin, que si regular, que si bold, que si extra bold, que si italic, que si italic bold… Esto te va a poner mucho más fácil establecer una jerarquía visual en el texto sin perder cohesividad en el diseño.
• Caracteres especiales
  Aunque a veces se nos olvida, no en todos los idiomas se utilizan eñes y acentos, así que antes de comprometerte con una tipografía comprueba que tiene todo aquello que necesitas.
• Licencia
  Asegúrate de que la fuente escogida tiene licencia para el uso que quieres darle, no te metas en un lío a lo tonto. Ç

Google Fonts, ¿qué es y cómo me puede ayudar?

Google Fonts es un repositorio de fuentes de código abierto que vas a poder integrar en tu web en un tris. Algunas de sus ventajas son:

• Compatibilidad
  No vas a tener que preocuparte por si la fuente escogida va a verse bien o no en todos los dispositivos, estas fuentes son compatibles con casi todos los cacharros, tamaños de pantalla y lenguajes de programación.
• Variedad
  A día de hoy Google Fonts cuenta con casi 1500 fuentes repartidas entre serif, sans serif, display, handwritting y monospace. Además, para cada fuente tendrás información acerca de los caracteres especiales que incluye y los idiomas que soporta.
• ¡Es súper fácil de usar!

¿Cómo integrar Google Fonts en una web?

Si utilizas constructores como Divi o Elementor no tienes que preocuparte por nada, ya que la biblioteca de fuentes de Google Fonts viene integrada, con lo cual sólo tendrás que configurar las fuentes que quieras utilizar en tu personalizador de temas.

Pero si el constructor o tema que utilizas no trae Google Fonts de serie tienes un par de opciones igual de sencillas y rápidas.

• Puedes añadir la API de Google Fonts al header de tu web, es una pequeña línea de código que te permitirá utilizar cualquier fuente del repositorio, pero aquí te lo explican mejor que yo 👉 ¿Cómo usar Google Fonts en mi sitio web?
• Si el código no es lo tuyo o te da un poco de respeto (merecido), puedes utilizar un plugin como este de aquí 👉 Google Fonts Typography

Otro día te enseño algunas combinaciones tipográficas de Google Fonts que me encantan y estoy deseando usar en los proyectos web de 2023 😉 Aunque si te pica la curiosidad puedes cotillearlas en mi cuenta de Instagram

¡Hasta pronto!