el interfaz de Google Fonts en el curso de programación desde cero de Incoming Startup
comment 0

Curso de programación web desde cero: Clase 7 – Como usar Google Fonts

(Lo lees en 07: 11)

Fuentes y tipografía

Después de varias clases definiendo y entendiendo una de las claves para la maquetación web, cómo es el modelo de caja, ahora comenzamos a tratar otra de las claves: la tipografía.

La tipografía en la web es un tema tan extenso que tendremos que dividirlo en las siguientes partes:

– Parte 1: Cómo usar fuentes desde Google Fonts
– Parte 2: Instalación de fuentes propias
– Parte 3: Dimensiones dinámicas, em y rem
– Parte 4: Iconos como fuentes
– Parte 5: Ejemplos de uso

En la clase de hoy empezaremos con la parte 1, sobre cómo instalar fuentes desde Google Fonts, mientras que el resto de partes las veremos en varios posts más adelante.

Hace unas semanas, vimos una pequeña introducción a la tipografía web. No estaría mal darle un vistazo rápido antes de empezar, en este enlace.

Introducción

A pesar de lo que en un principio se pudiera pensar: la web es ante todo texto. Si. Ya sé que la web es muy multimedia, mucha imagen, videos, slider, etc. Pero si algo abunda en una web, es texto, y una de las cosas que más tenemos que cuidar en nuestra maquetación web es el texto.

Mira este ejemplo con la web de EL PAIS.

Como puedes ver, la versión digital de este periódico comparte en su home un montón de noticias. Casi la totalidad de las noticias tienen una imagen que las representa. Y podemos ver como cada noticia tiene una jerarquía en función de la relevancia e importancia de la noticia.

portada digital de El Pais

Portada digital de El Pais

Pues bien, presta atención como, esa relevancia de cada noticia, quien realmente la produce es el texto con su jerarquía entre títulos, subtítulos y contenido. Basta con examinar la web sin imágenes.

Portada digital de El Pais sin fotos

Portada digital de El Pais sin fotos

Por cierto, para esto he usado un complemento del navegador Chrome, que se llama Text Mode, y puedes descargar de aquí.

Esta es la representación gráfica de la importancia que tiene el texto en la web, y es por ello que debemos cuidarla y darle la atención que realmente merece.

Fuentes por defecto

Y lo primero es usar fuentes personalizadas, ya que cada navegador, tiene una fuente predeterminada en su hoja de estilo.
Por ejemplo, si creamos un html, con un h1, un h2, y un párrafo con texto falso, así quedaría nuestro html:

El html con el h1, h2 y el p

El html con el h1, h2 y el p.

Y así lo renderiza Chrome:

Renderizado de Chrome de nuestro html

Renderizado de Chrome de nuestro html

Si inspeccionamos esos elementos vemos que la fuente de todos los elementos es Times (en este caso Times New Roman), el tamaño es de 32 px para h1, de 24 px para h2 y de 16px para p. También observamos que el peso de cada elemento es bold para h1 y h2 y normal para p.
Es decir, el CSS sería algo parecido a esto:


h1{
	font-family: "Times New Roman”;
	font-size: 32px;
	font-weight: bold;
}

Con font-family podemos indicar que familia tipográfica usamos, con font-size indicamos el tamaño fijo en pixeles, y como font-weight indicamos el grosor de la misma.

Veamos ahora lo que ocurre cuando usamos normalize.css. Si no recuerdas lo que era, puedes consultarlo aquí.

<link rel="stylesheet" href="normalize.css">

Observa ahora como ha cambiado el estilo anterior:

Renderizado del texto después de normalize. Ahora es Helvética.

Renderizado del texto después de normalize. Ahora es Helvética.

Como puedes ver ahora, nuestra fuente es una Sans-Serif, Helvética en este caso, y cambian los tamaños.

Lo más normal es que para poder realizar nuestro proyecto, necesitemos otras fuentes, y para ello podemos utilizar servicios en línea como Google Fonts o instalar directamente nuestras fuentes para que sean cargadas en nuestros CSS u hojas de estilo.

Personalizando nuestra fuente con Google Fonts

Lo primero es acceder a la web de Google Fonts.

Home de Google Fonts

Home de Google Fonts

El interfaz

