El diseño cambió el papel por la pantalla y con ello su modo de expresión. Hasta hace unos años, los diseñadores web contaban con un grupo reducido de tipos clásicas, las «cinco fantásticas» (Arial, Helvética, Verdana, Trebuchet y Times New Roman), suponiendo una limitación en la personalización del site y siendo el talón de Aquiles de las marcas para poder transmitir su identidad corporativa de manera online.
Hoy en día contamos con varios servicios que permiten indexar las fuentes para que sean compatibles en nuestros sitios web y puedan visualizarse correctamente en cualquier navegador, rompiendo por fin el saco de la homogeneidad tipográfica.
@font-face
Esta regla CSS permite incrustar tipografías en nuestra web, enlazando la fuente por defecto desde el servidor hasta la descarga en la caché del navegador.
Plataformas como Font Squirrel, TypeKit o Fonts Live son capaces de crear un set de fuentes @font-face en formatos .eot (carga en Internet Explorer), .svg (código compatible en iOS), .woff (el nuevo estándar) y los estándares .ttf y .otf.
A continuación la sintaxis en lenguaje CSS:
@font-face {font-family: "fuente"; font-style: normal; font-weight: 400;} h2{color: #999999; font-family: 'fuente'; font-size: 3em; }
Google Font API
Google Fonts simplifica aún más el trabajo. Sin necesidad de convertir fuentes ni alojar archivos en nuestro servidor. Únicamente es necesario copiar el código proporcionado por la aplicación e insertarlo en el <head>, para posteriormente enlazar las fuentes desde CSS con el atributo font-family.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
Como único inconveniente, sólo podemos utilizar las tipografías listadas por Google, no las que nosotros queramos.
Typekit
Servicio semejante a Google Fonts bajo el lema «Fonts as a Service» (fuentes como un servicio) que vincula tipografías comerciales en los sitios web a precio de licencia. Tan sólo es necesario crearse una cuenta, compilar un kit de fuentes y pegar el script generado en la etiqueta <head>.
A continuación mostramos algunos ejemplos destacados de páginas web donde las tipografías dejan de ser un simple elemento de lectura para convertirse en protagonistas del diseño:
