Archive | Uso

Ayer tuve la suerte de compartir clase con Rodrigo Brod, profesor de diseño y tipografía de la Universidad brasileña de Univates (Lajeado, Río Grande del Sur). Había programada una actividad que consistía en elegir una tipografía que transmitiese lo mejor posible la personalidad de 4 cantantes, 4 actores y 4 países. Los alumnos pusieron sus trabajos en el panel de corcho y comenzó la discusión para ayudarles a entender lo que estaba pasando. Mi intervención se limitó a apoyar a Rodrigo y en un momento determinado les conté cuáles eran las dos principios semióticos que operaban en la creación de significado en una tipografía. Tuve la sensación (por las caras y los ojitos brillantes) de haber ayudado, de modo que comparto con vosotros este pequeño descubrimiento que hice hace no mucho.

Al grano: tal y como yo lo entiendo la tipografía transmite historias porque tiene dos capas de significado; la primera es la de la palabra misma que se escribe (función informativa, poner en forma la palabra) y la segunda es gramática (función comunicativa, poner en común el concepto).

Esta segunda capa opera bajo dos principios semióticos bien conocidos por todos: la connotación y la metáfora. Vamos a verlas con detalle:

Connotación

Si pensamos en una tipografía gótica automáticamente la asociamos con Alemania, cerveza o iglesias y religión. ¿Qué hay dentro de la tipografía que tenga que ver con estos conceptos? Poco o nada, salvo el uso que históricamente se ha hecho de estas letras en diferentes ámbitos o productos. El uso prolongado de un alfabeto crea una imagen colectiva que se convierte en un potencial recurso de creación de significado cuando la tipografía se utiliza en el contexto adecuado.

¿Cómo puede ayudarte el proceso de connotación para escoger una tipografía u otra? Cuando tengas un encargo entre manos estudia los usos que se han hecho de las tipografías que estás eligiendo y sé consciente de lo que connotan para el público al que te diriges; lo mismo pasa con los colores, el negro es el color del luto en los países occidentales pero ojo, en Japón es el blanco. Debes estudiar el contexto siempre antes de empezar a tomar decisiones gráficas.

Para esto es importante saber en qué momento histórico se diseñó la tipografía, con qué función o para qué productos y si es posible en qué contextos se ha utilizado previamente que puedan haber generado una imagen en el subconsciente del colectivo al que te diriges.

Metáfora

Cuando no se conoce el origen o el uso de una tipografía también puede transmitir un concepto pero a través de otro principio semiótico: la metáfora. En la famosa canción Sabor de amor, del grupo español Danza Invisible el estribillo reza así:

Labios de fresa sabor de amor,
Pulpa de la fruta de la pasión.

La metáfora labios de fresa consiste en describir los labios a través de su semejanza con la fruta; se podría decir tus labios son dulces, rojos y carnosos, tus labios son dulces, rojos y carnosos como una fresa pero se opta por la metáfora por ser más sutil y poética, sustituyendo carnosos por una fruta dulce, roja y carnosa, dejando que el lector interactúe y haga el trabajo de asociación, mucho más rico y complejo en matices. Cada lector, en función de su experiencia con las fresas, interpretará algo distinto y a eso le llamamos subjetividad (porque somos sujetos, no objetos).

De esta forma cuando escogemos una tipografía redondeada podemos definirla como amable, cercana e incluso femenina. Los alfabetos angulosos pueden ser fríos, distantes tecnológicos y masculinos. Y así hasta el infinito y más allá.

Para construir metáforas tipográficas debes estar atento a la anatomía de las letras, la estructura y el contraste, por eso en los manuales se describen y clasifican de mil maneras distintas. Conocer, degustar y memorizar tantas tipografías como puedas —el equivalente a leer tantos libros como puedas si eres poeta o escritor— es imprescindible para ajustar al máximo las características de la tipografía a los valores que pretendas comunicar.

Ejemplo

En los años cincuenta las revistas Harper’s BAZAAR y VOGUE eligieron la tipografía Didot para sus portadas rompiendo con la tradición anterior; sus directores de arte utilizaron la metáfora para relacionar esta tipografía con lo femenino, con la elegancia, la precisión de la costura, la delgadez de las modelos. El uso de Didot y Bodoni —y sus miles de variaciones, por supuesto— por parte de la industria de la moda (ELLE, Vaniti Fair, etc.) se extendió hasta convertirse en connotación, de manera que ahora el público ve una didona y la asocia con la moda de manera automática.

