Hasta ahora, el principal problema del diseño web en cuanto a tipografía era el no poder usar cualquier fuente para el texto html, ya que si no estaba instalada en el sistema del usuario que accedía a esa página, no se podía visualizar.

Debido a esto, cuando hay que mostrar texto en una web, por un lado se utilizan las típicas y más comunes fuentes “de sistema” que traen instaladas los sistemas operativos (Arial, Tahoma, Verdana, Courier, Times New Roman…), asegurándonos que se visualizaran en cualquier ordenador como se han creado en su diseño. Y por otro lado, si se quiere poner un texto con una fuente distinta que probablemente nadie tenga en su ordenador se crea un gif o un jpg de ese texto y se coloca como una imagen.

Así pues, la tipografía en la web sigue siendo la asignatura pendiente hacia el objetivo de brindar a los diseñadores Web el mismo nivel de libertad tipográfica del que disfrutan los diseñadores de texto impreso.
Pero las cosas están cambiando. Ahora los nuevos navegadores y las nuevas reglas CSS permiten introducir una fuente en una página web, de forma que podemos utilizar cualquier fuente que queramos. ¿Como?. Hay varias maneras.

La regla @font-face

@font-face , una de las At-Rule (regla arroba) en CSS, es la pequeña maravilla que va a cambiar el aspecto del diseño web. Es una propiedad para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador.

Sólo debemos subir el archivo de la fuente deseada a nuestro sitio web (mediante FTP, al servidor) y definirla mediante CSS.

La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar. Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).

Para los entendidos, así quedaría el código CSS después de subir, por ejemplo, nuestro archivo de la fuente open source Chunkfive:

@font-face {
font-family: ”MiFuente”;
src: url(Chunkfive.otf) format(“opentype”);
}

y crear un estilo css para texto así:

.texto1 {
font-family: “MiFuente”, Arial, Verdana, sans-serif;
color: #2374B6;
font-size:25px;
}

y en nuestra página web:

<p class=”MiFuente”>Hola, mira como molo con esta  tipografía.</p>

El resultado visto en un navegador, quedaría así de bien:

Hasta aquí, todo fantástico. Pero…llega el momento de las compatibilidades entre los distintos navegadores y aquí surgen los problemas: aunque casi todos los últimos navegadores van a mostrar bien las tipos, no todos los navegadores interpretan el formato .ttf/.otf y las versiones antiguas de algunos (que se siguen usando bastante, IE6 incluido) tampoco aceptan las nuevas reglas CSS.

Pero existen soluciones para el día de hoy.

Podemos convertir la tipografía (ttf o otf) a diferentes formatos, solucionando así la compatibilidad entre los navegadores. Estos formatos de tipografía son: woff, eot y svg

.EOT
Microsoft creó hace unos años el formato de fuente EOT (.eot). Se trata de un formato de fuentes compacto diseñado para incrustar fuentes en las páginas Web. El problema es que solo se visualizan con internet explorer. Lo bueno, es que es compatible desde IE4.

.SVG
Para otros navegadores como opera o safari (incluida su visualización en el iphone o el ipad)

.WOFF (Web Open Font Format)
Soportado hasta ahora por Firefox y Opera por el resto en futuras versiones.

Con lo cual, a día de hoy, para asegurarnos la correcta visualización en todos los navegadores y sus versiones es necesario subir la fuente de nuestra web en todos los formatos necesarios. (TTF (o OTF), EOT y SVG y WOFF). ¿Lío?, no es para tanto. Con el tiempo, es probable que se estandarice uno o dos formatos y la norma css será compatible en todos los navegadores conforme los viejos queden en desuso.

De esta forma, convertimos nuestra fuente en los tipos de archivos anteriores, los subimos todos a la web y nuestro código CSS quedaría así:

@font-face {
font-family: ”MiFuente”;
src: url(‘Chunkfive.eot’);
src: local(‘ChunkFive’),local(‘ChunkFive’),
url(‘Chunkfive.woff’) format(‘woff’),
url(‘Chunkfive.otf’) format(‘opentype’),
url(‘Chunkfive.svg#ChunkFive’) format(‘svg’);
}

¿Y cómo convertimos nuestra fuente a los otros formatos?. En http://www.fontsquirrel.com/fontface/generator nos ofrecen el @font-face Generator

@font-face Generator es una herramienta online totalmente gratis, que permite, a partir de uno o varias archivos tipográficos en formato .ttf o .otf, obtener, en tres sencillos pasos, el código y los archivos necesarios para que puedas implementar @font-face en tu página, con la garantía de que se verá correctamente en todos los navegadores.

También Microsoft ofrece una herramienta gratuita para convertir fuentes ttf a oet, la WEFT (Web Embedding Fonts Tool) La herramienta modifica una fuente TrueType® u OpenType (solo de estilo TrueType) para crear el archivo EOT

Si no queremos o nos parece complicado ir convirtiendo tipografías, FontSquirrel nos ofrece cientos de tipografías libres de derechos que no será necesario convertir, porque se nos permite descargar el Kit o el paquete con todos los archivos y el código necesario. Seleccionas la fuente que te guste del listado y le das al botón “download fontface kit”. Más fácil imposible.

Es importante señalar que si, después de leer este post y de comprobar como tu tipografía molona, con unas míseras líneas de código se ve fantásticamente bien en tu navegador, has de saber que al igual que una foto o una ilustración, si se va usar en una web de fines comerciales, es necesario tener la licencia de esa tipografía, o utilizar en su caso fuentes gratuitas o de uso comercial permitido, que por otro lado, también abundan.

Google Font API

La solución que hace unos mese Google presentó para poder visualizar sus fuentes en la web es otra buena opción. Son gratuitas y variadas y, aunque no muy extensas en número, son de calidad y suponemos que irán aumentando con el tiempo. No es necesario tener la fuente alojada en nuestro servidor. Tan sólo necesitamos crear un enlace a la Google Font API especificando las fuentes que deseamos usar y aplicarla mediante reglas CSS en donde deseemos.

En nuestro código escribiremos, por ejemplo, esto:

<link  href=”//fonts.googleapis.com/css?family=Lobster:regular&subset=latin” rel=”stylesheet” type=”text/css” >

Y crearemos una regla CSS por ejemplo al body:

<style>
body {
font-family: ‘Lobster’, serif;
font-size: 28px;
font-style: normal;
text-decoration: none;
}
</style>

En Google Font API puedes ver sus tipografía e incluso hacer pruebas para ver como quedaría tu texto.

Puedes ver las tipos aquí:
Google Font Directorio
Google Font API
Visor de Fuentes

Sitios que ofrecen fuentes de pago

Es otra opción si deseas ahorrarte líos de conversión o licencias, y no te importa pagar algo de dinero. En internet existen sitios de pago por mensualidades o de pago único que ofrecen una amplia variedad de tipografías de alta calidad para incrustar en la web. Previo pago, estos servicios se hacen responsables de las licencias de la fuente y te proporcionan el código @font-face que podrás usar en tu pagina. En todos los casos, la tipografía no estará alojada en tu servidor.

Tienes un buen listado de sitios aquí

Concluyendo

Parece que por fin se abren las barreras a las tipografías en la web (para lo bueno y para lo malo, todo sea dicho). Ahora, a recorrer el camino.
Algunas bonitas webs con buen uso de fuentes incrustadas:

http://www.festivalmundo.com.br/

http://20tongues.simonfosterdesign.com/

http://www.lordlikely.com/

Algunas bonitas tipografías para que empieces a practicar el @font-face en tus webs:

http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/

Os dejamos una infografía sobre el proceso de cómo se elige una tipografía. Se trata de un proyecto que se llama SO YOU NEED A TYPEFACE y fue creado por Julian Hansen

Hola amiguitos del progressive!!
Hoy quiero hablaros de un disco… el disco en cuestión lleva por nombre “back to light” de bomb the bass o lo que es lo mismo de un productor de música que no es otro que Tim Simenon, así de entrada todos dirán .. y quien coño es este, pues me encantaría sacarlos de sus dudas pero sólo puedo aportar que produjo “ULTRA” unos de los discos más oscuros de Depeche Mode, y Tb. que ente disco repite Martin Gore (compositor de DM) en la última canción del disco.

A mi parecer es electrónica bien entendida, ambient y electro a partes iguales.. todo eso,  y que a mi compañero Jesus le va a encantar cuando lo escuche….

Bomb The Bass – Milakia feat. Martin Gore

La clave está en el briefing
13 de Septiembre de 2010 por Fernando de la Rosa
Agencias, Anunciantes
717 lecturas 717 | Valoración: 4.1 4.1 | Ningún comentario 0

Puedo asegurar que en los casi 10 años que llevo en el mundo del marketing y la publicidad he visto muchos briefings. No los he ido contando uno a uno, pero seguramente han sido más de 500. Y muchos de ellos de empresas y marcas de gran prestigio. Pero que se trate de una marca importante no significa necesariamente que sean buenos briefings. Haciendo un poco de memoria, creo que tan sólo me quedaría con 10. Sí, de todos esos briefings que he recibido sólo un 2% eran buenos, es decir, transmitían que los clientes tenían las cosas claras. Los demás, la gran mayoría, adolecían en mi opinión de una serie de errores de base:

* Mucha información y poco concreta: Los briefings son directamente un copy paste del plan de marketing de la marca. Sin embargo, proporcionar gran cantidad de información no significa que ésta sea buena ni aclaradora.
* No hay encargo: No queda claro qué es lo que esperan de ti. En muchos casos los clientes recurren al tópico del “briefing abierto”, para no coartar –según dicen– la creatividad. Pero eso es un disparate. Si no sabes lo que quieres, difícilmente llegarás a tener un proyecto de comunicación claro y coherente. Y aún más difícil será que la agencia acierte con su propuesta.
* No hay presupuesto: Este es otro clásico. “Dime tú lo que valdría”. En todos estos años no he conocido a ningún cliente con un presupuesto infinito. No hay nada de malo en admitir que no tienes las llaves del banco de España. Además, ayuda bastante a definir posibles acciones si contamos al menos con cifras aproximadas.
* No hay objetivos coherentes: “Quiero una acción de máxima notoriedad, con mucha afinidad, que consiga transmitir xx mensaje y que me genere ventas.” (Encargo textual de un brief.) En esta frase hay 2 objetivos de comunicación, una estrategia de medios y un objetivo de negocio. De los 3 objetivos, ¿cuál es el más importante? Nota mental: se suele confundir una acción notoria con una propuesta creativa.
* No hay definición de target: “Target 18-45 años / Core target 25-35” Esta información puede ir acompañada de una descripción adicional tipo: “Urbano/a, le gusta que le sorprendan, navegar por Internet y estar con sus amigos”. (¿A quién no?) ¿Esto ayuda realmente a diferenciar a la gente? ¿Cuáles son sus motivaciones principales? ¿Cuáles son sus insights vitales? ¿Qué puntos de contacto tienen con tu marca? ¿Cómo describirías un día normal de su vida? ¿Hablamos de target de comunicación o de target de consumo? Creo que gran parte de estas preguntas son incógnitas para muchos clientes y por ello se las trasladan a la agencia para que las resuelva. Algo más de info sobre el target.
* No hay core values de la marca: ¿Qué quiere transmitir tu marca? ¿Qué entiendes tú por ese valor exactamente? ¿Qué quieres que los consumidores sientan cuando la vean? ¿Cuáles son las prioridades dentro de esos valores? Este punto es fundamental para poder valorar de forma objetiva una propuesta creativa.

Podría seguir con este listado de errores frecuentes, pero creo que en general hay tres factores clave para entender por qué escasean los buenos briefings:

* Faltan conocimientos de base. Se mezclan conceptos como, por ejemplo, publicidad y marketing, no se prioriza claramente, falta focalización para poder centrarse en los problemas a resolver, no se explica cómo se van a medir los resultados, etc. Lo curioso es que ante esta falta de base, la agencia ejerce en muchas ocasiones como una extensión del propio departamento de marketing supliendo ese “agujero negro”.
* Nadie enseña a hacer un buen briefing. Creo que faltan modelos concretos a seguir. En las universidades /masters (especialidad Marketing) no se explica con la profundidad suficiente cómo hacer un buen brief (curiosamente, en algún que otro curso de publicidad sí que lo he visto.). Pero el problema no sólo está en la educación, sino en la propia empresa que no enseña a plantear un brief. Siendo prácticos, propongo que la gente de marketing empiece por resolver un briefing propio. Hasta que no te toca leer entre líneas preguntándote constantemente “¿qué me estará pidiendo?”, no acabas de entender dónde están las lagunas. Esto te ayudará a preparar un modelo interno de brief claro y que toda tu gente pueda aplicar.
* Se le dedica poco tiempo a los briefings y esto hace ver la poca importancia que se le da a ese documento. Creo que en el sector de la publicidad se trabaja más “sobre la marcha”, cuando el briefing debería ser fundamental como punto de partida para un buen resultado final. En otros países más avanzados en temas de marketing hay un término que me encanta y es el de “devolución de briefing”: si el briefing no está claro se devuelve al cliente para que lo re-escriba. ¿Cuantas veces lo habéis visto en España?

El briefing es la clave. Si el proyecto está bien definido, si se tiene claro lo que se quiere, si el proceso es concreto, el proyecto arranca de forma adecuada. Luego pueden pasar mil cosas dentro del proyecto, pero una de las cosas que hay que tener claras es que cuando algo empieza mal, lo más probable es que también acabará mal.

Como me gusta ser constructivo, a continuación os dejo un modelo de briefing que he preparado aprendiendo de los “buenos”:

http://www.slideshare.net/TITONET/briefing-marketing-comunicacin-4533306

War is hell

Alucinante galería de fotos sobre la guerra.

Sólo tienes que escucharlo…Cojones

73 campañas han pasado a la lista corta de los Premios a la Eficacia de la Comunicación Comercial de la Asociación Española de Anunciantes (aea) que se celebrarán, en su XII edición, el próximo 14 de octubre. Todas, candidatas a los 32 trofeos que se entregarán, serán juzgadas por los criterios de Dificultad, Innovación, Demostración, Medición, Retorno y Presentación.

Estas 73 campañas representan a un total de 57 anunciantes y 39 agencias de publicidad y de medios. El presidente del jurado de la actual edición, José María Mendizábal, consejero delegado de Pikolín, ha afirmado en un comunicado que “los anunciantes debemos demostrar que nuestra cuenta de resultados tiene mucho que ver con las estrategias de marketing que aplicamos y para ello los Premios a la Eficacia constituyen un excelente manual de estilo”.

Código Visual ha pasado a la lista de finalistas con la campaña “hinchaosaneumaticosymas.com” desarrollada para Servirueda, red de partenariado de MICHELIN.

Roger Federer muestra su talento tumbando una lata de la cabeza de un ayudante de plató mientras filmaban comercial para Gillete.
¿Es un montaje? ¿Es verdad? Lo cierto es que como viral ha funcionado muy bien. 5.076.621 impresiones en menos de 10 días.

[youtube]cTl3U6aSd2w[/youtube]