 Bueno, muchas gracias a todos por estar aquí, yo también estoy abrumada, como decía mi amigo Fernando, somos muchos, ¿no? Espero que disfrutéis de la charla, es una chapa, la estaba repasando ahora y digo que me perdonen porque es una chapa, ¿vale? Necesito mucha atención, hay que fijarse en la forma de las letras, en la serifa, en el palo seco, o sea, por favor, os quiero ahí con vosotros, conmigo a tope, ¿vale? Yo estoy con vosotros ahí a tope, vosotros conmigo, porque es una charla chunga, ¿vale? Un poco, no es pasta ahora, ¿vale? Pero bueno, intentaré que sea mena, aunque no tengo ningún chiste preparado ni nada, ¿no? Es bastante seria la charla. Me ha presentado muy bien mi amiga Ojaya, me gustaría decir que soy embajadora de la marca de Piensa Solutions, que es un hosting, un product de hosting especializado en WordPress con un plan gratuito, que tengo un podcast desde hace ya más de cuatro años, con mi amigo Pablo Moratinos, que se llama un billete a Chatanuga, y que también tenemos una academia online que se llama 3M Media School, y si queréis apoyar la creación de contenido, pues que me seguís en redes. Y venga, vamos a ello. Habréis visto el título de la charla. Estas son las churras y estas son las merinas. Las churras son las que dan buena leche y buena carne, y las merinas son las que dan buena lana. Entonces, los que saben de ganadería dicen, no mezcleis las churras con la merina, pues se estropea la raza, ¿no? Para mantener la pureza a nadie se le ocurre mezclar churras con merinas, y ahí viene la expresión. Y también en el calle nos decían, cuando ponían los problemas de cálculo, decían, no mezcleis, peras con manzanas. Pues esto es lo mismo, ¿no? Hay cosas que no se pueden mezclar. Y yo ponía el ejemplo, ¿no? Añadía, pues tampoco mezcleis Bodoni con lobster, porque la tipografía, yo digo que es como el traje que le ponemos a las palabras, ¿no? La tipografía dice más que lo que dicen las palabras y tienen una intención comunicativa. Bodoni es elegante, es la tipografía que se utiliza en la revista de moda, es una tipografía muy seria, ¿no? Sin embargo, lobster veis, ¿no? por las formas que tiene, por lo que comunica, es una tipografía que más que un traje lleva un disfraz, ¿no? Es para que se utiliza en momentos muy puntuales, pues en invitaciones de cumpleaños de los niños y cosas así, ¿no? No mezclemos Bodoni con lobster. Cuando estamos diseñando un sitio web, la mayoría de las veces con WordPress, siempre tenemos que tomar una decisión de tipografía, ¿no? Hay que elegir una tipografía, y a veces más de una, ¿no? Para que no nos equivoquemos al combinar tipografías, pues tenemos, o bien, que las dos tipografías que utilizamos tengan la misma intención comunicativa, que no sean tan diferentes, ¿no? Una dice una cosa, otra dice otra. O, ah, esta no es la última versión, me ha pasado igual que a mi amiga Lucía. Tan negativo es que sean muy distintas, como que sean muy parecidas. Por ejemplo, tipografías que todos conozcáis. Arial es muy parecida a Inter, por ejemplo, ¿no? Estaban mirando alguna cosa para que veáis. Pero, bueno, Arial y el Bética, por ejemplo, son tipografías muy parecidas, de hecho, una se basa en la otra. Muy parecidas, muchos ni siquiera sabemos distinguirlas, pero son distintas, ¿no? Si te fijas en los detalles, son distintas. No puedes combinar una con la otra, ¿no? Si eliges una, no puedes elegir la otra. ¿Por qué? Porque se parecen tanto, que parecen la misma y parece que es un error, ¿no? Parece que te has equivocado. Normalmente utilizamos distintas tipografías por una cuestión práctica para jerarquizar visualmente los contenidos de una página web. Por ejemplo, con el contenido de la web de la Workam, ponemos... En este caso, estamos jerarquizando perfectamente, utilizando únicamente una tipografía que es Inter, la que he nombrado antes. Pero lo que hacemos es utilizar distintos pesos, negrita, redonda, normal y medium, ¿no? Bold, regular y medium para poder que la letra se lea mejor y tenga más jerarquía, simplemente variando el peso, ¿no? Entonces no necesitamos combinar distintas tipografías para conseguir una diferenciación jerárquica, simplemente con variar el peso ya sería suficiente. Esto lo podemos hacer porque estamos utilizando Inter que tiene todos esos pesos. Si fuera una fuente variable, también lo podríamos hacer. Pero, por ejemplo, imaginaos que quisiéramos haber utilizado para los títulos la tipografía Spoof, que es una tipografía que tiene más personalidad, tiene una entición comunicativa un poco más personalizada que Inter. ¿Qué ocurre? Que para los títulos va fenomenal, aunque los de fondo no lo vean muy bien, pero... Bueno, perdón, utilizamos, que me ha ido la siguiente. Utilizamos esta tipografía para los títulos que tienen mucha personalidad y, en vez de Inter, utilizamos tiempos que pensamos que también tienen más personalidad y que es una tipografía muy legible. ¿Pero qué habría ocurrido? Si utilizamos, o sea, lo que iba. Si utilizamos la misma tipografía para los párrafos, que para los títulos, en este caso, esta tipografía no se puede utilizar en los párrafos porque las formas no son legibles, no lo veis muy bien, pero ya os lo cuento yo. La E tiene el trazo tan cerrado que en tamaños grandes así se distingue, pero en tamaños pequeños parece una O. Las personas que tienen baja visibilidad, cualquiera de nosotros puede ser una de ellas, no van a leerlo bien, ¿no? Entonces, si elegimos esta tipografía para los títulos, ya no la podemos utilizar para los párrafos. Tenemos que combinarla con otra tipografía diferente. En este caso, fijaos, aquí se ve más claro, aquí todo el mundo podemos decir, sin tener muchos conocimientos de diseño, que esta tipografía para los párrafos no se lee nada bien, aunque sí que funciona muy bien para los títulos, ¿no? En este caso, diríamos, bueno, vamos a utilizar, por ejemplo, el ABC, que es una tipografía que se utiliza para los niños en el core, con Permanent Maker, que tiene la misma intención comunicativa y las formas combinan bastante bien, y es mucho más legible que utilizarla de los títulos, ¿no? Ya veis un poco qué necesidades nos llevan a combinar tipografías. Hay otro caso en el que es una mala eridición de tipografía y es cuando utilizamos para los títulos algunas charlas, o sea, perdón, algunas tipografías que para los párrafos funcionan muy bien, son muy legibles, pero para los títulos no nos dicen nada, ¿no? Al tener tampoco contraste, es muy sosa, ¿no? Aquí podríamos mejorar también. Otro caso, Play for Display, es una tipografía que tiene mucha modulación, mucha diferencia de contraste en los trazos, que funciona para títulos, pero no funciona para párrafos. Veis qué de contraste que casi se pierde la forma de la letra, no se lee nada bien. En este caso, podríamos utilizar esta otra tipografía, ¿no? Pega fenomenal con Play for Display y que, sin embargo, se lee mucho mejor. Consejo, primero elegimos una tipografía, una para títulos, para párfos, para texto funcional y después elegimos la otra que va a combinar. No podemos elegir dos a la vez, sino que elegimos una, estamos seguros de que queremos esa, y después miramos a ver cuál puede combinar. Si vamos a hacer un cartel, un anuncio, queremos llamar mucho la atención, queremos comunicar algo con mucha personalidad, vamos a elegir primero los títulos. Si queremos que, sobre todo, se lea muy bien, vamos a elegir primero la tipografía para los párrafos. Y si queremos, por ejemplo, que es un producto o una interfaz, vamos a elegir primero el texto funcional, el texto que necesita leerse muy bien en los botones, en el pie de página, en los textos de llamada la acción, que va la letra muy pequeñita y que se va a usar mucho los menus, sobre todo en los productos. Y bueno, vamos a aprender ahora con tres niveles de dificultad, trucos para saber si una tipografía combina bien con otra o no. El primer nivel del que todos nos vamos a salir de aquí sabiéndolo, sin ningún problema, aunque no me estáis prestando mucha atención. El primero sería utilizar superfamilias, son familias de tipografía que ya están diseñadas para que funcione juntas, por ejemplo, DM Serif, DM Sands, tiene el mismo nombre, distinto apellido, ¿no? También tenemos PT Serif, PT Sands, Source Sands, Source Serif. Seguida vemos que es la misma superfamilia, familias distintas que van a combinar. Si queréis elegir DM Serif, pues combinarla con DM Sands. No os equivocáis, está bien, correcto. Segundo truco, usar mucho contraste. Cualquiera de los tipos de letra de arriba combina bien con cualquiera de los tipos de abajo. Es decir, podemos combinar una script con una Slav Serif, una Sands Serif con una manuscrita o una display, va a combinar siempre, porque tiene tanto contraste que van a funcionar bien. Hay un helicóptero, ¿no? Vemos que en el ejemplo, si ponemos una manuscrita o ponemos una display, son fuentes con mucha personalidad, pero luego, como la Sands Serif no tiene tanta personalidad, va a combinar perfectamente bien, aunque sean tan raras. Ponemos una fuente muy rara con mucha personalidad, otra que es como más tranquila y muy legible, y BMX. Y la tercera ya, un nivel más avanzado, sería fijarte en la forma de las letras, ¿no? Por ejemplo, en esta tipografía, vamos a analizarla, ¿no? Es de palo seco, es con Serifas, ¿cómo tiene el eje? Lo primero, vamos a ver que sí que tiene Serifas adornos. La A, nos vamos a fijar que tiene dos lóbulos, también hay que fijarse en la letra G, aunque no tiene ninguna. Esto lo tiene inclinado, en este caso, inclinado. Poco contraste o modulación, no es que no tenga, pero tampoco tiene tanto como tenía a preferir display y tiene menos, ¿no? Y la altura de la X, la diferencia entre las mayúsculas y las minúsculas, es, bueno, mediana, digamos, ni mucha ni poca. Con todo esto, nos fijamos, analizamos como la tipografía y vamos a ver en comparación con la otra, con la que queremos combinar, como es, ¿no? Por ejemplo, en este caso, es una tipografía que también tiene Serifas, pero el eje lo tiene vertical, inclinado como la otra. Mucho contraste o modulación, fijaos, la diferencia de grosor en los trazos, aquí mucho, aquí poco. Altura de la X, bastante generosa, que es más legible que si tuviera menos, y la A con dos lóbulos, ¿no? Como digo, la G también los tendría. O, en este caso, pues, tenemos una letra de paloseco, sin mucho contraste, no hay mucha diferencia de trazos en las letras. La A tiene un solo lóbulo, si hubiera una G también sería de un solo lóbulo, y la altura de la X, pues, es pequeña. Y con esto, pues, tendríamos las tres maneras de no equivocarnos al combinar, usar súper familias, usar mucho contraste y fijarte en la forma. Hasta el año pasado, yo era la manera en la que... en la que combinaba las tipografías. Había veces que me costaba mucho, hasta que hice un curso con Oliver Sondorfer, que él lo aprendió de... Indra Coopersmith y os traigo un truco que es genial, o sea, es de las mejores cosas que he aprendido en mi carrera como diseñadora, más de 15 años, ¿eh? Combinar tipografías de la forma fácil. Lo fijamos, esto lo habrá que en inglés una mejor, en español es un poco raro, pero bueno, nos vamos a fijar en el esqueleto, en la carne y en la piel. El modelo es el esqueleto de la estructura, como se ha dicho, es fácil detectar si es un eje inclinado, un eje vertical o un eje geométrico, ¿no? Si tiene el eje inclinado, es una tipografía dinámica. Si tiene el eje vertical, es una tipografía racional. Y si tiene el eje redondo, va a ser geométrico. Ya te digo que me voy a comer un poco de las preguntas. Perdón, ¿eh? Nos vamos a fijar también, en este caso era una tipografía con serifas, está sin serifas, pero igualmente tiene eje también. Inclinado, dinámico, vertical, racional y mololina, que no tiene mucho contraste, va a ser geométrico. Si tiene los trazos abiertos, va a ser siempre dinámico. Tiene los trazos cerrados, va a ser racional. Y si tiene trazos circulares, va a ser geométrico. Vamos a verlo, este sería dinámico. Además, cada una de estas formas de la tipografía, dinámico racional o geométrico, nos comunica cosas. Si es dinámico, es más amigable, más informal y va a tener siempre eje inclinado, dos lóbulos y los trazos abiertos. Si tiene los trazos abiertos, probablemente tenga el eje inclinado. Ya lo vamos viendo de una manera más fácil. Racional, trazos cerrados, eje vertical y la G con un solo lóbulo. Es una de las pistas que vamos a poder ver. Y si es geométrica, hay G con un solo lóbulo, trazos abiertos y eje circular. Después, nos vamos a fijar en el contraste y las serifas. Esta tipografía es lineal porque no tiene mucho contraste y es de palo seco, no tiene serifas. La siguiente, tiene contraste y tiene serifas. Esto es algo que es fácil de detectar. Y la siguiente, racional, lineal porque no tiene contraste y tampoco tiene serifas, es de palo seco. En este caso, racional, nos fijamos en el eje. En este caso, geométrica, como muy claro, lo vais viendo, fíjate que antes de entrar no diferencia, habéis una de otra y ya véis viendo cómo estos pequeños detalles se pueden identificar. Geométrica con contraste porque hay diferencia en los trazos y con serifas. Y esta es la madre del cordero. Tenemos esta matriz porque yo voy a compartir la diapositiva como todos los más ponentes. La vas a tener siempre a mano para ir comparando. Si combinamos cualquiera de los tipos de tipografía con contraste, con serifas o serifas, dinámica, racional, geométrica, cualquiera de las tipografías de las columnas, vamos a acertar. Está con esta, está con esta, vamos a acertar. Va a ser una buena combinación. O si están muy separadas, también vamos a acertar, tiene mucho contraste. Va a funcionar. Pero nunca, nunca vamos a combinar tipos de letra que estén en cualquiera de las filas. Y con eso lo tenemos. Luego podemos fijarnos en diferenciaciones más sutiles, tipografías que tengan serifas, stencil, tipografías más raras, que ya sería como eso, fijarnos en la piel, con bordes rugosos, vintas. Y ahora un ejercicio para ver si realmente os habéis enterado, o oído demasiado rápido, o son las cuatro a tarde. Esta tipografía que diríais, que es dinámica, racional o geométrica. Fijaos en el eje, fijaos en si tienen los trazos abiertos o cerrados, dinámica. Y esta otra, dinámica racional o geométrica. Racional, efectivamente. Bueno, yo creo que por lo menos un 9,5 habéis sacado, ¿no? Y con esto termino, la pregunta más importante es la que primero nos tenemos que plantear. Seguro que necesitas trafuentes. Y ahora, vamos a acertar, vamos a acertar, seguro que necesitas trafuentes. Y nada, muchas gracias. ¿Alguna preguntilla de tiempo? Sí. Bueno, me pasa un poco, pero me dicen por el pinganillo que da tiempo a una pregunta, ¿no? Creo que tenemos cinco minutos para preguntas o no, ¿sí? Cool. ¿Alguien tiene una pregunta? Para Ana, la crack de comunidad. Buenas, Ana. Muchas gracias por tucharla. Muy entretenida, aunque decías que era muy técnica, la verdad que ha sido súper entretenida. Bueno, gracias, Jaime. Para la gente que no falta esa estudiar mucho más tipografía para entender bien tus charlas, sobre todo ver muchas charlas tuyas para entender sobre tipografía. A la hora de elegir una tipografía para un proyecto normalmente de forma general sabes que hay tres, cuatro que suelen utilizar mucho. Hablamos de Popin, Hablamos de Montserrat o Ariel. ¿Qué me puedes decir de esas tipografías? ¿Tú recomiendas desviables seguir utilizándolas por el contrario información que se ve mucho por internet de diseñadoras y diseñadores y dicen, por favor, no vayas a utilizar Popin porque lo utiliza todo el mundo. ¿En qué casos sí? ¿En qué casos no? Un poco para la gente que no tenemos ni idea. Gracias por tu pregunta, Jaime. Muy buena. Popins es una tipografía que le pasa lo mismo que a la primera que he enseñado. No es accesible a tamaños pequeños. Se puede utilizar para títulos, para hacer un póster pero si queremos que diseñar párrafos no es legible porque tiene los tráceos muy cerrados y suele tener mucho grosor con lo cual las formas se empastan que se decía antes cuando se imprimía y no se distinguen bien las oes de las E's y no se debe utilizar para párrafos. Solo se tiene que utilizar para títulos. Popins concretamente se utiliza mucho pero no es accesible para párrafos. ¿Monserrat? Es legible pero se utiliza tanto que si te quieres para párrafos, bueno pero es verdad que ya no te diferencias no puedes utilizar es accesible y es legible. Monserrat es racional geométrica si no recuerdo mal. Lo puedes combinar con la propia Monserrat o con una que no tenga nada que ver una Play for Display por ejemplo es una combinación que yo usaba mucho. Y Ariel es una copia mala de la elbética. Pero como son las más populares esa batalla sí no se puede poner Monserrat y Popins siempre hay esa batalla de ¿Utilízala? ¿O no la utilices nunca? Muchas gracias. Buenas tardes Ana. Quería preguntarte si también se seguirían estos patrones para hacer miniaturas para vídeos por ejemplo para YouTube también se seguiría este tipo de psicología o sería un poco diferente? Es igual, a final la forma en la que percibimos la forma de las letras para una miniatura como para hacer un póster, un cartel una valla publicitaria, un roll-up o un... Pero solo se utilizarían las fuentes para hacer títulos ¿no? Porque para hacer párrafos igual no... A veces también necesitamos incluso si quieres poner una llamada de oferta o sorpresa que utilices un tipo de letra más pequeño es como fuera texto funcional o párrafo siempre que sea un tamaño pequeño y que te atención a la elegibilidad Entonces si vamos a combinar si estás utilizando una tipografía que tiene mucha personalidad o que tiene trazos muy gruesos mucho con mucho peso no usaríamos esa misma tipografía para hacer esa letra pequeña dentro de un círculo rojo oferta pues ahí utilizaríamos otra o esa misma pero con menos peso siempre que elegir la tipografía para el uso y el contexto en el que se va a utilizar que son tamaños pequeños hay que prestar mucho más atención a la elegibilidad que cuando son grandes porque se va a leer mejor y se puede arriesgar un poco más la elegibilidad Bueno Yo en mi web utilizo Interpara títulos y Moncerrat para párrafos O sea que es muy típico, lo sé No me matéis... No, es que son muy parecidas entonces parece un error El usuario no dice que se ha equivocado Uy, qué raro pero esta no es pero por qué no, sobre todo hay que tener una razón para elegir otra tipografía Y ahí no está justificada otra tipografía Esa es una petición más aservidor otra tipografía más encima para WPO No te viene bien utilizar otra tipografía más No se justifica El diseño, todas las decisiones tienen que estar justificadas, bueno y en la vida como nota Bueno, es un pátito verde Sí, para este pato ha contribuido a reducir la brecha de género en tecnología mediante la creación de programas de formación para niñas mujeres y personas no binarias Muy bonito