 Tiene mucho estilo y no le gusta que le toquen las fuentes. Así que nos va a explicar cómo podemos elegir el tipo de letra más adecuado para nuestra web. Ana, gracias. Buenas tardes. Muchas gracias a todos por estar aquí, por haber elegido el track 1. En el track 2 hay una charla muy interesante y bueno, la veremos en un gol por este V, porque yo también me la estoy perdiendo. Lamentablemente no podemos estar en dos sitios al mismo tiempo. Quiero agradecer a la organización que me haya dado la oportunidad de estar aquí un año más. Ya estuve el año pasado en Work in Valencia y para mí es un placer, además, estar aquí hablando de tipografía, en la que va a ser el capital mundial del diseño y la que ha sido también sede del Congreso Internacional de Tipografía. Muchos de vosotros lo conoceréis, no? Ha habido siete ediciones, hace años que no se celebra. Valencia tiene mucha tradición de diseño y mucha tradición de tipografía, no? Así que para mí es un honor estar aquí con vosotros hablando de letras. Ya me ha presentado Teresa, soy Ana Cirujano, soy diseñadora, trabajo con WordPress, trabajo con otros desarrolladores, con profesionales de marketing, de SEO, de copywriting. En fin, hago proyectos más grandes de lo que puedo abarcar, porque hago colaboraciones, pero soy freelance, tengo mi propio estudio. Tengo un blog que se llama Easyworkation.com y un programa de podcast muy chulo que también se emite como canal de YouTube, que se llama un billete a chatanuga con Pablo Moratinos, que le conocéis porque ha dado una charla antes. Sobre todo es un canal de entretenimiento, vamos a decir, bueno, hablamos también mucho de WordPress, algo de diseño y algo de marketing. Quiero aprovechar también esta slide de presentación para hablaros del Fondo de Fomento de la Diversidad de Joost, el plugin de SEO que todos conocéis, pues esta empresa para el Fomento de la Diversidad en Eventos Tecnológicos tiene un fondo de 25.000 euros al año, que no gasta porque la gente no lo conoce y del que yo me he aprovechado esta vez me han empagado el billete del tren y el alojamiento para venir aquí. Así que, en agradecimiento, quiero que todos lo conozcáis y si creéis que perteneceis a un colectivo poco representado en eventos tecnológicos, podéis ponerlos en contacto con ellos y solicitar la ayuda para que os paguen el viaje para ir a cualquier evento dentro de toda Europa. Y nada, sin más, vamos a hablar de moda, de ropa. Porque, bueno, me gustan las metáforas y yo creo que la tipografía es el traje que le ponemos a las palabras. Cuando utilizamos una tipografía, estamos imprimiendo un carácter en esas letras. Y es así, la tipografía dice cosas que las palabras no pueden decir, con tipografía comunicamos más que solo con la palabra. Y se suele decir, no es algo que me haya inventado yo, pero a mí me gusta decirlo, que es el traje que le ponemos a las palabras. Y quería decir esto porque muchas veces, cuando saben que me gusta mucho la tipografía, que estoy especializada en tipografía, siempre mucha gente me pregunta cuál es mi tipo de letra favorito. Y claro, a mí me suena muy raro esto porque dices, ¿cuál es tu prenda de vestir favorita? Pues depende, hay veces que te pones un vestido cuando vienes a celebrar la fiesta de la comunidad WordPress, otra vez te pones unos vaqueros, otra vez te pones un jersey de lana y otra vez es una camiseta, depende de la ocasión, vas a vestir con una prenda u otra, pero no hay una prenda favorita, puede que tú sí tengas en tu cajón una prenda que te guste particularmente, pero no podrías, a lo mejor, recomendarle a otro, depende de esa persona, no sabes sus gustos, dependiendo de lo que le gusta a esa persona o a la ocasión, una entrevista de trabajo o una cena con amigos, tú puedes hacer una recomendación, pero no así en genérico, y con las tipografías ocurre lo mismo, no se puede hacer una recomendación de una tipografía concreta, depende de lo que tú quieras comunicar, depende de lo que el cliente quiera comunicar con su página web, vamos a elegir una tipografía u otra. La frase esta que me gusta a mí, la tipografía es el traje con el que vestimos a las palabras, esto que parece. Mejor así, ¿no? Tipografía no es sólo el tipo de letra, es también la composición que hacemos del párrafo, veis que aquí he generalizado visualmente, he puesto más grande la frase la tipografía y luego a continuación pues lo he dividido además en tres líneas para que se viera mejor, suficientemente grande para que lo vea las personas que están al final de la sala, además le ha cambiado el color, lo he invertido para que se vea mejor, este tratamiento tipográfico también es muy importante, hoy vamos a hablar de cómo elegir un tipo de letra, pero es verdad que no es suficiente con elegir un tipo de letra, también tenemos que tener en cuenta cómo hacemos la composición de los textos, ¿no? Y luego otra cosa que me preguntan mucho, es pues, ¿qué tipografía elijo para mi blog? Aparte de cuál es tu tipografía favorita, ¿qué tipografía me elijo para mi blog? Entonces yo digo, bueno, hay más de medio millón de tipografías diseñadas y cada día se diseñan muchas más, tenemos que acotar, perdón que es que me voy a la siguiente, aquí, hay muchas clasificaciones de tipografías pues dependiendo de aquí en Leas pues te va a hacer una categorización diferente, pero bueno, cualquiera de esas clasificaciones nos va a servir para ir acotando e ir definiendo un poco nuestro proyecto, ¿no? Siempre que hagamos esa investigación de qué tipografía iría más con lo que queremos comunicar, podemos fijarnos en esta clasificación, ¿no? Y siempre podemos informarnos o documentarnos sobre la historia de la tipografía, ¿no? Todas las tipografías tienen una historia de trazos, se han utilizado para algo tradicionalmente, o el diseñador tiene una intención concreta a la hora de diseñarlo y esto pues siempre además viene publicado, ¿no? Se suele publicar un specimen con diferentes usos de la tipografía y también la historia de la tipografía, ¿no? Y esto es lo que podemos documentar, ¿no? Esto es una work-am, es comunidad y yo digo, bueno, no quiero llevar ejemplos de qué tipografías que funcionen para determinados casos porque eso al final, cuando tú estás en el estudio con tu ordenador y vas a montar una web y vas a elegir una tipografía, no te va a ayudar, ¿no? Yo hoy lo que quiero es daros unos tips para que sin ser diseñadores o no tener cultura visual de diseño o no conocer la historia de la tipografía y de las tipografías, ni siquiera esta clasificación podamos llevarnos una checklist de cosas que podemos tener en cuenta a la hora de elegir la tipografía que realmente nos sirva cuando estemos trabajando y que sepamos que no nos estamos equivocando cuando hacemos esa elección, ¿vale? Pero, sin embargo, pues podemos tener... Sí que voy a poner algunos ejemplos, ¿no? para que veamos. Bodoni, como es, es una tipografía bastante moderna, estilosa, se puede utilizar para... se suele utilizar para el diseño de moda, de revistas de moda, cosas así, ¿no? Una tipografía con mucho contraste que ahora veremos lo que es, pero es una tipografía que es del siglo XVIII. O sea, moderna, pero de la era moderna. O sea, no es contemporánea, no es... Pero sigue siendo bastante vigente y bastante cool y actual, ¿no? La podríamos elegir para los títulos de una revista de moda que nos encargaran ahora mismo, ¿no? Transandina es una tipografía muy versátil, funciona bastante bien tanto en papel como en pantalla, más está muy optimizada para pantalla. Tiene eso que llamamos hinting, que ahora explicaré un poquito más lo que es. Además, en este estilo cursiva y con bastante peso, con bastante negrita, ¿no? El peso, la tipografía es el grosor de la letra, pues a mí me sugiere bastante de dinamismo, ¿no? Lo utilizaría para algo que tuviera que ver con deportes o con algo así más dinámico, ¿no? Como decía. Geométrica humanista. Si tuviera que hacer un blog de tecnología, podríamos elegir para los títulos una como ésta, ¿no? Que no sé ni cómo se llama. RBN3.1 es un clásico, ¿no? Utilizar este tipo de letras para hablar de tipografía, o sea, de tipografía de tecnología, para un blog tecnológico, por ejemplo. Las tipografías de estilo rounded se suelen usar para, bueno, suelen ser bastante amables, todo lo que es redondo, que no tiene muchos picos, pues suelen ser incluso infantil, ¿no? Para cosas para niños, cosas divertidas, desenfadadas, relajantes. Y luego hay otras tipografías que algunas pueden ser muy versátiles, pero luego hay otros tipos de letra que no son trajes, son disfrazias, ¿no? No puedes utilizar, a lo mejor, para otras cosas, ¿no? O sea, solo se pueden utilizar para eso y ya está, ¿no? No son tan versátiles como las otras, ¿no? Hay que tener mucho cuidado al elegir estas tipografías para usos diferentes, ¿no? Es evidente, tampoco me voy a detener mucho en esto. Esta diapositiva para mí es bastante clave, porque con esta diapositiva puedo explicar muchas cosas, ¿no? Por ejemplo, a la hora de contrastar una tipografía con otra, tenemos que elegir tipos de letra que peguen unos con otros, ¿no? Y muchas veces, si no tienes el ojo educado, pues así a priori no puedes saber si pega o no, ¿no? Hay gente que me dice que está no pega con la otra y no saben ver porque no pegan, ¿no? Y yo digo, bueno, no te preocupes porque te puedes fijar en ciertas cosas en esta checklist de la que hablaba antes para saber si pega o no pega, ¿no? Como decía antes, la jerarquía visual es muy importante, ¿no? Y saber diferenciar de un primer vistazo lo que es un título de lo que son los párrafos. Entonces, un uso muy habitual es utilizar una tipografía con serifas para los títulos y una sin serifas sin adornos para los párrafos o viceversa. De esa manera, el usuario va a identificar muy rápidamente lo que son títulos y lo que son párrafos, ¿no? Además, cambiamos evidentemente el tamaño de la letra, ¿no? En los títulos, podemos utilizar esas tipografías que hemos visto antes que son más interesantes, ¿no? Al ser de un tamaño mucho mayor que los párrafos, ahí podemos aprovechar y utilizar tipos de letra que tengan más adornos, ¿no? Que tengan más detalle porque al ser en tamaño grande se va a apreciar ese detalle. Si utilizáramos tipografías con mucha personalidad, con mucho detalle para los párrafos, al ser de tamaño más pequeño, perdería legibilidad, ¿no? Entonces, esta es la clave, ¿no? Para los títulos utilizaremos esa tipografía más especial con la que queremos comunicar que somos diferentes y para los párrafos nos vamos a fijar siempre en la legibilidad de la letra y también en la lecturabilidad en la composición de los párrafos. Legibilidad es poder identificar qué letra es y ahora veremos también un test muy bueno para ir seguros en eso y lecturabilidad es que sea fácil de leer, ¿no? O sea, legibilidad, identificar qué letra es y lecturabilidad que sea fácil de leer, ¿no? Otra cosa que se suele decir mucho es que utilicemos no más de dos o tres tipografías por web, ¿no? Esto es porque cualquier decisión en diseño favorece el caos, ¿no? Cuanto menos decisiones tomemos mejor porque va a ser todo más armónico y solo romperemos cuando queramos destacar algo, ¿no? Por lo menos en Occidente los orientales tienen otra forma de diseñar, ¿no? Está todo mucho más caótico y más relleno, ¿no? Una práctica que se suele hacer es utilizar una tipografía para los títulos, otra para los párrafos y una tercera para botones, para menús, para frases en el pie de página que van a un tamaño más pequeño que el resto. Y ese tipo de letra es el que sí que tenemos que tener muchísimo cuidado en que sea muy legible, ¿vale? Entonces, podemos arriesgar la legibilidad en los títulos porque son de tamaño grande pero no en los párrafos. Y ahora, pues, vamos a ir uno a uno viendo esa checklist de trucos para ver la legibilidad, para saber si una letra es un tipo de letra es mejor o peor, ¿no? ¿Vale? Lo primero que tenemos que preguntarnos es si ese tipo de letra está optimizado para pantalla. Hay tipografías que se vienen utilizando para papel. Por ejemplo, la que hablábamos antes, Bodoni del siglo XVIII de Bodoni era un señor que imprimía con tipos de plomos. No está optimizada para pantalla, ¿no? No tiene esa técnica que se llama hinting. Sabéis que la pantalla tiene píxeles y que las curvas en los cuadrados no pueden encajar, ¿no? Entonces, se utiliza esta técnica mediante escala de grises para simular ópticamente que ahí va a ir una curva aunque realmente sigue siendo cuadraditos. Entonces, esta técnica se utiliza en las tipografías que están pensadas para pantalla. Una de las primeras que se aplicó esto fue Verdana, por ejemplo. Está muy optimizada para pantalla porque tiene muy buen hinting. También Steve Jobs se preocupó mucho de esto, por eso en Apple se ven también las letras, ¿no? No tan bien como en Windows. ¿Qué sea una tipografía para pantalla? ¿Cómo lo podemos saber? Nos leemos la historia de la tipografía y vemos. Normalmente se dice, muy optimizada es muy optimizada para pantalla y ya sabemos que tendrá aplicada esta técnica. Es verdad que cada vez es menos difícil para el tipógrafo hacer esto porque cada vez las resoluciones de pantalla son más grandes, ¿no? Entonces, no es lo mismo tener más cuadraditos más grandes que muchos cuadraditos pequeñitos, ¿no? Vamos a poder dibujar la curva mejor. Entonces, cada vez con las pantallas retinas pues hasta no hay problema. Es más fácil de resolver, ¿no? Pero, bueno, si podemos elegir con una que está optimizada para pantalla y otra que no, pues elegiremos la que sí, ¿vale? Ocurre también con las tipografías con Serif y sin Serif, ¿no? Con adornos y sin adornos, ¿qué se dice? Bueno, para pantalla mejor de palo seco las que no tienen serifas porque, claro, como tienen tantos adornos no se ven tan bien. Hoy en día, tanto por el uso de esta técnica como por las pantallas tan buenas que tenemos es un problema, no es tanto problema, ¿vale? Que tenga las curvas abiertas, ¿no? Y esto qué significa, pues o se puesto las letras en las que se ve. Siempre fijaos en las Aes y en las S de los tipos de letra, ¿no? Si tiene más apertura, es más fácil de leer y si es más cerrado, es más difícil de leer. ¿Por qué? Pues porque confundimos. La Ae se confunde con una O. A lo mejor si es un tamaño muy grande, no muy grande, no, pero como estamos hablando de párrafos que es un tamaño pequeño, o incluso de botones que es un tamaño pequeño, pues sí que lo vamos a notar, ¿no? Y sobre todo por accesibilidad, ¿no? Hay gente que no lo ve bien, ¿no? O que en ese momento vamos por la calle y llueve y no vemos bien, ¿no? Se me ha mojado el teléfono y ya no veo nada, pues si utilizamos un roboto o una Open Sans va a ser siempre mejor que una Montserrat y sobre todo que una elbética, fijaos cómo está la elbética de cerrada, ¿no? A partir de ahora no dejaréis de ver abiertas y cerradas. Bueno, o eso espero. Otra cosa que favorece la elegibilidad es tener una altura de la X generosa. La altura de la X es la altura de la letra X de ese tipo. Dependiendo de cómo esté dibujada el carácter, pues será más alto o menos, ¿no? Cuanto más alto sea, más fáciles de ver. Mereweather se lee mejor que Baskerville, por ejemplo. Y esto pues lo podéis ver comparando simplemente, pues ponéis un tipo de letra a otro, lo veis y el que tenga una altura más grande o viendo en la propia letra la diferencia que hay entre las minúsculas y las mayúsculas, si hay poca diferencia se lee mejor. Al combinar tipografías nos fijaremos también en esto. Un tipo de letra una altura de la X es muy grande con una tipografía que tenga la altura de la X muy pequeña, no casa bien. Entonces, cuando vayamos a combinar tipografías nos fijaremos en que la altura de la X sea más o menos similar. En una letra u otra. Puede ser una tipografía de palo seco y otra con serifas, pero si tiene la altura de la X más o menos igual va a combinar mejor. Hay otros factores en los que nos vamos a fijar pero este es uno de ellos. Recomendación. No utilizar fuentes que tengan que sean muy finitas. Fijaos que aquí mismo ya lo estamos viendo que así no se ven las letras. Los del fondo lo ven todo blanco no están viendo nada en la pantalla. Hay letras. Entonces, claro que pasa que en papel si funciona muy bien y además queda hasta muy bonito y estiloso no utilizar estas fuentes tan finitas, tan de poco peso. Pero en pantalla sobre todo en tamaños grandes se pierde la legibilidad. Es que se pierde la letra. Entonces, procuramos evitarlo para que se vea mejor en pantalla. Aquí veis que claramente se lee mejor uno de los dos párrafos. La diferencia entre estos dos tipos de letra es el contraste. La de arriba es un play fair display. Es un tipo de letra que a mí me encanta pero solo la utilizo para los títulos. Para los párrafos fijaos que más se lee en comparación con Georgia que es un tipo de Georgia como lo decís vosotros. Pero fijaos que se ve pequeño pero incluso los del fondo igual pueden leer el de abajo pero el de arriba no se lee nada porque tiene mucho contraste y mucha diferencia de grosor en la misma letra. Que queda muy bonito, muy estiloso en los títulos y da una sensación de elegancia. Pero en los párrafos se aconseja totalmente utilizar este tipo de letras con mucho contraste. Y una vez más, cuando vamos a combinar tipografías nos fijaremos en el contraste. Una tipografía con mucho contraste va a pegar más con otra que tenga más o menos el mismo contraste. Cuando hablo de que combinar tipografías y que más o menos sean similares hay que tener cuidado porque me refiero a que sean similares en estos factores tanto la altura de la X o el contraste pero es verdad que si son dos tipos de letra que se parecen mucho es mejor utilizar un único tipo de letra a lo mejor podemos utilizar variaciones que ahora veremos pero si utilizamos dos tipos de letra que se parecen mucho mejor utilizar sólo una porque parece un error. Uy, este tipo de letra no sabes muy bien si es el mismo o si es otro parece que te has equivocado entonces siempre que tengan un contraste suficiente para identificar que son dos tipos de letra diferentes pero que en estas cosas combinen, que sean similares. Aquí identificamos que la frase de arriba tiene un interletrado un espacio entre letras muy descompensado. El kernel es el espacio entre letras que ha decidido que van a tener el que ha diseñado la tipografía el diseñador de la tipo ya ha definido el espacio entre letras y muchas veces cuando nos bajamos una fuente de DaFont pasan estas cosas Tiene un kernel que estaba mal hecho los pares de letras si os fijáis por ejemplo en la wwlao es muy... cuando dibujas una letra pues al final a su principio están centradas es cuando tiene al lado otra letra cuando le tenemos que decir en el caso de la wwlao que se monte una con otra si os fijáis se está montándose en la caja que le pertenecería a la letra anterior eso es porque el tipógrafo ya tiene en cuenta eso modifica el kernel y si es un buen tipógrafo lo hará muy bien muy proporcional que tú ni te das cuenta de que alguien ha definido que ahí va a ir un espacio entre letras a mano y de una manera óptica a ojo entonces es una fuente gratuita de DaFont normalmente no va a tener esto cuidado porque lleva mucho trabajo y hay que ser muy bueno tener un ojo muy educado sin embargo las tipos buenas pues lo tienen perfectamente medido entonces bueno es una de las cosas que nos podemos fijar para elegir un buen tipo de letra esto tiene que ver con la elegibilidad sobre todo para cuando elijamos el tipo de letra de los botones, los menús los textos de footer tamaños de letra muy pequeños vamos a procurar siempre que sean legibles y una forma muy fácil de averiguar si es una letra legible o no es escribir escribimos i mayúscula l y 1 y si son diferentes pues mejor porque así vamos a identificar perfectamente si es una l si es un 1 o si es una i mayúscula si os fijáis pues hay letras como próxima nova que es mola mucho y se utiliza mucho y es muy guay pero para los botones o como decía los menús y esos tipos de letra más pequeños no es aconsejable mapa de caracteres es otra cosa que podemos tener en cuenta necesitamos que por lo menos en castellano pues tenga n's, tenga tilde tenga todos los caracteres que vamos a usar también porcentajes, etc. pero no sólo esto incluso si vais a escribir en otro idioma pues que tenga los caracteres cirílicos o los que necesitéis en el idioma en el que vais a hacer la web pero también que tenga características open type como por ejemplo las ligaduras sabes que muchas veces si no pones una ligadura la f y la i se ponen los puntitos uno encima del otro y se ve feo pues hay una típica ligadura que se hace entre la f y la i para que se convierta en un tipo de letra con open type se hace así, cambia automáticamente y es una característica que con CSS podemos utilizar desde hace años pues que tenga esto por ejemplo si utilizamos también en en Valenciano no sé si tenéis pares de letras así como en Oscara que la tx, la tz en Valenciano si utilizáis una tipografía que tenga estas ligaduras va a cuidar mucho esos pares de letras y eso lo podéis vender a vuestro cliente no, no, esto tiene una tipografía específica para el Valenciano es perfecto o sea que también está para argumento de venta vale lo que comentaba antes de las diferentes variaciones es muy útil tener una sola tipografía pero que tenga muchas variaciones para poder jerar quizás sin tener que cambiar de tipografía nos vamos a equivocar menos por ejemplo Roboto porque tenemos incluso condensada y expandida para el responsive pues viene muy bien expandida para escritorio, condensada para móvil etcétera y luego hablando también del mapa de caracteres que tenga la cursiva dibujada de verdad que no sea una cursiva falsa igualmente la negrita que no sea negrita falsa os dejo aquí un catálogo de combinaciones de letras que muchas veces se nos da mal y tenemos unos ejemplos que he encontrado en internet que he visto que funcionan bastante bien por si queréis tener una chuletilla porque la presentación la compartiré y bueno voy a terminar hablando de la historia de la tipografía en el 96 cuando trabajaba Nilo y Fernando haciendo webs utilizaban fuentes de sistema que no sabía cómo citaros la fuente de sistema me voy es que esto se me pasa estas son fuentes que están en todos los ordenadores los móviles y en todas partes tanto más como windows como linios como todos podemos utilizar estas fuentes y van a cargar si al diseñador le manda una persona que mire más por el vpo que por el diseño le pedirá el diseño de fuentes de sistema o que incluso no le diga la web con serifas o sin serifas y que sea el navegador del usuario el que elija qué tipografía va a poner si utilizamos una de estas pues ya sabemos y cuál elijo creo que con estas charlas tenemos un poco de orientación sobre cuál utilizar se puede utilizar la fuente de sistema y seguir haciendo buen diseño en 2005 aparecen las testicas OpenType que ya he hablado después en 2010 aparecen las web fonts podemos utilizar muchas más fuentes no solo tenemos que utilizar la fuente de sistema con la regla from face podemos poner la tipografía que queramos y además los servicios de tipografía web como web fonts por ejemplo y en 2016 mis preferidas las fuentes variables porque me gustan tanto una sola fuente un solo archivo podemos tener todas estas características que hemos dicho antes distintas variaciones de peso etc se pueden utilizar con Google Fonts ahora mismo estamos en una versión beta compartiré la presentación que tengo un enlace a el playground donde puedes hacer pruebas con estas Google Fonts la verdad que la elección del catálogo de Google Fonts a mí no me gusta mucho pero bueno de momento tenemos estas con las que podemos experimentar y ya no solo podemos hacer variaciones para mejorar la elegibilidad sino que con las fuentes variables se abre todo un mundo de posibilidades de diseño que no valen detrimento de la velocidad y carga de la página mejoramos nuestra experiencia de usuario sin empeorar el web web para mí si me preguntáis qué fuente tenéis que poner en vuestra web te diré no sé pero por favor que sea una fuente variable y como bueno ya para terminar como regalo os traigo un ejemplo de una fuente variable que vi el otro día y me flipó es verdad que son ejemplos así demasiado chulos que igual no os vais a incorporar nunca en ningún proyecto de cliente pero es muy bonito ver cómo se puede experimentar con esto ¿no? incluso podemos ver el código de CodePen y podemos hacer nuestras propias experimentos es un proyecto de Mandy Michael que en función de cómo tú muevas el móvil va cambiando el peso y el tamaño de la letra no se ve bien es chulísimo y lo podéis probar en vuestro móvil si tenéis bueno he hecho una apuesta con Pablo Maratinos y Julio de la Iglesia y Fernando Portomeña dicen que no eréis capaces de capturar este código porque no se iba a ver si alguno de vosotros es capaz de capturarlo con su QR si se capta pues ahora podéis hacer así con vuestro dispositivo y vais a ver que funciona incluso si le dais al botón vais a ver cómo bueno se mejora la experiencia con uno de los botones que tiene y bueno es simplemente lo que habéis visto en el vídeo pero que lo podéis hacer en vuestro móvil yo también lo si no tenéis móvil pues os dejo el mío que funciona lo tengo aquí para que veáis que es muy chulo y nada espero que os haya gustado muchas gracias si tenéis alguna pregunta pues yo encantada de de ayudar o si puedo hola gracias por la presentación ¿Qué opinas de la Moxerrat? Moxerrat es una tipografía que tiene la altura de la X generosa las curvas abiertas están en Google Fonts con lo cual es gratuita llamas de código abierto es un proyecto que es libre ya no solo Google Fonts sino que es colaborativo y lo van mejorando si te has descargado Moxerrat para algún proyecto hace años vuelvo a descargar porque van mejorándolo con el tiempo me parece una tipografía muy buena para párrafos ¿Alguna que combine bien con Moxerrat por ejemplo para CTAs y titulares dependiendo de lo que quiera dependiendo la palabra mágica depende depende si te podría decir una pero sabes que pasa que te voy a contar un secreto todas las presentaciones las hago con Roboto porque Roboto es como un pez y me va a copiar la letra que utilizo en las presentaciones ser Roboto pero si yo ahora te digo Moxerrat utiliza la con Play for Display todo el mundo a partir de ahora va a decir es que Ana Sirjano dijo en la charla de Work in Valencia que había que utilizar Moxerrat con Play for Display y entonces donde está todo lo anterior que acabo de contar nos lo hemos cargado entonces depende pues a ver que quieres comunicar con el proyecto que te interesa para que la vas a utilizar para los párrafos, para el menú no sé qué tipo de proyecto es tiene dinero el cliente puedo recomendarte una tipografía de una fundición específica o tenemos que definirnos a lo que haya en el catálogo Google Fonts no sé hay que verlo nada, gracias a ti más preguntas gracias Ana a medias oye una cosa el tema de las fuentes variables que nuevamente ahora muchos temas utilizan fuentes de Google directamente sin descargar, sin instalar y tal y cuántas descargan directamente desde Google Fonts sabes de temas que ya lo estén haciendo también con fuentes variables me alegra que me hagas esa pregunta precisamente el nuevo tema predeterminado de WordPress que va a salir el 12 de noviembre con la nueva versión 5.3 2020 de Anders Noren incorpora ya fuentes variables sí, WordPress va a ser pionera en incorporarlo de serie en todas las millones de instalaciones nuevas que se hagan con el tema por defecto ya van a aprovechar esta tecnología vamos a ganar en mejor experiencia de usuario vamos a ganar eso en experiencia de usuario y en hosting ahorrar hosting, que eso está muy bien las empresas de hosting sí, también claro las fuentes variables las ha hecho los grandes Google, Apple todos han colaborado en esto que son los que tienen las máquinas al final y a todos nos interesa que no derrochar en hosting hola Dilo sabes que yo también te quiero a ver una tipografía de esas que solamente conocí los freaks de las tipografías que digan como mola que pena que no la conoce a nadie tanto hace me quedo con las comixas de esas fuentes que digan no es que la gente no se la cuenta de lo que mola esta fuente para texto es que a mí no me gusta recomendar fuentes o entonces que me vení es que es como recomendarte una blusa rosa con botones de estrella depende lo siento contrátame y te elegiré la mejor tipo para tu proyecto hola Pablo una pregunta una duda que me corró toda esta historia de las fuentes variables va a permitir hacer cosas alucinantes de hecho ya estamos viendo cosas alucinantes como bien has dicho no sé hasta que punto útiles pero bueno a nivel de show no puede provocar de nuevo otra explosión de Efecto War Arts donde la gente viene a hacer cosas super locas de diferentes fuentes no da poco de necesidad de que un gran poder conlleva una gran responsabilidad y la vamos a cagar seguro sí pero bueno más trabajo para los diseñadores a ver las fuentes variables no a ver las fuentes variables tengo una necesidad de que te vas a pasar a partir de ahora toda la vida echándonos la bronca eh ojalá a ver yo creo que todavía no se utiliza mucho las fuentes variables porque no son tan sencillas de utilizar primero no hay suficientes todavía faltan diseñadores de tipos que se pongan a ello y que luego pues es difícil de automatizar con unos slides o sea de momento hay que hacerlo con code.css y no todo el mundo sabe utilizarlo pero las fuentes variables nos van a permitir mejorar la legibilidad totalmente responsivo o sea que realmente se adapte a nuestro dispositivo que la tipografía vaya cambiando en función de si me lo hacer como me lo alejo eh todo esto ¿no? no es el peso sino cambiando el peso sin que la tipografía se mueva o sea te permite te permite adaptarse totalmente es como es el futuro para mí estamos en el futuro porque vas mirando a un sitio y se te adapta a lo que tú haces ¿no? fuentes variables y luego todo sobre todo sin utilizar javascript sin utilizar eh tecnologías que recarga en la página no no no es todo sin que sea en detrimento de la velocidad ¿no? es todo super optimizado por lo que hay que apostar por los fuentes variables lo otro es que también hay que bueno pues le pique el gusanillo a quien sabe leer el código y dice pues esto no es tan difícil es que con una animación de css me puedo montar aquí y luego consultando por javascript el dispositivo porque eso es lo que hacen los javascript para que te vea la si estás lejos si estás cerca pues oye pues esto se pueden hacer cosas chulas ¿no? es verdad que son experimentos que a lo mejor para que me sirve a mi que si muevo el móvil sea más larga o más pequeña pues justo eso es un ejemplo que a lo mejor no te sirve para nada pero se te pueden ocurrir muchas cosas que si realmente van a servir ¿no? no sé, para mí lo debe vetar el progreso de la tecnología porque se puede utilizar mal yo estoy a favor de las fuentes variables si se utilicen pues no sé a ver, siempre que no sea en detrimento también de la accesibilidad ¿no? porque estaba pensando en las webs que se hacían antes con flash que eran muy chulas y que eran más creativas que no han atacado yurrey como la mayoría de las webs que se hacen ahora pero claro no era accesible ¿no? entonces bueno pues que dentro de los estándares de accesibilidad pues que oye viva la fiesta a mi me parece, yo estoy muy a favor de las fuentes variables no me da miedo mira, ¿qué opinas sobre fuentes antiguas tipo en vética como ha evolucionado para web eso por un lado y concretamente en esta fuente ha sido hiper utilizada, mal utilizada ¿qué opinas sobre esta fuente? el vética ya hemos visto que no es muy legible y además no está optimizada para pantalla como el vética está roboto por ejemplo que es del mismo tipo y que sí es más legible se ha utilizado mucho claro es como... a ver era una tipografía que no tenía demasiada personalidad ¿no? que estaba muy bien hecha y para papel y que funcionaba muy bien ¿no? es como no equivocarte hoy el vética y además eso le pongo un poco de peso y la junto un poco y ya tengo un logo ¿no? pero claro pues eso es ya pues aburre ¿no? sí comunica ¿no? porque es imposible no comunicarnos que digamos no dice nada esto es el estándar el agnóstico no no comunica comunica que soy soy el vética ¿no? seriedad ¿no? pero claro es verdad que se ha abuso tanto es como la gozan por ejemplo ¿no? que se utiliza mucho pues siempre que utilizas mucho algo vamos a cerrar y prefer display está muy bien pero a mí no me dice nada ya lo he visto, sí muy bien siguiente, si quieres diferenciarte tienes que hacer una elección mejor pero bueno como ya tenemos las checklists ahí es ponerse dedicarle muchas horas a la elección de una tipografía no decirlo así y ya está pero bueno yo sobre todo lo que intento es quitarle un poco de como se dice el alo místico del diseñador ¿no? al final el diseñador pues bueno tienes una técnica que si la aprendes la puedes aplicar y luego es verdad que tiene mucho de visión óptica y de educar el ojo de la visual, de conocer la historia de las tipografías, es verdad pero también tiene mucho de mira siga estas checklists y no te vas a equivocar mucho ¿vale? yo creo que sí no sé si te he contestado pero yo tenía entendido que si eran tipografías que estamos acostumbrados a ver y que las solemos ver las leemos mejor y más rápido no es un poco que hacemos que sí o que no pues mira me alegra que hagas ese comentario porque en diseño no te puedes creer nada, yo siempre digo mira es que esto no puede haber un robot que diseñe porque nunca vale tú te puedes escudar en todas estas todos tus factores porque hay estudios de elegibilidad que se hacen con personas y se ve sin el más rápido, sin el más espacio si se ve mejor así ópticamente está comprobado si se emplastan los trazos pues se dejan de ver se deja de percibir la apertura la contraforma, se pierde estamos perdiendo, ya no distingo si es una letra o es otra y hay estudios que empíricamente lo han demostrado pero luego en diseño depende, depende y además eso que luego hay muchas cosas que hay que tener en cuenta el tamaño, el dispositivo el ancho de la línea y luego eso el tipo de letra, pero lo compones mal tú me digas una letra súper legible pero luego le pones muy poco interlineado le pones un ancho de línea demasiado largo no sé es verdad hay muchas cosas que tener en cuenta pero bueno todas las profesiones pues tienen lo suyo pues efectivamente pero claro, yo intento por lo menos dar algunos tips para que alguien que no se haya estudiado todos los libros que he estudiado yo los que he hecho yo pues pueda atajar un poco tú fíjate en esto y más o menos es verdad, esta presentación no te convierte en el mejor lector de tipografía del mundo pero igual ya tienes una idea en qué fijarte cuando vayas a elegir una tipografía y a lo mejor ves una y ya directamente la descartas y otras a lo mejor puedes dudar pero bueno si es que en diseño no hay nada que sea blanco o negro no es que sea subjetivo pero hay muchos factores que tener en cuenta y luego eso pues qué quieres comunicar a lo mejor no quieres que sea legible a lo mejor lo que quieres es que sea desagradable porque estás en un anuncio de algo en contra de no es que claro pues tienes que tener muchas cosas en cuenta pero bueno no sé primero gracias por acordarte los que hacíamos cosas en la era de piedra con molitos verdes en serio yo estoy en una bueno la gente ya me conocéis estoy en varias asociaciones de discapacidad y te voy a hablar de visibilidad, me ha saltado el chip porque tenemos gente invidente que evidentemente no solamente tiene telefonos móviles sino esto se ha cortado, no, perdón la pregunta del millón que te quería hacer cuando tal existen tipos que puedan confundir a un lector invidente por ejemplo tenemos mucha gente invidente que usa iphone que usa tabletas y que tiene lectores a un lector el diseño le da exactamente igual o sea el css no lo utiliza, solo utiliza el html contenido con lo cual no hay problema para que un invidente pueda leer un no tiene nada que ver con la fuente bueno Ana terminamos ya que teníamos la mesa redonda, muchísimas gracias un fuerte aplauso