 Bueno, vamos a empezar con la charla si os parece. Voy a presentar a Ana, para nosotros es todo un orgullo tenerla aquí hoy con nosotros. Ana Cirujano es diseñadora visual y de interacción especializada en proyectos con WordPress. En la actualidad forma parte activa de la comunidad WordPress, liderando el equipo de diseño de WordPress España, impartiendo cursos, charlas y ponencias sobre tipografía responsive y WordPress. Ana Cirujano es organizadora de la meetup de WordPress Collado Villalva y asiste a las workgroups de toda España. El título de su charla es ¿Puede la tipografía aumentar las ventas de tu tienda online? Espero que disfrutéis de ella y nada, ya os paso con Ana. Muchas gracias Luba. El placer y el orgullo es mío estar aquí. Tenía muchísimas ganas de venir a esta workgroup en Pontevedra. Y bueno, los primeros buenos días a todos y muchas gracias por haber elegido este track, el track Abaiso, porque sé que Guajali en la otra sala seguro que está haciendo una charla magnífica, que espero que veáis en WordPress TV, porque va a ser genial seguro. Muchas gracias a la organización también por haberme dado la oportunidad de dar esta charla, estar hoy aquí. Bueno, ya me ha presentado Luba. Entonces este espacio lo voy a dedicar a invitaros a que vengáis mañana. Como ha dicho, soy líder. Bueno, me encargo de ayudar, o sea que ayudéis en el diseño, a colaborar con el diseño de WordPress. Realmente a mí me parece muy grande lo que se puede hacer, una herramienta que hace que funcionen las webs del 30% de Internet o el 60% de los CMS en general, que cualquiera de nosotros pueda participar en su diseño, tanto de experiencia de usuario como de interfaz de usuario. Para mí es algo maravilloso que podemos colaborar con el proyecto. Hoy mañana es una de las cosas que vamos a hacer, colaborar con el propio software y también hacer cosas de ilustraciones, incluso podemos colaborar con las medallitas que se ponen en el usuario de WordPress.org. O sea que mañana si os traéis el portátil, vamos a trabajar y va a ser muy bonito. Os invito a que vengáis y se venis sobre todo a la mesa de diseño conmigo, que va a ser muy divertida. Y después de estos minutos publicitarios, vamos a hablar de tipografía. A mí la tipografía me apasiona, me parece que es la disciplina del diseño gráfico, creo que me apasiona por lo difícil que me resulta. La tipografía tiene mucho de sensaciones que percibimos y cómo el ojo nos engaña y cómo tenemos que modificarlas unas formas para que parezcan otras, mucho de esa experiencia, pero también tiene muchísima técnica. Entonces si seguimos unas normas y a la vez tenemos el ojo entrenado, podemos conseguir comunicar lo que realmente queremos comunicar. La tipografía no solo se refiere a un tipo de letra, sino que se refiere también a la composición que hacemos de los textos. El interlineado, el ancho de la línea, todas esas cosas que ayudan a que la legibilidad sea mejor y también a que jerarquicemos el texto. Este ejemplo es el mismo texto, pero vemos que el de la izquierda no nos apetece nada leerlo y el de la derecha, aunque no lo queramos leer, ya lo estamos leyendo porque el diseñador no se ha ocupado de decirnos qué tenemos que leer primero. Se ocupa decirnos de ayudarnos a recibir mejor la información de esto de lo que se encarga la tipografía. Además a mí me dice en una página web que la persona o el equipo de personas que han hecho la web se han preocupado por el lector, por el usuario. Una web que cuida mejor la tipografía, que se preocupa de este tema, es una web que ha pensado en el usuario. Le he puesto más atención, más cariño a eso, pensando en el usuario. La tipografía, normalmente cuando se aprende la tipografía, la gente se refiere a ella como el traje, el vestido, que le ponemos a las palabras o la voz. Con la ropa es muy fácil ver qué imagen queremos dar. En una entrevista de trabajo nos ponemos una ropa y a la piscina nos ponemos otra. Este texto no está nada cuidado. Es simplemente una voz anodina, un traje que no está cuidado. Sin embargo, puede tener la misma intención comunicativa, porque el otro también comunicaba algo. Ya sabemos cómo decía Paul Watzler, que es imposible no comunicar. Callados también estamos diciendo mucho. Aquí le estamos dando una intención muy concreta. El color de fondo, o el color de las palabras, también es tipografía. La accesibilidad, el que conseguimos con el contraste, también es tipografía. Quería hablar de... Bueno, esto es un Kandinsky, como sabéis. Quería hablar de Kandinsky porque... ¿te gusta? Kandinsky tenía sinestesia. La sinestesia es una sensación que relaciona unos sentidos con otros. Kandinsky lo que hacía era que los sonidos los veía, veían los colores de los sonidos. La sinestesia también lo que hace es que hay gente que, cuando toca algo, tiene un sabor, un gusto concreto, o incluso se mezclan los sentidos. Para mí la sinestesia nos ayuda a entender un poco más por qué unos tipos de letra u otros nos dan unas sensaciones u otras. Porque la sinestesia lo tiene poca gente. Se produce también cuando consume un psicotrópico, que por eso estoy flipando en colores porque realmente las drogas hacen, por lo visto, que tengamos ese tipo de sensaciones, de mezclar los sentidos. Pero es verdad que todos somos un poco sinestésicos. En este ejemplo se suele poner, es muy habitual, cuando se explica la sinestesia se pone este ejemplo. Si yo es dijera que una de las figuras se llama Bubba y la otra se llama Kiki, tenéis claro cuál es Bubba y cuál es Kiki. La de la izquierda es Kiki y la de la derecha es Bubba. Es así, no puedes llamar a esto Bubba y a esto Kiki. Tenemos claro las sensaciones de pisar una almohada o pisar cristales. A mí me parece... La tipografía al final son formas, sonaristas o son curvas. Hay gente que se sorprende que la tipografía dice cosas por sí misma. Al final las formas nos hablan también. Vamos a ver ejemplos de tipografía y sus aplicaciones. Esta palabra está escrita con Roboto, que es de tipo grotesca como elbética, que me imagino que todos conoceréis. Roboto es una tipografía que se utiliza en muchísimas webs. Roboto sería un poco uno de los estándares. Una de las tipografías estándar que por legibilidad se utiliza mucho porque es una tipografía muy legible. Más como es condensada viene muy bien para dispositivos móviles porque ocupa menos que una expandida. Condensada y expandida es la anchura de la tipografía. Pero no es clásica, es bastante moderna. Clásica sería más una Bodoni, que es de tipo didona. Y se ha utilizado tradicionalmente para novelas, en impresión se utilizaba este tipo de tipografías con serifas. Las serifas son los adornos que tienen las letras, que nos ayudan a identificar mejor las letras porque nos dan más información acerca de qué letra es cada una de ellas. Y además, al principio, es un mito que se extendió durante bastante tiempo y que hoy todavía mucha gente tiene, se decía que las tipografías con serifas como ésta se utilizaban para papel y en pantalla funcionaban mejor las tipografías de palo seco, como es la Roboto, por ejemplo. Esto ya no es así, primero porque ya tenemos resoluciones de pantalla muy grandes que permiten que a través de una técnica que se llama hinting que las curvas, aunque sean los píxeles, son cuadraditos. Si tú quieres una curva, lo que tienes que hacer es mediante una escala de grises, haces que se perciba mucho mejor con más nitidez esa curva. Hoy en día, con las resoluciones de pantalla que tenemos y con esta técnica hay tipografías con serifas que se ven perfectamente, perfectamente nitidas. No hace falta utilizar palo seco en pantalla. Es clásica, estas tipografías digo que es clásica porque aunque es muy elegante, ésta sería otro ejemplo, ratio. Ratio es una tipografía, bastante no recuerdo ahora de qué año es, pero yo diría que es de ahí, pues hace mejor 300 o 400 años y sin embargo la vemos bastante actual, clásico significa eso. Es antigua, pero a la vez es muy moderna. Pero bueno, lo percibimos como elegante, estas formas tan estilizadas. Y se suele utilizar pues como decía para denotar, Burberry quiere vender en estratos de poder adquisitivo alto, entonces tenía esta tipografía más clásica. Ahora, como está la moda del palo seco, pues ahora recientemente han cambiado su identidad corporativa y le ha cambiado a una grotesca, pero realmente bueno, es una moda que hay en los últimos tiempos, pero no responde a ese tipo de cuestiones. Si quisiéramos elegir una tipografía deportiva, porque nuestra tienda online está dirigida a un público deportivo, es algo de deporte, pues elegiríamos una tipografía que nos diera más esa sensación, con un poquito de slang, de inclinación, que le da más dinamismo, o por ejemplo, me estoy llendo para atrás, perdón. Una tipografía tecnológica también, las tipografías ya no es solo por la forma en concreto, sino por lo que estamos acostumbrados a ver, por legibilidad, este tipo de tipografía geométrica, como este ejemplo, se ha utilizado mucho para las interfaces de los rótulos, de los números, lo vemos siempre muy asociado con cosas tecnológicas, de informática, de los relojes, la tecnología. Entonces, como lo asociamos a eso, si yo quisiera, si yo tuviera una tienda online o fuera una persona que se dedica a algo tecnológico, puedo elegir este tipo de tipografía. Lo importante es emplear la tipografía adecuada para lo que queremos que el público perciba de nuestro sitio web. Para transmitir relax, podríamos elegir una tipografía de este tipo con las formas redondeadas, una rounded. Este ejemplo, muchas veces, cuando tenemos esto claro, de bueno, si yo tengo una tienda online de tecnología, voy a ponerle esta tipografía tecnológica, hay que tener un poco de cuidado con esto, porque si no eres muy experto, puedes tener errores como este, que tienes una tienda, una panadería, y entonces utilizas la papirus para poner el pan. Esta tipografía sí que nos puede... Podemos percibir algo de tradicional, algo de rústico, pero es que no es una tipografía que esté bien dibujada, es una tipografía que las formas... Es muy caótica, es más caos que tradicionalidad o artesanía. Entonces, estas segundas decisiones que se han tomado serían mucho más acertadas para una panadería que las decisiones de la izquierda. Además, hay tres tipos de letras, es muy caótico. Para este ejemplo tan horrible, pues lo he hecho yo para no mostraros un mal ejemplo de nadie, pero es muy habitual. Lo de las tres tipografías. Para elegir tres tipografías hay que saber mucho de tipografía. Lo normal es que te equivoco y generes caos. Hay tipografías que son... Si hablábamos de los trajes, hay tipografías que son disfraces directamente. Hay tipografías que puedes utilizarlas para unas cosas y para otras, que son más versátiles, pero hay otras que las tenemos tan impregnadas en nuestro imaginario que claramente no las podemos utilizar para nada el fin por el que fueron creadas. Estos ejemplos son muy evidentes, pero yo recomiendo cuando vayáis a elegir una tipografía que investiguéis sobre la historia de esa tipografía. Normalmente, todas las historias, el diseñador de la tipo, siempre suele explicar de dónde viene, en qué se ha inspirado, y es bueno leerlo para no equivocarnos. Para que no nos den ganas de utilizar una tipografía que está muy dedicada a una cosa y la utilizemos para otra, porque a lo mejor nosotros no conocemos la historia de la tipografía y no nos sugiere eso, pero a lo mejor sí hay gente que lo conoce y directamente percibe esa tipografía y la relaciona con algo en concreto. Hay que interesarse por la historia de las tipografías. Este tipo de letra, la didona que veíamos antes es elegante. Bogue quiere dirigirse a un público elegante, exclusivo, y elige esta tipografía. Sin embargo, la tipografía de semana es una tipografía que está muy bien elegida, aunque se percibe de peor calidad, que es la tipografía de Bogue, pero es que semana se dirige a un tipo de público diferente. Entonces le interesa hacer esa elección. Si nosotros elegimos una tipografía elegante, como es Play for Display, que imita a la didona, si elegimos esta tipografía elegante para una tienda online de pulpo, nos vamos a equivocar, porque el pulpo es exquisito, me encanta, es uno de mis platos preferidos, pero no son percebes. Entonces a lo mejor esta tipografía la podemos elegir para un restaurante de mucha calidad, muy exclusivo, pero estaríamos cometiendo un error, un pequeño error si lo hiciéramos, que el usuario lo va a ver algo raro, va a percibir algo diferente a lo que nosotros queremos comunicar. Las tipografías grondis se suelen utilizar para marcas que son fáciles de usar o que quieren estar muy cercanas al usuario, no muy amigables, lo que hablábamos antes de las formas redondeadas, el relax, el estar a gusto, el pisar una almohada, para mí es muy gráfico. Y si lo utilizamos para tiendas serias, por ejemplo lo de adaptar, una página jurídica por ejemplo, utilizamos una tipografía rounded, el usuario lo va a percibir como algo demasiado cercano, mira, no quiero hacer amigos, quiero que me hagas bien la web para la RGPD y no quiero algo más serio, esto me produce un cierto rechazo. Lo percibimos así, y muchas veces sin darnos cuenta de por qué, pero entras en una web y dices, esto es muy cutre, no sabes por qué, pero realmente lo percibes. Las tipografías con serifas como la Garamond, y la Garamond es una tipografía que se ha utilizado muchísimo, es muy seria, muy elegante, se utiliza por ejemplo en este ejemplo del packaging para complemento dietético, que tiene que ser algo serio, si lo utilizamos para dar un mensaje de oferta agotado, realmente no, estamos siendo muy aburridos, está diciendo oferta, no queremos decir oferta, tendría que ser una mala elección, aunque es sutil, pero sería una elección, se podría mejorar. Sin embargo en esta web sí que quieren dar una impresión clásica, seria, formal, poder adquisitivo alto, entonces utilizan esta tipografía, más elegante, además esos espacios en blanco, que también es tipografía, el espacio que dejamos entre las imágenes, entre los textos, para que el texto respire, en papel teníamos que ceñirnos al formato de la página, pero en web nos cuesta lo mismo un formato más ancho y más amplio que uno más pequeño, luego tenemos que aprovechar ese espacio en blanco, que nos va a dar más elegancia. Luego tenemos tipografías de Palo Seco como comentábamos antes, como Montserrat, por ejemplo, Próxima Nova, que se han utilizado tanto, que ya es como comentaba antes, el estándar, no decimos nada, simplemente decimos, aquí estamos. Se suele contrastar con una tipografía más diferente, algo para darle personalidad, porque si no parece como que estamos ahí, pero no decimos nada importante. Por ejemplo, en esta tienda, lo que conseguimos con esa tipografía es no llamar demasiado la atención, como las ilustraciones tienen tanta fuerza, porque tiene muchísimo color, incluso la tipografía del logotipo tiene mucha personalidad. Para los títulos y los párrafos utilizamos una tipografía de Palo Seco para no llamar demasiado la atención, para que no haya tanto caos. La tipografía funciona muy bien, tiene muchísima elegibilidad, incluso en pantallas de poca resolución, por eso se utilizan los lectores y es muy versátil, se puede utilizar hasta para logotipos con una intención o con otra. Se viene utilizando en todo tipo de sectores, bueno, es como... sus peculiaridades es muy legible, pero es muy versátil, funciona para unas cosas y para otras. Aquí tenemos un ejemplo de mala tipografía en el título, en el slogan, porque del hero porque no se ve, no se lee nada, está la imagen detrás que tiene muchísima fuerza, y el título apenas se lee, eso también es tipografía. Vemos que también puede ser utilizada en distintos ejemplos. Aquí os traigo un ejemplo de mala elección tipográfica, porque yo lo que veo es infantil, cash converters. No le pongas esa tipografía a la escuela infantil por mucho que te parezca amigable, cercana para niños, porque parece una sucursal del cash converters que ya estaba antes. Para mí es una mala elección, al elegir una tipografía siempre tenemos que tener en cuenta con qué otras tipografías o el contexto en el que nos lo vamos a encontrar. Me diréis, Ana, pero yo quiero saber números, o sea, yo tengo una tienda y quiero generar más ingresos. Realmente al mejorar la tipografía voy a conseguir ingresar más, que es la pregunta del título y es lo que vengo aquí a contar. La verdad es que se han hecho pocos estudios, pero yo he encontrado alguno, y os traigo las cifras y con esto acabo, Dani. Un aumento, un estudio que se hizo, por cierto la presentación la vamos a compartir, todas las presentaciones de toda la WorldCamp van a estar disponibles para todos vosotros y yo tengo enlaces en cada una de las, cuando tengo que citar una fuente y podéis ver el estudio completo, pero os extraigo estas cifras, mejora, disminuye la tasa de rebote, disminuye el porcentaje de abandono, aumenta las páginas vistas y aumenta en 133% el rato de conversión. Por lo general lo que he podido ver es que normalmente el tamaño de letra de las páginas web es demasiado pequeño, siempre si aumentamos un poco vamos a mejorar. Y luego el resultado de otro estudio es que las tipografías manuscritas este ejemplo es de los títulos cortos sabéis que la gente no lee y para impactar el título, nada más abrir la página web, si es corto y grande convierte más un 334% con ese cambio y por último lo que os comentaba antes de la tipografía manuscrita se hizo un estudio poniendo una tipografía manuscrita en productos en los que queremos ser más cercanos y funcionan mucho mejor que una tipografía de palo seco y al revés, en un incesticida funciona mejor una tipografía de palo seco que una tipografía manuscrita por la sensación que nos da de casero que sí es más apropiado para productos como por ejemplo de higiene femenina y este ejemplo de la página web y muchísimas gracias muchas gracias que lo que tenemos un poquito de tiempo para dar algunas preguntas si queréis hacerme alguna pregunta estaré encantada de contestar es para el vídeo os tengo que recordar que si hacéis preguntas que os doy una tarjetita que os interesa dase la por favor Dani, gracias yo quería saber tu opinión si ustedes hacen fuentes de defensa abierta no implica tener que comprar la fuente no implica tener que instalarla un worker y si ahora de hecho hay plugins que te lo facilitan muchísimo y si Google Fonts te da una selección completa de todas las fuentes de Google y que si tu opinión crees que es algo bueno o algo malo desde el punto de vista que al final todas las webs que tienen un desarrollo un tiempo de producción o un coste medio van a ser todas iguales si todas las webs son iguales y tu te preocupas por la tipografía tienes una oportunidad para destacar Google Fonts es un servicio en el que mucha gente muchas empresas aportan la tipografía y son libres los podemos utilizar por tanto siempre va a ser positivo también es verdad que aunque las tipografías estén avaladas por Google no todas son buenas tenemos que fijarnos en una serie de características que tienen que cumplir la tipografía que os recomiendo unos vídeos muy buenos de una talana cirujano que explica todas estas características del vídeo de la Work on Mirun en WordPress TV, perdón que me autoreferencia pero si que hago un análisis de qué es lo que tiene que cumplir la tipografía, pues que tengo un mapa de caracteres amplio una serie de cosas y visitáis el vídeo digo también por no repetir porque esto también se está grabando Google Fonts es un servicio muy bueno, ¿por qué lo preguntas? porque piensas que porque todos tiramos de ahí y al final utilizamos las mismas sí hay estudios que demuestran que leemos mejor las tipografías que más conocemos si tu web tiene mucha lectura utiliza una de esas tipografías estándar, si quieres darle más personalidad pues no utilices una robota una próxima nova o una de esas que se utilizan tanto una monserrat pero si te interesa mucho la legibilidad si utiliza una de estas porque el usuario está más acostumbrado y la legibilidad es mejor efectivamente los informáticos dicen que la mejor petición la más rápida es la que no se hace y cuando tú tienes una tipografía de Google Fonts, antes de visitar la web seguramente ya la tengas en tu navegador porque ya has visitado otra web que la tiene la WPO los expertos se ven velocidad muy bonito no lo he oído nunca, tanto va el web master a la fuente que al final verdana muy guay vale vale muchas gracias