Todo lo que es: La tipografía

En el diseño web existen muchas variables que determinan el éxito de un diseño. Los colores y las imágenes siempre han sido relevantes; pero la adopción del uso de tipografías en la web, más conocido como Typeface, ha potenciado notoriamente la forma de hacer sitios web.

Hasta ahora el uso de las webfonts, como las ha bautizado Google, ha permitido obtener resultados de mejor calidad en términos de diseño, así como tambien ha permitido hacer la diferencia entre sitios, mejorar la legibilidad y la lectura e inclusive darle una personalidad propia a cada sitio.

Por ejemplo, en el sitio de La Tercera.cl utilizan la clásica y conocida "Georgia", miren como se ve cuando usamos una "Roboto Slab":

Algo cambia, ¿No es cierto?

La tipografía le da "fuerza" a tu diseño

Recuerdan que en la última actualización de Android decidieron cambiar la conocida "Droid Sans" por la nueva "Roboto Regular". Bueno, este simple cambio de tipografía le dió un vuelco completo al diseño general de las interfaces en Android.

Lo mismo ocurrió con Gnome en Ubuntu, que hasta la versión 10.04 utilizaba la "Bitstream Vera Sans" y que en la versión 10.10 la cambió por su propia tipografía, "Ubuntu".

Estas nuevas tipografías han provocado grandes cambios en el diseño de las interfaces y con eso han logrado redefinir las marcas de manera transversal. Es por eso que se hace tan importante también dentro del diseño de aplicaciones web.

Tipografías y aplicaciones

En las aplicaciones web la elección de la tipografía se torna relevante momento de definir la línea gráfica de una interfaz. Esta línea se genera en base a estándares construidos por patrones que se repiten a través de toda la aplicación y es por esto que se necesita una tipografía única que aporte a generar el estándar.

Por ejemplo tenemos el caso de Soundcloud, que es una aplicación web que me gusta mucho porque es bastante rápida y su interfaz está muy bien lograda. Soundcloud utiliza transversalmente la tipografía Interstate y le da mucha personalidad a la aplicación:

Por otra parte, el nuevo y renovado Google Plus también hace depender su interfaz completa de la estrenada "Roboto", y que ha generado una buena reacción de parte de sus usuarios

Iconos y Tipografía

¿Se imaginaron alguna vez utilizar tipografías como íconos?

La nueva tendencia del uso de las tipografías en la web han permitido echar mano a una de las técnicas milenarias y más simples, como la que teníamos en ese "Word 97" usando Webdings para hacer dibujitos. Hoy, gracias a la magia del Typeface podemos utilizar tipografías como librerías de iconos lo que permite un mayor dinamismo en la interfaz.

La forma de implementar una tipografía como ícono es relacionando un caracter con un ícono en específico. Por ejemplo, en el footer de este sitio ustedes pueden ver 4 íconos monstruosos para cada red en la que me pueden encontrar, esos íconos que ven ahí son parte de una tipografía.

Si les interesó esto les recomiendo visitar Fontello, un sitio que te entrega íconos convertidos en tipografía, es de fácil uso y muy compatible. Lo primero que debes hacer es elegir tus íconos y luego descargas los archivos con los estilos y archivos de fuente compatibles con cada navegador.

Luego, para usar estos íconos deberias intentar algo como esto:

Google Web Fonts o TypeKit han permitido que esto ocurra, otros como FontSquirrel tambien han realizado su aporte para embellecer la web. Nosotros ahora somos los responsables de utilizarlas de buena manera y sacarles el provecho que se merece.

Blog, Diseño
2 minutos