Cómo mejorar el diseño de tu web en WordPress usando Google Fonts

Si hay algo por lo que me encanta WordPress, es sin duda porque es una herramienta que está a la última y que te permite utilizar todos los avances que van saliendo en todo lo relativo al diseño web.

Es probable que muchas veces hayas tratado de cambiar el tipo de fuente de tu web y te hayas visto bloqueado por las limitaciones implícitas que tiene el lenguaje HTML.

Si no lo sabías, te lo cuento: por lo gneral cuando diseñas una página web en html puedes seleccionar el tipo de letra que quieras, el problema es que si la persona que visualiza tu web no tiene instalada ese tipo de fuente (o la tiene instalada con otro nombre), el resultado será diferente, ya que cada navegador suele sustituir las fuentes a su manera.

Para evitar estos problemas, se suele diseñar utilizando un grupo de tipos de letras genéricos que se encuentran prácticamente en todos los ordenadores. Dicho esto, queda claro que nos vemos un poco limitados en este aspecto a la hora de hacer más vistosas nuestras páginas web.

Para solventar este tipo de problemas, existe algo llamado Google Fonts, que utilizado junto a WordPress hará que nunca más tengas problemas de este tipo.

¿Por que deberías utilizar Google Fonts?

Google Fonts se ha convertido en uno de los recursos favoritos de todos los diseñadores web. No solo tienes disponibles más de 600 tipos de letra, sino que además son fuentes de libre uso, por lo que pueden ser utilizadas por todo el mundo sin tener que pagar por ello.

Los diseñadores que crean nuevas fuentes y tipos de letras, deben pasar por un proceso de selección previo si quieren incluir sus creaciones dentro de Google Fonts. Esto quiere decir que además de tener acceso a un montón de fuentes de forma gratuita, te aseguras de que todas son compatibles para su utilización en la web y que está completamente optimizadas.

Como te comentaba al principio del artículo, antes eran los usuarios los que tenían que tener instaladas las fuentes en sus ordenadores para que tu pudieras hacer uso de ellas.

Todo esto dejaba fuera del alcance del diseñador el aspecto visual de los textos de la web, ya que al no tener instaladas las fuentes, éstas eran sustituidas automáticamente por el navegador y si se utilizaban las fuentes estándar, al final todas las páginas tenían un aspecto muy similar.

La forma de proceder usando Google Fonts es diferente, ya que es el diseñador mediante el código el que selecciona qué tipo de fuente quiere utilizar y estas se cargan directamente desde Google Fonts, con lo que da igual si el usuario las tiene instaladas o no.

¿Cómo puedes utilizar Google Fonts con WordPress?

Al principio, si querías utilizar Google Fonts en tu página web tenías que modificar el código fuente de tu página, lo cual es un engorro si no eres programador o si no te apetece tocar el código fuente.

Por suerte, si utilizas WordPress esto resulta mucho más sencillo, ya que puedes descargarte el plugin Google Typography desde este enlace y tener disponibles todas las fuentes de Google Fonts en pocos minutos.

Gracias a este plugin puedes cambiar las fuentes de tu web en tiempo real y comprobar si el resultado del cambio te gusta o no sin tener que tocar una línea de código.

¿Qué tipos de fuente deberías utilizar?

Una de las grandes ventajas de Google Fonts, puede convertirse también en un inconveniente para ti. Estoy hablando del gran número de tipos de letra disponibles. Hay tantos que a veces resulta difícil encontrar un tipo de letra que quede bien con el diseño de tu página.

Las fuentes que utilices dependerán del diseño de tu web y del estilo que quieras darle a la imagen global. Ten en cuenta que las fuentes normalmente se utilizan para capturar la atención y el interés de los lectores, por lo tanto hay que utilizarlas con inteligencia y siempre teniendo este objetivo en mente.

Una cosa que hay que saber es diferenciar entre una fuente y un tipo de fuente. Una fuente es una colección de letras, números, símbolos, acentos, etc. El tipo de fuente se refiere al tipo de diseño y es una forma de clasificar las diferentes fuentes. Los más usuales son: Serif, Sans Serif, Handwriting y Display.

Existen otros tipos que se utilizan sobretodo en las imprentas, pero realmente los más importantes son los que te acabo de comentar.

¿Cómo diferenciarlos?

Los tipos Serif se caracterizan porque tienen una especie de rabillo al final de cada letra

Los tipos Sans Serif en cambio no tienen ese rabillo

El tipo Handwriting imita al tipo de letra escrito a mano

Y por último el tipo Display suele englobar tipos de letra extraños y decorativos

¿Como seleccionar entre estos diferentes tipos?

Yo te recomiendo que no utilices más de 2 fuentes distintas para toda tu web. Si utilizas más de dos puedes despistar al usuario y además crear una sensación descompensada que no es agradable a la vista.

Si utilizas 2 fuentes distintas, puedes utilizar una para los títulos y otra para los textos. De esta manera diferenciarás claramente los contenidos y tendrá más impacto visual.

Te recomiendo que vayas probando, ya que hay fuentes que funcionan muy bien para los títulos pero que en cambio se ven horribles si las utilizas para textos grandes. Ten en mente que el contenido siempre debe resultar limpio y fácil de leer.

Para terminar

Es posible que ya te hayas dado cuenta de que todo el tema de los tipos de letra es un asunto que realmente tiene su miga y que si no se le prestas la atención oportuna puede tener graves consecuencias en el aspecto estético de tu web.

Como te he comentado a lo largo del artículo, mi recomendación es que selecciones dos fuentes para tu página y utilizarlas de forma consistente en toda tu web. Es decir, los que los títulos siempre tengan el mismo formato y tamaño, lo mismo con los textos, etc. De esta forma la experiencia será mucho más agradable.

¿Ya utilizas las Google Fonts en tu página? ¡Cuéntame tus experiencias usando estos tipos de letras!