No nos vamos a detener demasiado en el interfaz de Google Fonts. De hecho es bastante sencillo e intuitivo. Como puedes ver en la imagen, podemos diferenciar 3 zonas:

El interfaz de Google Fonts

El interfaz de Google Fonts

A.- En la barra de búsqueda puedes buscar por una fuente determinada. También gracias a su sistema de filtros puedes ir buscando fuentes por familias y tipos.

B.- Es la representación de las fuentes elegidas. Por defecto están las fuentes más descargadas o usadas por la comunidad. Hay cuatro pestañas horizontales para elegir el tipo de previsualización de la fuente elegida.

C.- En la parte superior derecha está la zona que nos importa para esta clase, los botones de descargar y enlazar. El botón de descargar es bastante evidente lo que hace, descargas la familia para poder usarla de forma local en tu ordenador. Pero a nosotros nos interesa la opción de enlazar.

Enlazar sirve para que, mediante una petición web, podamos cargar una determinada fuente en nuestra página web. De esta manera, no tenemos que “almacenar” la fuente en nuestro servidor y podemos construir páginas más rápidas de cargar, más ligeras.

Cabe decir, que cada familia de fuentes que enlazamos será una petición distinta a los servidores de Google, por lo que más tardará en cargar nuestra página web.

Enlazando la fuente elegida a nuestra página

Para nuestro ejemplo vamos a utilizar Open Sans, la más usada por los usuarios del servicio de Google Fonts según la propia plataforma.

1- Pulsamos el icono de “quick use” que hay en el interior de la ventana de Open Sans.

Eligiendo fuente en Google Fonts para su uso

Eligiendo fuente en Google Fonts para su uso

2.- Ahora elegimos los font-weight que vamos a usar. A la derecha puedes ver una especie de velocímetro. Cuantos más tipos de font-weight elijamos, más tardará nuestra página en cargar. Es importante tener esto en cuenta.

Eligiendo pesos de la fuente para enlazar

Eligiendo pesos de la fuente para enlazar.

3.- Para nuestro ejemplo vamos a elegir Light 300, Normal 400, y Bold 700. Una vez elegida, haciendo un poco de scroll hacia abajo vemos 3 tipos de inserción de la fuente en nuestro código: standard, import y javascript.

Código o snippet para enlazar la fuente al html

Código o snippet para enlazar la fuente al html.

En nuestro caso vamos a copiar el pegar el código que aparece en standard, y lo pegamos en el head de nuestro html:

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

Y ya tenemos enlazada la fuente en nuestra página.

Usando nuestra fuente ya integrada

Es importante tener en cuenta el orden en el cual enlazamos nuestras hojas de estilo. En mi caso este es el orden en el que se cargarán de forma eficiente una a una: primero normalize.css para poder homogeneizar estilos en todos los navegadores, un buen punto de partida para nuestros estilos, después enlazamos la fuente de google fonts, y por último, con las fuentes disponibles, enlazamos un style.css donde haremos uso de esa fuente.

El estilo debe cargarse en su orden

El estilo debe cargarse en su orden.

Una vez integrada la fuente, si queremos que la familia esté disponible en todo nuestro html podremos ponerlo en el body en nuestra nueva hoja de estilo:

body{
  font-family: 'Open Sans';
}

Como recordarás, hemos enlazado 3 pesos de fuentes. Vamos a usarlos en nuestro ejemplo. Para el h1 vamos a usar bold, para el h2 vamos a usar la normal, y para el párrafo la fuente Light, para ello basta con:

h1{
  font-weight: 700;
}

h2{
  font-weight: 400;
}

p{
  font-weight: 300;
}
Open Sans renderizada en nuestro html

Open Sans renderizada en nuestro html.

Y ya tenemos nuestra fuente usada y funcionando en nuestra página.
También podemos usar font-weight: bold; y font-weight: normal. El resultado es el mismo.

Conclusión

Como puedes ver es muy sencillo y rápido saber cómo usar Google Fonts, y enlazar fuentes interesantes en nuestras páginas web. Ya no hay excusa.

En la próxima clase del Curso de Programación Web desde cero de Incoming Startup seguiremos viendo tipografía, como por ejemplo, qué hacer si la fuente que queremos usar no está en Google Web Fonts.
Cualquier pregunta o sugerencia no dudes en utilizar los comentarios!

Nos vemos pronto.

Post Relacionados:

Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply