 Bueno, pues vamos a continuar con una charla antes de la siguiente paradita para el café, aunque estoy seguro de que vais a terminar muy despiertos después de escuchar Ana Cirujano. La verdad es que esta presentación en concreto me hacía mucha ilusión hacerla, porque tengo muchísimo aprecio por Ana. La verdad es que desde hace algún tiempo estamos llevando una trayectoria un poco paralela en algunas workouts a las que estamos asistiendo juntos y me hace mucha ilusión poder presentarle en Work at Iroon a una persona que la considero una gran amiga. No solamente es otra persona como el resto de la gente que está participando hoy que da muchísimo a la comunidad, muchísimo valor, en concreto Ana está trabajando ahora como líder o lideresa del grupo de diseño, del equipo de diseño de WordPress España. Mañana tendrá una mesa aquí con lo cual todos los que sois diseñadores web, diseñadores gráficos, vais a poder trabajar directamente en WordPress, un poco acompañados acompañados de ella. Y desde hace un año aproximadamente decir en una workout en tipografía, es decir, Ana Cirujano. Así que aquí va a venir a explicarnos, a enseñarlos algo que casi casi el nivel de workout ya es una especialidad y en la que estoy seguro que vamos a disfrutar todos mucho. Y ahora en Castellano. Hola, buenas tardes a todos, muchas gracias a todos. gracias por venir al track A y espero que disfrutéis de esta charla. Lo que era muy bonito, pero es muy difícil. Bueno, pues vamos a hablar de tipografía. Si es importante elegir la tipografía para la web, realmente no quiero convenceros de esto. Yo quiero que conozcáis cuál es mi método para seleccionar una tipografía. Es simplemente eso, es compartir en qué cosas pienso yo, qué fijo para elegir una tipografía, para que os sirva a vosotros cuando tengáis que elegir una tipografía. Y si es importante o no, pues creo que será evidente cuando espero que se evidente la respuesta cuando termine. Bueno, ya me ha presentado Pablo, así que no se fa... Lo que sí que quiero decir es que por favor, si sois diseñadores o si os interesa el diseño y queréis aprender cómo se colabora con el diseño de WordPress, y esto es así, es verdad, es una cosa muy grande, realmente podéis que a uno de vosotros puede colaborar con el diseño tanto UX como UI de WordPress, para mí es una cosa increíble, que no son unos estadounidenses, los que lo hacen, que podemos ser nosotros, los que colaboremos. Venís mañana, por favor, a la mesa de diseño, si no venís a diseño, ir a cualquiera de las otras mesas, trae del portátil, que no se se olvide, porque vamos a aprender muchísimo, y en vez de presentarme quería decir eso. Y ahora, bueno, siempre empezamos definiendo lo que es tipografía. A mí me gusta decir que hay tipografía y tipografías. Tipografía es el método de reproducción mecánica por el cual se utilizan las letras para componer textos, pero también es... tipógrafo es el que diseña tipos, pero también tipógrafo es el que elige una tipografía. O sea, probablemente todos los que estamos en esta sala somos tipógrafos, técnicamente los somos, porque componemos el texto. Tipografía también es la forma de componer los textos en la web. También diferenciamos entre microtipografía, que sería el interletrado, el espacio entre letras, también el espacio entre palabras. Y macrotipografía, que sería la maquetación. ¿Cómo componemos esos textos para que funcionen con las imágenes? ¿Cómo repartimos las jerarquías, los espacios? Todo esto es tipografía. Es una disciplina del diseño gráfico, que es mi preferida, me apasiona, porque recoge además todas las técnicas de diseño que se aplican en otros campos, como puede ser la composición o el color, que se recoge en tipografía, porque se tienen en cuenta todas esas cosas, tanto las formas como el color y todo esto. Y se suele decir que la tipografía es como el traje que le ponemos a las palabras. Dotamos con la tipografía de un sentido a la palabra escrita, independientemente del texto que estemos mostrando, la tipografía que elijamos va a ser el aire que le queremos dar, la imagen, el traje. Si hay una entrevista de trabajo o si voy a la playa, giré una ropa u otra. También esto es algo muy cultural. Para nosotros James Bond podría ir así vestido, pero en otros países los árabes se ponen la túnica. En fin, esto es cultural, la tipografía también lo es. Por eso los diseñadores gráficos debemos tener una formación también cultural y conocer las tendencias y las culturas para las que trabajamos. Lo de elegir un traje u otro es muy importante para eso, para ir a una entrevista de trabajo. Y también puede serlo para definir tu identidad. Esto es algo que se ve muy claramente en las tribus urbanas. Para mí esto sería como la... ¿Qué tipografía eliges? Hay alguno que está un poco despectivo, pero esto no es lo que he cogido de por ahí. Lo de jevitrón y perrofluta es un poco raro, pero para ilustrar un poco lo de... Cuando eliges imágenes libres de derechos, he hecho lo que he podido de verdad. Es lo que no me quiero despistar, es importante para las tribus urbanas. Yo me pongo de una manera, porque quiero decirle a los demás cuándo me vean quién soy, de qué tribu pertenezco. Los skingeds. Los skingeds nacieron en el año 1969 en Reino Unido. Y los primeros skingeds sabéis que siempre las tribus urbanas están enfrentadas. Los primeros skingeds estaban enfrentados a los hippies. Eran grupos de izquierdas, obreros. Los tirantes y las botas militares son de analogía al obrero. Son grupos que resolvían los conflictos de manera violenta. En contraposición a los hippies, que eran más tranquilos, eran de clase acomodada. Los skingeds eran obreros, eran de izquierdas. En Inglaterra, eran también inmigrantes hawayanos. La mayoría se fueron formando el movimiento. Después en los años 80, cuando en Reino Unido hay una inmigración de Paquistaníes y de otros indios, empieza a cambiar el movimiento, empiezan los partidos políticos neoliberales, empiezan a captar skingeds como eran violentos, que eran más húigans, eran gente que les gustaba. Resolviar los conflictos de manera violenta, captaban estos skingeds para sus movimientos, su activismo político neoliberal nazi y de derecha irracista. Por eso empiezan a surgir skingeds nazis. El skinged que yo por lo menos, antes de saber toda esta historia, cuando tú ves a una persona con unas botas militares, los cordones de colores, que también depende si es blanco, puede ser racista, si es rojo, puede ser comunista. ¿Qué pasa en esta foto? ¿Que hay un punky? ¿Cómo puede ser un skinged racista si es un punky? Porque los punkies en estos años, en los años 80, hacían esto, están haciendo saludo nazi, pero lo hacen para reírse, porque son punkies, entonces lo hacen para reírse. ¿Qué pasa? Que hay muchísima confusión. Hay mucha confusión y entonces, incluso llevan la esbástica, pero no, no, están en contra del racismo y todo esto. Aunque sí que hay, como os contaba, los otros que están captados, que sí que son de derechas. Como hoy toda esta confusión, nace el movimiento de los... ¿Quiénes son estos? Los arperos. Me consta que en el País Vasco hay sarperos, porque en la World Camp Bilbao, que fue hace dos semanas, bajaba yo hacia el museo marítimo y me encontré con esta pegatina. Digo, anda, mira, me lo voy a llevar para la ponencia de Eirut. Porque, claro, los sarperos, estos son de Beijing, parecen... parecen skingeds nazis, ¿no? Tú lo ves y dices... Juegas, te llevo una esbástica. Ya si te acercas, ves que lo que está haciendo es una bota que pisa la esbástica nazi, ¿no? Claro, tenemos que aprender... tener una clasificación de la historia, de las tribus urbanas, de... de en qué me tengo que fijar para saber si es un skinged racista o si es un sarpero, que es contra... Bueno, el otro día, investigándole y dice, bueno, tú le dices hi-healer y si te pega... si te pega, era sarpero. Entonces, ¿por qué nos habla de los nazis? Bueno, pues porque aquí tenemos sarperos y nazis, son todos skingeds y no somos sarperos, esos son nazis, ¿cómo los identifico? Tenemos que tener una clasificación y conocer la historia. Microsoft no podía incorporar la albética en el sistema operativo porque tenía licencia de Adobe. Entonces, se inventó la Ariel, que es una mala copia de la albética y se puede diferenciar, pues, por ejemplo, si os fijáis en la A, ves que los remates son distintos, bueno, no son remates, que son de palo seco, la terminación, ¿vale? Ariel y Bética, pues eso sería... No están preparadas para pantalla, también como la Roboto, podía haber elegido alguna palabra con A y con S para que lo vierais bien, pero la Roboto pues tiene los trazos más abiertos, funciona mejor en pantalla, y además está más condensada. Sabiendo esto, conociendo la historia de la albética y la Ariel y conociendo en qué te tienes que fijar para saber si está preparada para pantalla o no, puedes tomar decisiones, ¿no? Puedes empezar a tomar decisiones, pero hay muchas más decisiones que podemos tomar. En tipografía, pues, estudian varias clasificaciones, muy específicas, pues, dentro de... pues, tenemos la humanista, la galala, la negrotesca, y te puedes estudiar si eres un friki, te encanta, pues, te empapas, te miras los remates con las terminaciones, te encanta, pero esto, si sois frikis, pues, por supuesto, claro que sí, es genial, pero podemos asimilar un poco más, porque si no somos diseñadores, sólo queremos elegir una tipografía para un blog, pues vamos a resumir un poco, ¿no? Podemos resumir esto lo cogido de Myphones, que es la clasificación que ellos hacen, parece que es muy clara, muy ideática, y que la podemos entender perfectamente, ¿no? Es la sans serif, bueno, la hipcia o sans serif con remates, display, bueno, vamos a ver ejemplos. Esta sería una serif, ¿vale? que es una... es que se me dice un salto a cielo. Un salto a cielo. Esta... sí, a ver, joder macho, se me ha habido... ¿cómo se llama? es didona, es didona, ¿por qué? ¿por qué no es slap, no es egicia? porque tiene... la egicia tiene más remates aquí y lo vamos a ver. Esta es egicia, esta es como una... es que se ya se me ha ido. Esta es como la Clarendon, ¿vale? Es otra, más moderna, pero es tipo Clarendon, ¿vale? ¿En qué nos fijamos? Yo no me sé los nombres, pero sé la clasificación en general, ¿no? y no se me fijo. Esta tipografía es más elegante que esta, pero esta es más legible. Este tipo de... las egipcias se suelen utilizar para las revistas. Por ejemplo, Sonara, si tú conoces esto para que se suelen utilizar si tú quieres hacer un folleto que quieres que sea muy legible o una revista, vas a utilizar este tipo de letra o una legicia. Esta es una... estoy quedando fatal. Es que me pongo nerviosa. No, porque Próxima Nova, es que, joder, me gusta mucho el tema y me fastidia no decirlo bien. Es que la Próxima Nova la utilizo mucho. Pero bueno, oye, que es así. ¿Para qué? Esto estaba preparado para que más chicas se animen a dar charlas. No pasa nada si se te olvida. Estoy disfrutando, gollón. Como decía Fermín Muguruza en el concierto este que decía los funcionarios no son monstruos extraordinarios, pues esto. Los ponentes de la World Camp no somos estrellas, cualquiera puede dar una charla. Que me entro que Fermín Muguruza es de aquí, eh... Total. Esta, Display. Display para qué se utiliza, pues no puede utilizar una Display para el texto corrido. Display se caracteriza porque son tipografías que están hechas para títulos. Son tipografías que tienen, pues, son más complicadas, tienen más adornos, más historia. Y entonces, en texto corrido no se leería. Bien, en texto corrido son los párrafos. Entonces, son específicas para los títulos. Si yo quiero elegir la fuente para un título que sea diferente, pues digo, ah, pues Display. Me acuerdo de que es Display y busco fuentes Display. Que son un poco más interesantes. Handwriting, pues las que están escritas a mano. Para una web, pues no vamos a poner por favor todo un texto en esto porque es que no se lee bien. Es que se nos van a ir los visitantes. Pero si lo podemos utilizar en una web, por ejemplo, para destacar una palabra entre un texto o para un botón para destacar, pues para romper una armonía podemos utilizar una fuente así, no, para dar más cercanía. Pero no, por ejemplo, para el texto corrido porque no se va a entender. Y esta sería pues la Serif, perdón, la Script. Madre mía, gracias. No, no. La Script, pues estas son las raras, ¿no? Aquí cabe eso es decir, cajón, desastre. Porque aquí metes todas las demás, las de fantasía, las que no caben en las demás clasificaciones, ¿no? Entonces, teniendo estos seis tipos de tipografías en mente pues ya podemos ir exponiendo el embudo de a ver cuál es el hijo, pues dependiendo de lo que quiera mostrar, ¿no? Aquí me apetecía hacer la distinción entre... porque la última tipografía que hemos visto puede parecer que es un lettering, ¿no? Que imita esto. Caligrafía siempre se hace con un solo trazo. Era lo que hacían los primeros escritores, ¿no? Con un solo trazo. Y no se puede modificar. La caligrafía clásica era siempre todas las letras iguales, la A siempre tenía esa forma, la N, la M siempre esa forma. La caligrafía moderna es esta, como esta, así que el caligrafo le puede dar un poco de personalidad, ¿no? Pero siempre es un solo trazo. El lettering sí que se puede modificar y además se hacen palabras concretas. Tuvo que hacer un lettering para hacer la palabra irún, pero no son letras sueltas, es lettering para una palabra concreta y estás haciendo esa obra y luego si lo puedes modificar, cada uno tiene su estilo y tal. Y la tipografía aunque también podemos tener tipografías de ese estilo e incluso porque puede decir la caligrafía, las A son iguales o sea, son distintas y la tipografía siempre son iguales, es la misma porque está prediseñada es la característica de la tipografía, pero no porque con las características open type también podemos tener como es incluir adornos en alguna variaciones específicas en alguna de las letras, esto ya se puede hacer pero eso ya están prediseñadas no las diseñamos en ese momento entonces volviendo a lo de la ropa pues la de arriba sería una tipografía para poner Hawaii, para ir a la playa para algo informal y alegre y la de abajo una serie pues sería más elegante cuando elegimos la tipografía pues está mereciendo eso eso nos fijamos qué queremos mostrar aquí por ejemplo cuando vamos a hacer una web para una boda si elegimos esta tipografía a mí que tengo cultura visual porque me preocupo en fijarme en estas cosas a mí me recuerda más a un equipo de Ruby que a una boda, aunque bueno si ellas son jugadoras de Ruby pues podrían hacerlo así pero si no, se están equivocando realmente es cuestión de gustos no, es que tú estás la persona que está viendo la web está recibiendo una información entonces tienes que tener claro que información quieres dar a lo mejor el torneo de tennis sería la tipografía para una boda ni te gustaban ni te gustaban menos, es que es lo que estamos acostumbrados a ver en las invitaciones de boda te lo vamos a identificar inmediatamente y cuando veamos la web ah, esta es la web de una boda qué decirle de la Comic Sans bueno pues la Comic Sans se ha hablado mucho porque es una tipografía que es mala pero es que no hay tipografías buenas ni malas depende de cómo la usas es que se ha utilizado mal, se ha utilizado para hacer documentos oficiales y era para comics bueno, sí, es verdad pero es que además tiene un kernel incorrecto si veis entre la F y la O hay mucho más espacio que entre la R y la M la modulación está en cada letra distinta esto se lee fatal la sensación que te da es de no no es informal es de Javés, Scootre o sea, yo la he utilizado y sí la he utilizado bien porque yo la he utilizado y es selectivo en este caso solo se puede utilizar la Comic Sans y a quién le suena esto esta esta bodega está según bajas hacia aquí por esta venida me he encontrado con esta bodega y le he hecho una foto está utilizando una letra agótica que bueno, las letras agóticas utilizó en el siglo IV para hacer manuscritos de la Biblia entonces, claro, te dice bueno, quiero darle un rollo rústico pero rústico de los mógeles del siglo IV además este tipo de porque hay otro tipo de letras agóticas más sencillas este de los más complicados en fin no se lee nada de hecho, gótico significa elegible, desagradable es un... es peyorativo otra cosa que nos fijamos esta tipografía está pensada para pantalla porque la elbética es una tipografía fantástica fabulosa pero no está pensada para pantalla no podemos utilizar elbética en nuestra web porque no está pensada para pantalla no tiene Kernie ahora sí que se están haciendo elbética es para pantalla pero tienes que aplicarle este es un efecto óptico mediante escala de grises haces que las curvas se hacen a los píxeles, eso es importante y luego también lo que comentaba antes de las aes y las es que tienen trastas más abiertos con lo cual también en pantalla son más legibles porque en la pantalla emite luz en papel no importa que sea más cerrado pero en la pantalla sí otra cosa que nos fijamos es la altura de la X cuanto más alta sea la X de la tipografía la altura de la X es la altura de la X a la izquierda vemos que es más alta y la de la derecha es más baja es más legible la que tiene la altura de la X la altura de la X es más grande y luego que sea legible porque los caracteres entre sí se diferencian nos podemos fijar hacer esto poner una L, una Y y un 1 y ver si se diferencian o no cuanto más distinto sea entre sí más legible será y luego el idioma tenemos la cedilla para catalán tenemos todos los caracteres que necesitamos para el idioma y luego tenemos características oponente ligaduras son unos caracteres específicos que se hacen para la L y la I o la F y la I mejor dicho la F y la I entonces hace un caracter específico para que quede mejor y no parezca un error raro pues tal estas cosas, miramos que tenga un mapa de caracteres amplio que tenga diferentes pesos si elegimos una tipografía que tiene muchos pesos podemos utilizar una única tipografía para hacer una jerarquía a veces cuando estáis seleccionando una tipografía para la web 400 es el regular es un poquito más finito, le pones 300 y no cambia no cambia, no funciona CSS esa tipografía no tiene ese peso tiene que estar diseñado en la tipografía que tenga cursivas verdaderas vale no simplemente que se inclinen y ahora cómo combina la tipografía si ahora volvemos aquí al cachondeo sandal con tacones sandal con tacones las modas son modas no está bien si estas chicas que son famosas llevan esto las modas, como decía George Simmel parten de las élites pero realmente sabemos que está demasiado contrastado es el sandal para hacer deporte y los tacones para ir a una reunión de trabajo no, en principio no ahora es verdad que como todos si tu conoces las normas te puedes saltar o si tu eres la reina te la puedes saltar incluso lo pones de moda como decía pero siempre que pensar esto me encanta lo negro y algo de arriba azul marino pero no lo he encontrado pero bueno sabéis que vestir de negro y azul marino los ejemplos que he encontrado si pegaban porque si que estaban suficientemente contrastados eran azules raros pero si que os reconoceis el azul y el negro que no pega porque son demasiado parecidos pues esto hay que hacer para combinar bien las tipografías que tengan condensado o expandido que sean dos condensadas bien porque es mucho que no haya demasiado contraste ni mucho contraste ni muy parecidas si vas a elegir dos tipografías que se parecen pero no son iguales parece un error el ojo lo percibe como un error entonces siempre eso pues elegir el término medio para combinar y esto es todo muchas gracias muy bien gracias Ana preguntas oye muchas gracias por la charla yo tengo una duda aquí sobre todo aquí claro al final euskera castellano incluso francés en muchas webs por ejemplo en euskera la TZ o TX que a veces puede chocar según qué tipografía o en francés la O con la E si es una misma web elegirías tipografías diferentes iguales por estimización y que no tarde demasiado encargar la web intentaría encontrar una tipografía que tenga características open type que tenga estas ligaduras que esté cuidado eso para poner la misma tipografía o sea solo una tipografía para todos los idiomas tipografías que funcionan mejor en un idioma que en otro si fuera chino japonés si elegirías una tipografía o árabe pero si vas a escribir con caracteres latinos pero si que tienes estos caracteres pues que tenga las características open type y que solo tenga cuidado eeeee intentaría utilizar solo una si si la tipografía que tiene esas características no te vale para el castellano que no tiene esas ligaduras no necesitas esas ligaduras también me parecería raro a ver habría que mirarlo es verdad que luego te puedes acordar de todo esto pero siempre en diseño tú puedes tener mucha idea pero siempre las cosas hay que probarlas para saber cuánto interlineado dejas pues tienes que verlo vas viendo haberme pasado un poquito menos no puedes incluso para papel siempre tienes que imprimir para ver realmente impreso no poder ver en pantalla entonces estas cosas yo te diría también pues es que lo pruebes y si quieres hacer una buena tipografía con estos idiomas que intentes buscar el que tenga y seguro que funciona en castellano si no pues intentas buscar otra pero vamos yo creo que si es una tipografía que tiene en cuenta estas ligaduras va a ser buena que también es algo de lo que te puedes fiar que si tiene un mapa de caracteres amplio teniendo en cuenta que cada letra se dibuja vectorialmente como si fuera una ilustración aunque se utilizan algunos trozos de las letras para hacer otras si se han currado 300 caracteres y que han tenido cuidado que la tipografía va a ser buena hola Ana que tal Hola vecino no voy a decirte nada por la ponencia porque como siempre salimos con mil apuntes porque se aprende más de una ponencia tuya que de un curso te quería hacer una pregunta para alguien que empieza con el diseño web si te viniese y te preguntase para aprender cómo hacer una buena tipografía para un diseño web por donde tendría que empezar que le responderías por donde tienes que empezar hay unos vídeos muy guais en web prestewey de una talana cirujano que son muy básicos muy básicos puede empezar por ahí perfectamente luego tiene a cirujano mi twitter me puede hacer todas preguntas que quiera como precisamente en una localidad gilpuzquana el 20 de julio tiene un curso de tipografía responsive que también empezare de cero y llegare hasta alfinito y más allá oye Jaime muchas gracias tío que me has puesto a huevo yo me llevo comisión que estoy en medio esa pregunta te la van a hacer mil gracias por tu charla porque siempre es lo que me ha hecho el compañero aprendemos un montón pero me toca hoy a mi hacerla y es cuando eliges tipografías para web en cuanto a titulares o el texto el párrafo escrito que tiene un nombre que has dicho muy bonito texto corrido a mi es que eso parece que se me va a ir un poco de texto viene del diseño editorial yo vengo de diseño editorial y utilizo esos términos pero ahora serian en la web serian los párrafos es decir una fuente con serifas o sin serifas para los titulares o para el texto corrido que consejo de nos darías es un truco muy bueno utilizar una serif para los titulos y una sans serif una de palo seco para los párrafos o al revés precisamente por lo que comentaba antes del contraste inmediatamente a la persona que lo vea a ver cuando es un h1 y un párrafo ya solo por tamaño o por peso el peso es el grosor ya tú vas a diferenciar inmediatamente que esto es un titular y el otro es un párrafo pero cuando llegamos a la vez y llegamos al h4 al h5 y se parece mucho en tamaño si una de ellas es de palo seco y la otra es con con serifas el usuario del lector lo va a identificar mucho mejor y esa jerarquía se contraste va a ayudar a la jerarquía y pues eso lo va a comprender se va a comunicar mejor porque va a comprender mucho mejor el texto de un vistazo, no tiene que hacer el esfuerzo pero esto es el titulo o esto es un párrafo más, todo eso ayuda es más te diré para combinar por claro tú dices si estoy utilizando tipografías demasiado contrastadas palo seco y estas con serifas pues si no quieres complicarte puedes utilizar tipografías que el diseñador ya ha pensado que funcionen juntas los propios diseñadores dicen yo te hago esta tipografía Droid y utiliza Droid Sans y Droid Serif va a funcionar muy bien esta la Droid, la PT la Meriwether también tiene hay muchas tipografías que el diseñador o la fundición la fundición se llama las empresas que hacen tipografías ya ha considerado eso vamos a hacer una que funcione y que contraste para que lo utilicen sin que no me la mezclen con otra que no pegue bueno pues si os parece venga última pregunta lo de la clasificación que cada uno haga su propia clasificación tú vives en la Sierra de Madrid esta semana dos cuartos más para allá eso sí este fin de... no contemos intimidades a la hora de pasar de la versión de escritorio a la versión mobile que tienes en cuenta si es muy largo no me lo cuentes se tiene mucho en cuenta mucho en cuenta ya te digo, me auto referencia si es que a ver yo insisto en que la tipografía responsive es muy importante porque por la distancia del dispositivo respecto al lector el tamaño óptimo para ver una tipografía es siempre el mismo pero el móvil lo vemos desde más cerca y el escritorio desde más lejos entonces en escritorio la letra tiene que ser más grande y el móvil tiene que ser más pequeña y eso, el tamaño de tipografía te va a condicionar todo lo demás te condiciona el interniñado te condiciona el ancho de la línea te condiciona muchas cosas que tienes que ir controlando cada vez que cambieses la media query y cambies el tamaño también tienes que cambiar a su vez como mínimo el interniñado bueno, ahora sí, ¿lo acuerdo? vamos a dejarlo aquí