La tipografía es uno de los elementos más importantes de un blog. Ya que normalmente un blog se compone principalmente de textos, es conveniente utilizar una tipografía legible pero al mismo tiempo atractiva, que haga destacar y resaltar tanto el texto escrito como el diseño general del blog. Existen infinitas tipografías, muchas de ellas de pago. Pero si queremos mejorar el aspecto de nuestro blog sin gastar un euro, podemos recurrir a las Google Web Fonts, más de 600 fuentes tipógraficas que Google pone a nuestra disposición para utilizar en cualquier página web de una manera sencilla. Veamos como se hace.

Seleccionar la fuente a utilizar

Nada más acceder a Google Web Fonts veremos que ya nos muestra una selección de tipografías con una frase de ejemplo en cada una. Esa frase podemos modificarla a nuestro gusto y también seleccionar la vista de Párrafo (Paragraph) para obtener una visión más detallada. Ajustaremos también el tamaño (Size) a aquel que consideremos más legible.

Google web fonts 1

En la columna de la izquierda hay un desplegable de categorías, donde podemos filtrar las fuentes según su tipo. A mi me gustan sobre todo las tipografías sans-serif. Desmarcaremos las categorías que no nos interesan y reduciremos así el número de fuentes a inspeccionar. También podemos filtrarlas por grosor, ancho u oblicuidad.

Una vez hecho esto podemos ir recorriendo las tipografías y pulsando el botón Add to Collection en aquella o aquellas que queramos usar. Como ejemplo, he seleccionado la tipografía Open Sans, una de las más bonitas y usadas ultimamente.

Seleccionar los estilos y juego de caracteres

Google web fonts 2

Una vez que hemos seleccionado una o varias tipografías tenemos dos opciones: revisarlas, pulsando en el botón Review, o usarlas directamente, pulsando en el botón Use.

Pulsaremos el botón Use y ahora debemos elegir el estilo o estilos que queremos usar. Podemos seleccionar todos los que necesitemos. A la derecha veremos un indicador que nos dice el impacto que su uso va a tener en la velocidad de carga de la página.

Google web fonts 3

A continuación elegiremos también el juego de caracteres. En el caso de que escribamos en castellano debemos elegir Latin Extended.

Si os fijáis en la parte superior derecha, sobre el indicador de impacto en la web, hay un enlace que nos permite descargar también la tipografía para usarla en nuestro ordenador.

Incorporar la tipografía al blog

Google web fonts 4

A continuación veremos un recuadro en el que se nos ofrece un código que debemos añadir al blog. En el caso de la fuente Open Sans el código es este:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Para incorporarlo debemos editar el archivo header.php del theme de WordPress que estemos usando y pegar el código entre las etiquetas <head></head>.

A continuación nos proporcionará el código CSS para aplicar a los estilos del blog. Por ejemplo, si queremos aplicar la tipografía a los títulos de los posts en nuestro blog debemos editar el archivo style.css del theme que estamos usando y añadir:

h1 { font-family: ‘Open Sans’, sans-serif; }

Eso sí, teniendo en cuenta que antes debemos buscar en código de style.css la etiqueta que vamos a modificar, en este caso los h1, y sustituir la fuente tipográfica por la nueva que vamos a incorporar.

Hecho esto y tras recargar nuestro blog en el navegador deberíamos ver ya la nueva tipografía en aquellos elementos a los que la hayamos aplicado.

Encontrando emparejamientos de fuentes

Pero que pasa si queremos utilizar también otra tipografía para el texto de los posts. Hay que tener cuidado pues no todas las tipografías casan bien. Pero Google también nos ofrece una herramienta que nos sugiere emparejamientos de tipografías.

Google web fonts 5

Para usarla debemos hacer clic en el botón pop-out de la fuente que hemos usado para los títulos. Luego elegiremos la pestaña Pairings, y ahí podemos ver varias opciones de emparejamiento adecuadas. Por ejemplo, para la Open Sans Google nos recomienda emparejarla con Oswald, Droid Sans, Droid Serif, y algunas más.

Google web fonts 6

Simplemente debemos apuntar el nombre de la elegida, y volver a repetir el proceso desde el principio para usar esa tipografía.

  • Compártelo en:

Descubre más desde La Brújula Verde

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Something went wrong. Please refresh the page and/or try again.