Tipografía en diseño web

tipografias en la web xoo studio

Ay, que majo ese momento de elegir las tipografías para tu nuevo diseño web.

Descubres una Serif preciosa desde tu mac. Te haces ilusiones de poder utilizarla en tu nuevo y flamante diseño web. Peeeero, antes de usarla pasas a verla por un pc que navega con Firefox, por eso de comprobar que se ve igual de fantástica y entonces: ¡Nooooo! ¡Se ha convertido en una fuente roída y de definición pésima!

Bien, antes de ponernos esquizos y correr como pollo sin cabeza por el estudio hay que seguir dos sencillas normas:

  • NORMA Nº1- Saber qué tipografía elegir. Luego comentamos algunos aspectos esenciales.
  • NORMA Nº 2- Aceptar que tenemos un problema de limitación tecnológica. Los navegadores y sistemas operativos interpretan las fuentes de forma distinta. Dale la culpa al motor de renderización, al filtro gráfico, e incluso al propio usuario que ha decidido cambiar el tamaño de la fuente (“la pongo más grande, que así se ve mejor”). Pero no podemos tener el control absoluto de visualización. Toca fastidiarse.

typeweb-1-mmm-copia

(Chrome vs safari FOTO de http://clagnut.com/)

Daremos por asumida la norma número 2 así que nos centraremos en elegir bien nuestra tipografía web. Empezamos.

DÓNDE ENCONTRAR TIPOS PARA WEB

Tenemos 3 opciones

A) Fuentes del sistema operativo, gratuitas. Son las fuentes que nunca darán problemas y todos conocemos pero que también tenemos muy vistas: Georgia, Verdana, Tahoma (Gracias Matthew Carter, por diseñarlas) Impact, Arial, Times New Roman..

B) Webfonts que podemos comprarlas a fundiciones o distribuidoras como Lynotype https://www.linotype.com/es/, Fontfont https://www.fontfont.com/, House Industries http://www.houseind.com/… o alquilarlas por un tiempo mediante suscripción como proponen desde Typekit https://typekit.com/.

typeweb-KIT-mmm-copia

C) Google Fonts. La alternativa más utilizada, no por ser la mejor, sino por ser gratuita. Por cierto, renovaron recientemente su interface y es muy práctica. https://www.google.com/fonts

typeweb-4-mmm-copia

Existen centenares de posts sobre las mejores Google Fonts. Así que por no hacernos pesados, os dejamos algunos de los muchísimos links que podéis encontrar por ahí y no aportaremos la enésima short list.

https://www.typewolf.com/blog/most-popular-fonts-of-the-year

http://www.esandra.com/20-fuentes-gratis-excelentes-para-diseno-web/

https://webdesignersjourney.wordpress.com/2013/06/12/10-great-modern-google-font-combinations/

CÓMO ELEGIR UNA TIPOGRAFÍA.

Ahora que ya sabemos dónde ir a buscar las tipografías, hay que elegirlas. Elegir una tipografía tiene mucho de emocional, pero hay que prestar atención a que se lea bien, no canse, aguante cuerpos pequeños… Lo ideal es elegir dos, máximo tres tipografías para nuestro diseño web, que generen contraste. Crear con ellas jerarquías que ubiquen al usuario (titular, subtitular, texto genérico…) es imprescindible.  La tipografía forma parte del branding así que como buenos profesionales intentaremos no cometer barbaridades en nuestro diseño web. Aquí van algunos consejos:

1.- MIRA LA TIPOGRAFÍA EN DISTINTOS TAMAÑOS

Eliges una tipografía, la ves primero a un tamaño de cuerpo generoso.

Funcional, moderna, versátil, sí; pero recuerda verla también a un cuerpo pequeño. No olvides que la tipografía en píxel no es la misma que en papel. Te evitarás disgustos.

2.-ASEGURATE QUE LA FUENTE TIENE TODAS LAS VERSIONES QUE NECESITAS.

Parece obvio, pero nos emocionamos a veces con una tipografía y debemos asegurarnos que la familia sea completa. Montserrat, es por ejemplo una sans serif moderna de look fresco y que enamora a simple vista. Podrás usarla en titulares, menús o texto genérico, pero jamás ponerla en cursiva. La versión itálica no existe, y es una lástima.

typeweb-6-mmm-copia

3.-COMBINA TIPOGRAFÍAS DE FORMA COHERENTE

Damos por hecho que sabremos combinar tipografías. Pero para los no profesionales, una herramienta interesante que ofrece Google Fonts es la lengüeta de “pairings”. Allí puedes ver tipografías complementarias con las que combinar tu fuente.

pairings

 

Os dejamos también un link interesante de Themearmada http://blog.themearmada.com/8-amazing-google-font-combinations/ donde combinan distintas tipografías de Google fonts.

4.- HERRAMIENTA AMIGA:

NORMA Nº2. DESPUÉS DEL FASTIDIO

Hemos aceptado que los navegadores y sistemas operativos nos fastidien, ok. Pero una cosa es aceptarlo a conciencia y la otra mirar hacia otro lado. Antes de lanzar cualquier página web os recomendamos chequearla en los distintos navegadores y sistemas. Si las variaciones no son significativas, avanti. Si los cambios son abismales, siempre podremos corregir el estilo, afinar los cuerpos o elegir otra tipografía parecida que se comporte mejor.

Así que…“Diós del html, si, ya sé que eso del flash y el java te ocupó mucho tiempo pero podrías evolucionar el tema tipografía web un pelín más? Venga, ya cuando lo tengas, nos avisas y lo contamos en Xoot

More from Montse Machuca

Tipografía en diseño web

Ay, que majo ese momento de elegir las tipografías para tu nuevo...
Leer más