Saira Design - Tu web de diseño gráfico
  • Siguenos en Twitter
  • Siguenos en Facebook
  • Siguenos en Pinterest
NUESTRO BLOG
JULIO
13
2013
La tipografía en entornos web…una ayudita nunca viene mal (de postre hoy tenemos Ecología).

Muchas veces a la hora de enfrentarnos a un proyecto web, la elección de la tipografía a emplear es un factor clave a la hora de abordar el diseño. Pero…¿cómo saber si la tipografía que vamos a usar se ve bien en un entorno HTML?, porque cuando hacemos el diseño en Photoshop, Illustrator, Fireworks o similar estos problemas no suelen aparecer y sí cuando llevamos estas páginas a la "vida real" del HTML+CSS

La tipografía en entornos web

Y como siempre hay gente altruista, he encotrado esta pequeña maravilla que Tim Brown ha realzado para que todos podamos comprobar cómo quedaría nuesta tipografía elegida en un entorno web.

Para ello sólo hay que seguir unos sencillos pasos perfectamente explicados en Web Font Specimen (está en inglés pero es fácilmente entendible), en donde puedes acceder al archivo comprimido y bajártelo. En la carpeta encuentras tanto las instrucciones de uso –README-, como el documento HTML y los CSS con los diferentes estilos creados.

Es tan sencillo como cambiar la tipografía predeterminada en las propiedades del documento, sustituirla por la que quieras comprobar y se aplicará en todos los estilos CSS creados, por lo que fácilmente podrás comprobar si la tipografía que has elegido es adecuada o no para la Web y dependiendo de qué estilos.

El ejemplo está creado con la tipografía Georgia y muestra diferentes tipos de listas y distintos tamaños. Comparaciones de tamaños y cuerpos, tamaños CSS y altura de línea, muestra de glifos, diferentes tamaños con mayúsculas, el texto en escala de grises, de luz sobre el texto oscuro y variedad de combinaciones de colores.

La verdad es que me parece un trabajo exhaustivo y bastante completo que nos facilita mucho a la hora de examinar la utilización de cualquier tipografía.

Como dice Tim “Todo lo que queda por hacer es probar el resultado y decidir por ti mismo si la tipografía que quieres es aceptable en sistemas operativos y navegadores”.

También recomiendo la lectura del artículo Real Web Type in Real Web Context, del mismo autor.

…y ya que estamos con temas de tipografía, no todo va a ser CSS y entorno web que a muchos os parece un "turronazo" pero es que uno habla de lo que le tira. Bueno, la otra cosa que quería comentar aquí es que los diseñadores también ponen su granito de arena para cuidar el medio ambiente y fruto de esto es el trabajo del estudio SPRANQ que ha desarrollado la ¿primera? tipografía ecológica y la ha cedido gratuitamente a todo aquel que quiera utilizarla. ¿Por qué esta tipografía es ecológica?, porque gracias a su diseño se ahora un 20% de tinta de impresora (bueno, eso dicen sus autores). ¿Cuántas veces hemos visto eso de "no imprimas este mail salvo que sea necesario" o "salva un árbol, lee en digital". Pues para cuando no te queda más remedio que tirar de impresora, estos chicos han creado una tipografía de tipo recto parecida a la Arial (o Helvetica para los puristas del diseño).

La tipografía es gratuita, está disponible tanto para Mac como para PC y puede descargarse aquí

Para que luego digan que lo que es gratis no merece la pena

ARCHIVO

ÚLTIMIOS TWEETS