Archivo de la categoría: Tipografía

Decora tu web con tipografías personalizadas gracias a Google fonts

Google Web FontsComo el título indica, dedico la entrada al maravilloso servicio Google Web Fonts del monopolista gigante empresarial Google, otro más de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipografía («fuente» para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para después utilizarla en nuestra página web sin necesidad de recurrir a «trucos CSS» ni alojando la tipo en nuestro servidor.

Para elegir seleccionamos la familia tipográfica, introducimos un texto modelo para visualizar el resultado y vamos escarbando en el listado. La aplicación nos permite trastear con determinados estilos, ver si dispone de tildes o ver cómo resultaría en un párrafo de texto corrido, incluso podremos seleccionar varias para comparar su uso.

¿Cómo incluyo las tipografías en mi web?

Google web fontsPara poder utilizar las fuentes a penas hacen falta unas nociones muy básicas de web. Cuando hemos seleccionado la o las tipografías que nos gusten, nos dará tres opciones:

  1. una simple línea de HTML con la etiqueta LINK para incluir en el HEAD
  2. un @import para incluir en nuestra hoja de estilos CSS
  3. un código JavaScript (viene con las etiquetas <script> para meter en el HEAD, pero puede apartarse a un .JS)

Mi consejo es utilizar la primera opción y no complicarnos la vida.

Como nuestra web ya tendrá localizado el elemento correspondiente a nuestra tipo de Google APIs, solo nos quedará asignar el estilo correspondiente a aquellos elementos que deseamos que aparezcan con la tipografía pertinente. Por ejemplo, si queremos que los títulos H1 tenga nuestra tipo escribiremos lo siguiente en nuestro CSS:

h1 {font-family: 'nuestratipo', sans-serif;}

Este código también nos lo facilitará Google, después lo aplicaremos al gusto.

Ventajas

page load

  1. Primero y ante la principal desventaja, que es lo que pueda tardar en cargar desde Google APIs mientras se carga nuestra web, la propia aplicación incluye un pequeño reloj que nos indica la repercusión que tendrá en la velocidad de carga
  2. Ahorraremos dolores de cabeza a la hora de incluir tipografías completas, antes era más caótico
  3. Es más cómodo para el cross-browser, solo deja de funcionar en navegadores desactualizados
  4. Evitaremos convertir textos en imágenes para subir títulos, mejorando la velocidad de carga, el SEO y ahorrándonos esfuerzo
  5. No ocupa espacio adicional en nuestro servidor (y el de Google no se cae (o sí, pero menos que el nuestro) y tiene un ancho de banda buenísimo)
  6. La exclusividad que supone tener elementos poco convencionales en nuestro espacio web

Estamos en Julio de 2012, seguro que el servicio sigue madurando (y como nos descuidemos lo integran en Google+), así que como última ventaja añadir que está en continuo desarrollo, cada vez hay más tipografías y mejor experiencia de usuario.