Portada de abril de 1910

Portada de agosto de 1930

Portada de diciembre de 1958

Portada de enero de 2013 (edición inglesa)

Portada de abril de 1956

Portada de septiembre de 20014

Reflexión: sospecho que el público está más entrenado en la connotación que en la metáfora, y eso explicaría por qué los clientes suelen poner tantos frenos a los cambios tipográficos en logotipos, portadas y demás piezas que les proponemos. También evidencia la dificultad de hacer coincidir lo que el diseñador quiere transmitir con lo que el público interpreta, no sólo por el hecho de que cada persona tiene una memoria visual distinta, es que nosotros distinguimos y diferenciamos mejor las tipografías y por tanto manejamos un vocabulario más rico en matices.

Os dejo por lo tanto dos deberes que hacer: fijaos en los usos de las tipografías para entender sus posibles connotaciones y en la estructura/forma de las mismas para tener más herramientas y de ese modo evitar el cliché y la elección fácil. Os espero en los comentarios con ejemplos de cada figura y las preguntas que os surjan.

«En ocasiones veo muertos«, decía Cole, el niño de la película El sexto sentido, con una cara que no se me olvidará jamás. Pues bien, a mí me pasa algo parecido: veo tipografía por todas partes. ¿Es grave, doctor?

La última vez fue el pasado lunes 24 de junio, día de San Juan y día grande de las Hogueras, a fiesta por excelencia de la ciudad de Alicante, donde vivo desde hace 31 años mucho tiempo. Estábamos disfrutando de la última mascletà del concurso de este año (2013) y tras la traca final no se me ocurrió otra cosa que pensar: «esto es tipografía pura, tengo que escribir algo en el blog para explicarlo«. Echa un vistazo a este vídeo casero para hacerte una idea:

Vale, soy un friki. Admitido. Y ahora déjame que te lo explique, a lo mejor hasta te hace gracia: siempre utilizo analogías cotidianas para explicar conceptors tipográficos. Por ejemplo comparo elegir la ropa que te pones cada día con la elección de las tipografías para un trabajo, o el contraste tipográfico con los ingredientes de una paella. Ríete si quieres pero los alumnos lo entienden.

¿Qué tienen en común la tipografía, la ropa, la comida y las mascletades? en todos los casos se trabaja con elementos prefabricados y combinables entre sí. Las letras, las prendas de vestir, los ingredientes y los petardos ya están hechos y tu trabajo consiste en elegir los adecuados, combinarlos y establecer un ritmo y una harmonía que hagan interesante, atractivo o comestible el resultado.

En la mascletà del lunes el ritmo y la potencia fue subiendo como manda la tradición, pero lo que la hizo especial fue los descansos, las pausas entre series, el breve silencio antes del estallido final… fue sublime. Casi como una melodía de rock progresivo. Los que no sois de esta zona quizás os cueste entenderlo porque desde fuera es una costumbre bárbara, pero os aseguro que se le coge el gustillo rápido y se entiende por qué nos gustan tanto los petardos y las tracas.

Te pongo otro ejemplo que entenderá más gente: todo el mundo sabe que una paella o una tortilla de patatas no necesita 20 ingredientes para estar buena. De hecho suelen ser dos, a lo sumo tres, las combinaciones ganadoras. Pero luego hacen un cartel y usan 6 tipografías distintas… es muy difícil hacer un buen cartel con 6 tipografía. No es imposible pero es mejor empezar por el principio.

En la mascletà no se usaron petardos distintos a los de otros días, ni de más variedad. ¿Qué fue lo que cambió?

Venga, piensa un poco…

Un poco más…

Venga, que tú puedes…

…

…

tic tac

tic tac

Vale, vale, ya paro con la tontería. La respuesta es:

…

…

tic tac

tic tac

Venga ahora sí:

EL SILENCIO. EL VACÍO. LA PAUSA. LA NADA.

Efectivamente, eso es exactamente lo que maneja un diseñador, un cocinero, un músico y un pirotécnico: la elección de los ingredientes y el vacío que los relaciona. Eso es tipografía, el control del vacío. No me he metido en una secta Zen ni nada parecido, es que después de mucho tiempo es la conclusión que saco —a lo mejor debería aprender a cocinar— y cada vez soy más sensible al vacío. El otro día disfruté mucho del silencio entre tracas. Sólo quería compartirlo contigo.

Si tú también ves tipografía por todas partes te animo a que lo compartas aquí y nos cuentes dónde. Gracias por leerme.

Smashing Magazine es uno de los sitios de referencia a nivel mundial en materia de diseño, realmente te lo recomiendo. Hace poco publicaron un estudio hecho entre 50 webs destacadas por su cuidado y su contenido para deducir cuáles eran las tendencias y buenas prácticas de los diseñadores responsables de cada proyecto. Lo interesante es que lo han podido comparar con otro estudio similar que hicieron en 2009. A continuación os sintetizo —y en la lengua del imperio para que no tengáis problemas— las conclusiones más destacadas para que podáis ir probándolas en vuestros proyectos:

¿Romana o palo seco?

Ah, la eterna pregunta del principiante… a la que solemos responder con el siempre socorrido «depende». Pues bien, si quieres salir de dudas, veamos lo que hacen los grandes:

La disputa anda bastante más apretada que en 2009 cuando el dominio del palo seco era abrumador. De hecho las romanas se están imponiendo para cuerpos de lectura mientras se reparten protagonismo en los titulares. Al final volvemos a los clásicos… pero, ¿a qué se deberá este retorno a los orígenes? Sospecho que detrás de todo esto está la evolución de las webfonts y la enorme oferta que existe ahora; hace 4 años era más difícil poder usar tipografías de pago en diseño web. ¡Vaya! Me acabo de dar cuenta de que estoy dentro del promedio de este estudio (uso un palo seco para titulares y una romana para cuerpo de lectura). Pero me pregunto qué hará la gente de a pié… se me ocurre consultar las estadísticas de Google Fonts, veamos cómo se reparten el cotarro entre las 10 más usadas: 8 palos secos, una romana y una caligráfica. Muy interesante también la gráfica donde se listan las familias más utilizadas: Georgia y Arial ganan de calle a cierta distancia de la Helvética que se mantiene en el podio; pierden puestos a toda pastilla Verdana y Lúcida, mientras la parrilla se llena de webfonts… la verdad es que no me sorprende, hay tipografías muy buenas en la lista. Pero el dato que más me llama la atención es la atomización de la muestra, fíjate la cantidad de resultados que obtiene la categoría «otras». Es un reflejo de la oferta tan amplia de que disponemos los diseñadores —y que aumentará con la inclusión de Typekit en el paquete Adobe Creative Cloud—.

¿Fondo claro u oscuro?

Aquí el panorama no ha cambiado mucho, el fondo claro y las letras oscuras sigue siendo el predominante; lo que sí se aprecia en el estudio es un descenso del contraste conseguido gracias a oscurecer el blanco y aclarar el negro (justo como hago yo en el blog).

¿Qué tamaño usar?

Otra pregunta interesante: en titulares la media del estudio está en los 38 píxeles (que en pantallas normales, de baja definición, equivale a 38 puntos), 10 píxeles por encima de las muestras de 2009; yo he optado por 48px porque estoy usando una versión estrecha —condensed— y me lo estaba pidiendo a gritos para diferenciarse claramente del texto principal y de los encabezados. Mira el gráfico si quieres:

En el cuerpo de lectura también se observa un crecimiento de 2 píxeles, hemos pasado del cuerpo 12 o 14 al 14 o 16. La explicación de este cambio es puramente técnica: los ordenadores se sitúan a mayor distancia que una publicación en papel, que se suele sujetar con las manos. Ese incremento de distancia en tipografía web se ha de compensar con un aumento del cuerpo principal, que en la mayoría de las tipografías se sitúa en 16 píxeles (es el cuerpo que uso yo). Puedes leer el artículo de Oliver Reichenstein que puso en marcha esta tendencia.

Ten en cuenta que este tipo de consejos sirven sólo de guía, siempre tienes que evaluar el resultado y crear reglas nuevas para tu diseño. Si sigues la regla de los 16 píxeles usando Verdana no creo que te entusiasme el resultado. Cada tipografía tiene unas proporciones que te pedirán —si tienes un poco de sensibilidad y de cintura— lo que tienes que hacer, de modo que la Verdana o la Georgia las puedes componer a 14 píxeles obteniendo el mismo resultado que con una Helvética o una Times a 16. En el estudio han encontrado una proporción entre el cuerpo de lectura y titulares de 2,5 de media. Yo uso una proporción de 3 (16 px y 48px) que en mi caso creo que se lee mejor; puedes plantearte también aplicar la proporción áurea (1.618) si quieres aunque conseguirás menos contraste tipográfico. Todo depende de la selección de tus materias primas.

Interlínea

Aquí también hay un cambio respecto a las reglas que imperan en diseño editorial, que sospecho tiene el mismo fundamento que el aumento del cuerpo de texto hasta los 16 píxeles: a mayor distancia, mayor interlínea. Si al diseñar para el papel la interlínea que se considera como punto de partida es un 20% del cuerpo de texto (10/12 por ejemplo) en pantalla se recomienda un 50% (10/15); la media del estudio está en un 46% (o 1,46 por cifrarlo como se hace en HTML con la interlínea, que se establece con una etiqueta CSS llamada line-height). Yo uso esta proporción con lo que obtengo un 16/24 píxeles. Aquí me gustaría investigar un poco más porque es cierto que se agradece una interlínea generosa…

Longitud de línea

Este es otro de los datos que les suele llamar la atención a mis alumnos, que se sorprenden de que haya una regla hasta para eso. De hecho Alfredo, uno de ellos, se ha inventado una regla mnemotécnica estupenda para recordar la cifra mágica: medio twit, 70 caracteres (Bringhurst establece el promedio en 66). Sin embargo el estudio refleja que la media está en 84, quizás en un intento de mantener la proporción en el aumento de cuerpo e interlínea. A mí me parece demasiado, yo intento no pasar de 80. Por supuesto, no verás ninguna web decente con el texto justificado, al menos hasta que se solucione técnicamente la partición y justificación en todos los navegadores.

 ¿Tipografía responsive?

Vaya con la palabreja, no hay manera de traducirla… es una técnica bastante sencilla —aunque tremendamente laboriosa— que permite hacer la maquetación relativa a un determinado espacio o resolución. Dicho de otra manera, permite tener un mismo diseño con medidas diferentes en función del dispositivo que cargue la web: si es un teléfono usará una sola columna, un cuerpo determinado y una navegación más sencilla. Si es un iMac de 27 pulgadas puedes pasar a 3 ó 4 columnas, menús desplegables, etc. Yo lo he hecho con este blog, si quieres ver cómo funciona haz la ventana de tu navegador más pequeña y verás cómo cambia el diseño (o carga el blog desde el teléfono). Un 42% de las páginas estudiadas tienen algún tipo de estrategia responsive, con lo que podrías empezar a investigar sobre el tema y plantearte aprender a hacerlo, porque no es una moda pasajera. Los tiempos están cambiando…

Conclusiones

No te tomes este artículo como un conjunto de reglas inviolables; diseñar consiste en crear reglas adecuadas a cada proyecto. Tómatelo como un punto de partida y recuerda que siempre debes hacerle más caso a tu intuición femenina —o sentido arácnido si se da el caso— que a tus profesores. De hecho, acabo de recordar un artículo genial de mi admirado Gerrit Noordzij que habla justamente sobre este problema: se titula Rule or Law (si no funciona el enlace puedes leer la versión guardada en caché por Google). Te lo recomiendo.

Si eres desarrollador web y no te quieres complicar la vida cargando fuentes de servidores externos como Google Fonts o Typekit, habrás visto que hay una colección de tipografías de sistema que se instalan en los dos grandes sistemas operativos pero, ¿qué pasa con Linux?

Seguramente ya te has dado cuenta de que la gran mayoría de las fuentes de sistema no están presentes en las distribuciones del sistema operativo del pingüino, pero no te preocupes porque yo mismo me hice la pregunta una vez y me dediqué a compararlas hasta encontrar 5 secuencias tipográficas (font stacks, listas de fuentes para que el navegador escoja la que tenga disponible) que contienen tipografías presentes en el 95% de los ordenadores del mundo y que son clavaditas entre sí:

1. font-family: Palatino, “Palatino Linotype”, “Urw Palladio L”, Serif;
2. font-family: Georgia, “Dejavu Serif”, Serif;
3. font-family: “Courier New”, Courier, “Nimbus Mono L”, Monospace;
4. font-family: “Helvetica Neue”, Helvetica, “Nimbus Sans L”, San-Serif;
5. font-family: Verdana, “Dejavu Sans”, San-Serif;

De acuerdo, no hay mucha variedad, pero es suficiente para hacer algo digno, limpio y claro.