Rubén Bastón
La entrevista a nuestra invitada de hoy, Ana Cirujano, nos la recomendó Jaime Gármar, de Club WordPress. Como es diseñadora y experta en tipografías, así que, hemos aprovechamos para hacer un programa centrado en el proceso de creación de una marca: hacer un logo, escoger tipografía, tamaños de letra… Y, ya de paso, aprenderemos más detalles sobre tipografías en tendencia: las fuentes variables.
Entrevista a Ana Cirujano
3:10 Cuéntanos un poco sobre ti: de dónde eres y cómo llegaste al mundo del diseño web
Estudié sociología e hice prácticas en una fundación donde maquetaba una guía: ahí empecé con diseño editorial. Me especialicé en diseño gráfico y tipografía, y me seguí formando. Hice un máster de desarrollo web y me especialicé en esto y en tipografía web.
8:53 Hemos venido aquí a hablar de tipografías. Parece un detalle menor y estamos seguros de que en muchos los clientes ni se fijan y lo dejan al criterio del diseñador, ¿no te pasa eso?
Al ser mi campo, para mí la tipografía supone el 90% de la web. Sobre todo a la composición de textos. Tipografía es una palabra que se refiere al tipo de letra y a la composición que haces del texto. Hay que pensar y elegir bien y si hay presupuesto comprar una tipografía propia para darle personalidad, la marca va a girar en torno a la tipografía.
Si el cliente me da libertad a escoger y realizar propuestas de tipografías, lo prefiero. Hago mucho ejercicio didáctico donde explico por qué las escojo. Si no hay presupuesto, elegimos una Google Font que funcione bien. Tiene un catálogo muy amplio, más de 800 tipos. Hay un estudio que dice que las tipografías que estamos acostumbrados a ver son las que mejor leemos. Si no necesitas darle personalidad a tu proyecto, está bien escoger una de esas tipografías, también para menús, pie de página o párrafos. Pero para títulos y el logotipo escoge una tipografía que te diferencie.
13:35 ¿Qué tipos de tipografía existen y qué se supone que las distinguen?
Hay muchísimas clasificaciones, podríamos hacer 20 diferentes. Yo me limito a 5:
- Con serifas. Serían los adornos que hay en las letras como Times New Roman
- Sin serifas o palo seco, como sería Arial.
- Display, se utilizan solo para los títulos. Con más adornos y personalidad.
- Handwriting, tipografías manuscritas. Imitan a las letras escritas a mano.
- Y las monoespaciadas. Se utilizan para datos tabulados o para editores de código, para que todas las letras ocupan el mismo ancho.
Cómo elegir la mejor tipografía para tu marca: cuál es la más adecuada
17:20 Cuando comienzas a crear la marca… ¿Piensas en el logo con el tipo de web que debería tener y la tipografía que debería usar?
Las marcas las miro desde un punto de vista global, en todos los puntos de contacto. Desde cómo quieres que te vean, puedes empezar por el logo o por una tipografía. También hay otras formas de aplicar la marca, a través de otros recursos que acompañen a logotipo como formas o colores. Yo hago marcas muy sencillas y con mucho peso en la tipografía.
18:30 ¿Cómo suele ser el proceso de creación?
Lo primero que hago es tener varias entrevistas con la persona que va a decidir, donde me cuenta la historia del producto o de la marca con todos sus porqués. Intentamos plasmar todo lo que quieren contar en una marca gráfica. Si hiciera falta nombre suelo presentar 4 o 5, sin logotipar.
Una vez lo hayan escogido preparo 3 propuestas. Con un logotipo, símbolo y variaciones como tarjetas de visitas o presentaciones gráficas. Primero la propuesta que más me gusta, de segunda alguna variación y una tercera que es la propuesta loca, que rompe el patrón. Todas vienen con tipografía. Más adelante, cuando haya que crear el manual de identidad se añade todas las necesidades que va a necesitar el cliente.
24:00 También trabajarás para gente que tiene el manual de identidad ya diseñado.
Hace poco tuve un cliente que tenía ya la identidad corporativa y quería que le diseñara una web, pero la tipografía que tenían no iba a funcionar. Así que les propuse una parecida que funcionaría mucho mejor para la web. Suelo hacer propuestas de rediseño de tipografías sea cual sea el trabajo que me vayas a pedir, si no considero que sean perfectas.
25:00 ¿Cuáles son las tipografías que usas y por qué?
Para los párrafos utilizo Meta Serif porque es mi tipografía favorita y me encanta. Cuesta alrededor de 400€ comprar toda la familia. A mis clientes suelo recomendarles tipografías más baratas de 50€ a 100€. Una vez que la compras puedes usarla en papel sin ningún límite, pero en web solo puedes usarla para una cantidad de visitas al mes. Por eso marcas como Netflix tienen su propia tipografía, porque les sale más barato que pagar por tráfico.
28:52 En tu web hay un vídeo destacado en el que hablas de las fuentes variables. ¿De qué va eso?
Cuando hablamos de familias tipográficas nos referimos a las distintas variaciones en cada tipografía. Cuando estás en un software, en un navegador o en Microsoft Word, siempre que seleccionas una variación como la cursiva o la negrita está utilizando una fuente tipográfico distinto, un archivo distinto.
Si vas a tu carpeta de fuentes o miras los archivos temporales de tu navegador vas a ver que tienes un archivo para la negrita y otro para la cursiva. En el ordenador no importa estos archivos, pero en la web cada archivo es una petición al servidor, lo que hace que tarde más en cargar la web. Antes, para evitar esto no ponían variaciones: hay webs que no usan la negrita y se pierde la legibilidad.
En 2016 se juntan Google, Apple, Amazon, Microsoft y juntos crean las fuentes variables, una modificación de open type para poder crear todas estas variaciones en un único archivo, sin hacer peticiones. Además de que mejora la legibilidad también lo hace de la carga de la página. También puedes crear ejes personalizados, por eso habrás visto ilustraciones e iconos animados con código css.
33:50 ¿Cómo puedes utilizarlo en tu web?
Basta con subirlo a tu web y utilizar un código css para añadir las animaciones y cambios que quieras. Ahora en febrero voy a lanzar un plugin gratuito en WordPress para cargar fuentes variables sin tener que utilizar código. Se llamará fuentes variables.
35:58 ¿Algún ejemplo de marca o web que te haya impresionado para bien en el uso de la tipografía?
Mailchimp hizo un rediseño hace unos meses y le puso una tipografía superbonita que funciona muy bien tanto para párrafos como para títulos. Con párrafos super legibles, bien compuestos con su ancho e interlineado. Esto transmite personalidad y profesionalidad.
Ejemplo de la nueva web de Mailchimp
38:07 ¿Y al revés, una web que has visto que no debería usar esa tipografía?
Wikipedia. Es horrible, se lee fatal. Un interlineado mínimo: estás leyendo y tienes que mover la cabeza para poder hacerlo bien. Te pierdes de línea.
38:53 ¿El triunfo de la Comic Sans a qué se debe?
Es fácil meterse con ella, es como el pringado de la clase. Tuvo mucha polémica porque se utilizaba para todo, incluso para documentos oficiales o carteles. El creador dijo que se utilizó mal porque solo era para comic, pero la realidad es que incumple muchas normas de composición de tipografía.
https://marketing4ecommerce.net/10-tendencias-de-diseno-para-2020/
40:20 ¿Hay algún estándar o recomendación general sobre qué tamaño debería usarse?
Siempre hay que hacer una tipografía responsive, seleccionar un tamaño de letra para dispositivo, que esté adaptado a tu diseño. Porque cuando estás leyendo en el escritorio lees a una distancia mayor que cuando lees en el móvil. A partir de 18 píxeles elige los tamaños que mejor se adapten con tu tipografía.
46:10 ¿Cómo ves las tendencias en tipografía?
Recomiendo que visitéis Typewolf: la tendencia de ahora es sin serifas y a palo seco, no me gusta mucho porque pierde personalidad, pero las marcas están cambiando las tipografías a este lado más clásico.
Las cinco últimas con Ana Cirujano
- ¿iOs o Android? Android
- ¿Red social preferida? Twitter
- ¿Afición lejos de las pantallas? Senderismo e improv, como la improvisación teatral.
- ¿Idea de posible entrevistad@? Pablo Moratinos, es consultor de marketing online y está especializado en analítica web
Mantente informado de las noticias más relevantes en nuestro canal de Telegram