A los que ya tenemos algunos años (pero no muchos) y venimos de monitores mono-cromo e internet en modo texto, siempre nos ha gustado mucho cuidar un aspecto del diseño web sumamente importante:
Las tipografías o tipo de fuentes de texto que hemos de emplear.
Hasta hace bien poquito, cuando hacíamos y diseñábamos webs a base de html y poco más, nos centrábamos en escoger entre la Arial, o la Times New Roman, la Georgia… fuentes que estaban implantadas en casi todos los ordenadores y con las que debíamos «jugar» para dar forma a nuestros diseños.
Muchos de vosotros conoceréis esa parte en la vida de Steve Jobs en la que decidió apuntarse a clases de caligrafía y algo después con Macintosh romper con el formato único del tipo de letra que hasta 1984 ofrecían los ordenadores. Jobs introdujo el término «fuente» en el mundo del usuario de computadoras y de golpe mostró al mundo lo importante que era el empleo de ellas. Mostrar lo mismo con distintas tipografías no era lo mismo. De ahí a que IBM y Microsoft se subieran a éste carro hubo un plis.
Los que hoy en día nos dedicamos al diseño y programación de páginas web, y los que asesoramos a clientes sobre su web, concebimos las fuentes como un elemento esencial a tener en cuenta a la hora de darle forma a un nuevo proyecto. Los primeros bocetos (los mentales incluso) ya pasan por pensar en cómo distribuir los contenidos, cómo presentar la web a través de una home atractiva, que colores utilizar, y en qué tipografías acompañaran al conjunto.
Como en otros tantos aspectos de nuestra profesión, el trabajar con tipografías fuera de las standard, las que vienen instaladas por defecto en la mayoría de los ordenadores y dispositivos, es algo que se ha convertido en algo mucho más sencillo que cierto tiempo atrás.
Hasta hace bien poquito, si querías «salirte del tiesto» casi seguro que acababas cogiendo el camino del @fontface para css, descargando fuentes de distintos sitios web, asegurándote de que el código de tus css estuviera correctamente implementado, peleándote con los distintos formatos de archivo de esas fuentes (ttf, svg, eot…), y luchando para que todos los exploradores y aparatos reconocieran lo que tú intentabas trasmitirles. Si trabajas en crear webs con programación propia, sin ningún tipo de CMS detrás, así deberás seguir haciéndolo…
Sin embargo, si trabajas montando una web con WordPress tienes la indudable ayuda del repositorio de fuentes de Google Fonts. Hoy en día hay muchos themes (los premium o de pago prácticamente todos) que ya soportan de forma nativa el trabajar con Google Fonts, es decir, dentro de las opciones de configuración del propio tema están las de trabajar las tipografías y escoger cuáles montar para los headings (h1,h2,h3..), para el cuerpo de la web, títulos de los widgets, etc. Si tu theme no te permite estas opciones o son muy limitadas, puedes trabajar con algún plugin. Hay muchos, pero te recomiendo cualquiera de estos dos:
- Easy Google Fonts: Su nombre lo dice todo. Muy sencillo. Se instala y en su pestaña de opciones podrás manejar que fuente quieres utilizar en tus encabezados, si quieres utilizar las fuentes más gruesas o delgadas, colores de fuentes, fondos, altura de línea, espaciados entre letras.. como ves, muy completo, pero configurable en un minuto.
- WP Google Fonts: Igual de sencillo que configurar que el anterior y prácticamente con las mismas opciones. Tampoco es mala opción.
A día de hoy ya dispones de centenares de fuentes de todos los tipos (serif, sans serif, hand-writting, etc) totalmente gratuitas y a tu entera disposición.
Ojo!! Otra cosa que últimamente estoy descubriendo por ahí es la utilización abusiva de este recurso. Es decir, esa persona que ante tal arsenal de fuentes variadas y gratuitas se deja llevar y empieza a utilizarlas a diestro y siniestro sin demasiada coherencia. No perdamos la perspectiva, el fin debe ser crear algo elegante y que la utilización de las Google Fonts sea un añadido a nuestra página web. Igual que antes, hay que huir de tipografías enrevesadas, demasiado artificiosas, que dificultan su lectura y comprensión rápida. Como en otras tantas cosas, en el uso de tipografías hemos de poner la usabilidad web y la claridad de los contenidos por delante de todo.
Y ahora, qué tipografía utilizo para despedir ésta entrada?? … 🙂
Hasta luego!!