 Muchas gracias por el aplauso artificial, si no gustan yo el aplauso ya me he llevado. Bueno, muchas gracias a todos por haber elegido el Track A. Soy Ana Cirujano, soy diseñadora gráfica especializada en web. Soy autónoma y me dedico a hacer páginas web para mis clientes. Con mi CMSE favorito que es WordPress. Participo activamente en la comunidad local de WordPress Collado Villalba, que es un pueblo de la Sierra de Madrid. Y bueno, pues nos dedicamos a organizar charlas, meetups, sobre todo Fernando Delgado. Es el que lleva esta mitad, pero yo también participo, me gusta mucho colaborar con WordPress porque WordPress nos da mucho, es un gratuito y que lo va abierto como todos sabéis. Y tenemos la oportunidad a través de la comunidad de devolver a WordPress lo que WordPress nos da. Entonces una manera de hacerlo, aparte de colaborar en los follows o en las traducciones, es dando charlas, como esta ponencia. Yo lo que pretendo es que las personas que trabajamos con WordPress hagamos mejores documentos. No solo mejores páginas web, sino cualquier tipo de documento con el que trabajamos. Cuando hacemos un presupuesto estamos tomando decisiones de diseño. Lo que pretendo con esta ponencia es que todos aprendamos unas pautas para poder hacer mejores presupuestos, mejores presentaciones de PowerPoint y como uno pues también mejores páginas web. Entonces voy a empezar definiendo lo que es la tipografía responsive. Pues está aquí bien bastante, muchas gracias. ¿Qué es tipografía? Tipografía no es significada en muchas cosas. Desde el sistema de reproducción que ya se utilizaba en la emprenda, si digo bot en ver todo el mundo que está en un edito, ahora ya todos lo que está en un edito, pero era un animal que no inventa la emprenda porque la emprenda a la inventar en los coreanos, pero sí la popularizó en Europa. Y utilizaba la tipografía, el sistema de reproducción con el cual un sistema de tipos móviles puede reproducir la emprenda. El diseñador de tipos es el tipógrafo que trabaja con tipografía, hace tipografía. Tipografía también es la fuente tipográfica que utilizamos en nuestro ordenado. La tipografía sería alian y la fuente es alian bolt o negrita o alian dientes. Tipografía además es cuando hablamos de microtipografía, lo referimos a esos ajustes que hace el diseñador de intelectrado, de espacio entre palabras y la macrotipografía es lo que conocemos también como maquetación, es como ajustamos el tipo de letra, elegimos un tipo u otro, el estilo que elegimos, los espacios que hay entre las imágenes y los textos, eso también es tipografía. En esta ponencia me voy a referir más a este último tipo de tipografía, que es la macrotipografía, como componemos los textos. Y que es responsive, la otra parte del título. Diseño responsive es ese diseño que se adapta al formato que utilizamos. En diseño web, primero diseñamos el móvil, colocamos los contenidos uno debajo de otro para aprovechar todo el ancho de la pantalla del móvil. Y a medida que el dispositivo se va haciendo más grande, los elementos se redistribuyen para aprovechar siempre todo el ancho que disponemos. Esto es algo que los diseñadores llevamos haciendo toda la vida, cuando tenemos que hacer aplicaciones gráficas diseñamos un flyer o diseñamos para la misma campaña carteles, por ejemplo, vallas publicitarias. No enviamos el mismo archivo a la imprenta, no le decimos tomar este PDF y con esto hazme un flyer, un cartel 50x70 y también una valla publicitaria. Siempre tenemos en cuenta la distancia a la que el usuario va a ver ese cartel a la que el lector lo va a leer. Cambiamos el tamaño de la tipografía en función de eso, del tamaño del cartel, de la distancia a la que se va a ver, si va a estar en una carretera y vamos a tener poco tiempo para leer, entonces utilizamos un tamaño distinto, siempre adecuamos la tipografía al tamaño del formato y también del usuario, si va a tener poco tiempo, si va a estar cerca. Entonces lo que después se ha incorporado también a las páginas web, siempre pensar en un contexto, el diseño gráfico siempre se preocupa del contexto en el que se va a ver los contenidos. Hay una cosa que nació hace dos años, en 2016, que es la tipografía variable. Esta tipografía en sí misma ya tiene en cuenta todas esas variaciones y ella misma conoce el contexto y varía en función del contexto. Tiene todos los pesos, todos los tipos, todos los tamaños, conoce el espacio de la pantalla y se adapta automáticamente. De momento son proyectos experimentales, pero este es el futuro de la tipografía, tendremos una tipografía que se irá adaptando en función del contexto en el que se encuentra. La tipografía o conocer cómo debemos componer los textos va a permitir hacer más legible un texto como este, como hablaba Juanca antes, el contenido siempre, tenemos que jerarquizarlo, determinar qué es lo más importante y qué es lo menos importante y es el diseñador el que tiene que cambiar la tipografía para que el usuario automáticamente al verlo diferencia perfectamente de lo que es un título, de lo que es un parafus que es más importante y que es lo más importante. Entonces vamos a ver, yo paucas, podemos seguir para que haces esto. Lo primero que tenemos en cuenta a la hora de que poner un texto es que la tipografía tenemos que escoger. La tipografía es sí misma, comunica cosas, cuenta cosas y dependientemente del texto que está escrito ya por el hecho de elegir una tipografía le estamos poniendo voz a esa tipografía, le estamos dando un dono, estamos ya comunicando, incluso no comunicando nada, siempre estamos comunicando, algo es imposible no comunicar nada. Una de las cosas que tenemos en cuenta cuando vamos a decir una tipografía es que si vamos a decir una tipografía con serifas o adornos o una tipografía de palo seco que no tiene adornos, tradicionalmente elegíamos para impresión tipografías con serifas y para pantalla tipografías de palo seco porque la pantalla como se dividen en píxeles que son cuadraditos que siempre se adaptaban mejor, tipografías que no tuvieran mucho adornos. Además, las tipografías con serif a tipos pequeños no se deben bien, no se deben bien, se deben borrosos. Sin embargo, con la técnica de Hinti, hoy en día se consigue que a través de una escala de grises las tipografías con serifas serían perfectamente. Por lo tanto, podemos elegir tanto tipografías de palo seco como tipografías con serifas. Entonces, ¿qué otras cosas podemos tener en cuenta a la hora de elegir una tipografía? Hay estudios de elegibilidad que demuestran que leemos mejor las tipografías que más conocemos. Si se trata de hacer textos legibles y no tenemos conocimientos suficientes de tipografía, para ir a lo seguro podemos ir a Google Fonts, ordenar popularidad y elegir una de las tipografías que más se utilizan la robota, la auto-trans, la data, y no nos equivocan. Será una tipografía que se veía perfectamente. Pero si queremos diferenciarnos, si queremos que nuestra página sea diferente, si queremos comunicar algo especial, hacer un diseño distinto, no podemos utilizar robota porque la mayoría de las páginas tienen robota. Si mi cliente me pide que me diferencia, ¿qué más no puedo fijar para elegir una buena tipografía? Podemos fijar, por ejemplo, la altura de la X. La altura de la X es la diferencia que hay entre las mayúsculas y las minúsculas, ¿no? Una altura de la X generosa, por ejemplo, como vemos en la tipografía del medio, en Constance, es la que tiene poca diferencia entre mayúsculas y minúsculas. La altura de su X es muy grande, esa tipografía se lee mejor. Sin embargo, la de la derecha tiene una altura de la X pequeña y está demostrado que se lee peor. Si queremos elegir una tipografía que sea elegible, utilizaremos una que tenga una altura de la X generosa. Otra de las cuestiones que no podemos fijar es que tengas trazos abiertos. Si nos fijamos, roboto y open sense, esto se ve muy bien en la A y la E. Por eso he querido separarlas. La nueva tira open sense tiene trazos más abiertos. Sin embargo, monsegrar es más cerrado. Y el vértica, que es una fuente que no está pensada para pantalla, es la más cerrada de todas. El vértica es una tipografía de las más elegibles, de las mejores hechas de la historia de la tipografía. Pero no sirve para pantalla. Para pantalla se han hecho específicamente open sense, monsegrar, roboto. Son tipografías que el tipógrafo ya sabía que se va a notizar en pantalla y las ha hecho con trazos más abiertos. Queremos utilizar una fuente súper diferente de fantasía. Para los títulos, por ejemplo, nos estamos arriesgando. ¿Qué podemos hacer? Vamos a fijarnos en esta altura de la X, en esta altura de la línea. Bueno, cuando ya estamos en Google phones... Venga, antes de que se acabara la batería, voy a terminar la conferencia. No sé si podemos enchufar para que no se... ¿Quién se ha querido? Tengo una sombra por ahí que creo que se está ocupando. Gracias. Si queremos diferenciarnos y queremos elegir una tipografía distinta que solo esté en nuestra web y arriesgarnos un poco más podemos darle a ver Specimen y nos enseñará algo más sobre esa tipografía. Podemos fijarnos. A mí siempre me gusta conocer la historia de la tipografía. El tipógrafo cuando hace una tipografía en función de un contexto. Entonces, es bueno siempre leer la historia de la tipografía. Por ejemplo, esta tipografía que les puede parecer muy chula resulta que el diseñador la pensó basándose en caráctulas de disco de música latina de los años 60. Alguien que tenga esa cultura visual la va a reconocer inmediatamente. Ah, sí, sí, esta tipografía de los discos de la cultura latina de los años 60. Si parezca eso, no la podemos utilizar. Otra de los trucos que yo utilizo para saber si una tipografía está bien hecha es, por ejemplo, saber si tiene ligaduras. Las ligaduras una muy típica que se suele utilizar es unir la F y la I. Cuando están muy juntas se produce un efecto extraño. Entonces lo que se hace, luego lo veremos es poner una ligadura. Esta tipografía no tiene ligaduras. Por lo menos si tiene tíndez que es algo que siempre también hay que comprobar si el idioma que nosotros vamos a emplear tiene caracteres extraños como el español que tiene la N siempre tenemos que comprobar que esa tipografía tenga todos los caracteres. Que tenga una paleta de caracteres amplias nos va a dar una pista sobre si es una buena tipografía y también las características open time. Por ejemplo, esta tipografía de Ibelle vemos que sí que tiene ligaduras y os fijáis, es que está unido la F y además tiene tíndez y luego si leemos más en la descripción podemos ver que nada más es una tipografía que es muy legible estéticamente nos parece atractiva bueno por la elegimos. La podemos elegir para nuestro título Yo mi recomendación es que si utilizamos una tipografía de este tipo que tiene mucho sador, no es fantasía solo lo utilizamos para el título I luego el siguiente nivel jerárquico de títulos podemos utilizar una tipografía como roboto slap que es diferente a la roboto normal pero es más legible no molesta tanto solo podemos destacar uno de los elementos si destacamos todos los elementos ningún elemento destaca también en móviles una tipografía de este tipo con tanta personalidad va a necesitar un tamaño bastante más grande entonces en móviles al final vamos a tener solo una palabra por línea y se convierte en ilegible lo que hacemos es el diseño responsive lo que hacemos es que para móviles es una tipografía más sencilla ¿sabemos lo que es esto? una media query lo que voy a decir como casi todos lo sabéis es que no elegimos una donde hacemos el corte del dispositivo para móviles elígeme esta tipografía rara pero luego a partir de qué tamaño cambiamos para que sea la otra tipografía pues eso no lo hacemos en función de ningún tamaño en concreto no elegimos el tamaño del iphone no elegimos el tamaño del iphone lo que hacemos es probar en nuestro diseño y en función de nuestro diseño elegimos ese tamaño en concreto si son 30 M como si son 31 siempre tenemos que probar para nuestro propio diseño incluso pedirle en móvil a nuestros amigos y comprobar si se ve bien o no porque nunca podemos vear de los navegadores para saber como tenemos que combinar tipografías porque si queramos comunicar una cosa no podemos comunicar cosas distintas con las tipografías google phones tiene una opción que nos puede ayudar y hay muchísimas páginas en internet que también nos ayudan ¿cómo combinar tipografías? eso es algo que no podemos elegir a dar tenemos que elegir tipografías que configuren y lo de los trucos es elegir combinar tipografías que el tipógrafo ya ha pensado también para jerarquizar es un truco muy bueno utilizar de palo seco y con serifas en el título y en los barfos y combinar así inmediatamente vamos a jerarquizar y identificar lo que es un título y lo que es un barfo otra de las cosas que va a variar en función del contexto y del tamaño de la pantalla es el tamaño como decíamos porque el móvil y el iPad lo tenemos más cerca que la pantalla del ordenador siempre vamos a elegir tamaños de letra más pequeños tamaño mínimo que vamos a elegir para dispositivos móviles son 16 píxeles y para pantalla siempre un poco más 18 píxeles estos tamaños cuando cambian de un dispositivo a otro aumentan su tamaño pero siempre lo hacen en la misma proporción para no equivocarnos con las proporciones hay una web que se llama modular scheme de Tim Brown y ya resolvió este problema cuando dijimos el tamaño de los distintos elementos de la web del título 1, del título 2, del barfo siempre como tienen que estar en proporción a veces nos encontramos con un problema porque haces el título 1 de un tamaño luego el título 2 de otro tienes el barfo todo está bien pero de repente te encuentras con que tienes un tipo de contenido que necesita un título 3 y ya no sabes qué tamaño darle porque el barfo que tenías es un jadeo entonces hay esta página web que podemos utilizar tú sabes un tipo de letra base y automáticamente te puedes elegir la escala que quieres para que sea armónico y automáticamente te dice los tamaños que puedes utilizar es bastante útil por ejemplo la presentación la voy a compartir por supuesto también hay enlaces para ampliar información y esto sería un ejemplo de una escala que podemos utilizar de las media queries de cómo podemos cambiar el dispositivo y el tamaño pero es un ejemplo simplemente pues si queréis hacer ejercicio hasta luego habrá que ver las necesidades de cada diseño en función del contexto cuando elegimos un tamaño realmente nosotros no estamos elegiendo un tamaño siempre elegimos proporciones porque el que elige el tamaño de la letra de una web es siempre el usuario por lo tanto el diseño responsive es el diseño que se adapta a todos los dispositivos si no es el diseño que se adapta a todos los usuarios el navegador trae por defecto un tamaño de texto base que son 16 píxeles pero después el usuario puede ir a las propiedades de ese navegador y cambiarlo, no hay transposores mayores pues sube el tamaño de la letra también el diseñador después puede modificar ese texto base es decir que su html va a tener una tiqueta y después si el diseñador pone una etiqueta importante también va a modificar lo que se ha puesto previamente y después incluso el usuario si en el espectro de elementos pone un importante también va a modificar, al final es el usuario el que decide el tamaño luego nosotros no establecemos tamaños establecemos proporciones nunca declaramos las unidades en píxeles al final se va a renderizar en píxeles pero nosotros jamás utilizamos píxeles para los tamaños vamos a ir viendolas una vez el DREM suponiendo que el texto base sea 16 píxeles que el usuario no haya modificado ese tamaño previamente de navegador un DREM va a ser 16 píxeles entonces nosotros vamos a modificar esta medida 1,5 sería 24 y así pero si el usuario lo modifica pues se va a modificar es siempre relativo a lo que el usuario ponga un M es relativo el tamaño ponga pero además el M siempre se va a fijar en el tamaño del contenido de su padre el tamaño que está declarado en el contenido del padre de manera que si nosotros tenemos un par con un tamaño de letra pero luego queremos o un dir y dentro de ese dir queremos que haya una letra más pequeña lo que declaramos es que sea un 80% más pequeña le ponemos un 0 cuando nosotros cambiamos el tamaño del padre automáticamente se va a cambiar el tamaño del hijo de la letra pequeña esto nos permite modularizar con cambiar el tamaño del letra del padre se va a cambiar el tamaño del hijo esto hay que tener mucho cuidado porque la comodidad de la modularización también es la complejidad de la modularización si cambiamos un tamaño de letra y de repente se los cambian absolutamente todos los hijos de los contenedores que se lo manejo yo lo recomiendo utilizar solo en mis sitios concretos hay otras unidades que son las relativas al viewport que es el ancho de la pantalla van a cambiar van a ser responsibles si nosotros utilizamos ninguna media query si os fijáis sólo que decirle 28W que sería un 28% del ancho del viewport el problema que tiene esto es que como ahorita hay pantallas muy pequeñas y pantallas muy grandes al final los tamaños se te desproporcionan para eso lo que utilizamos son medidas mínimas y medidas máximas una medida máxima que pueda adaptar y una medida máxima aun así si lo probáis vais a ver que al final también se te desproporciona entonces son varias matemáticas complicadas pero realmente el truco es utilizar la función cal de css y decirle por ejemplo 0.5 horas sería el tamaño mínimo y siempre sumáselo al tamaño relativo al viewport utilizamos siempre medidas relativas combinadas con medidas relativas al viewport y esto sí que funciona nada más probarlo porque es maravilloso a un asilo antes también tengo que utilizar una media query pero en general no es necesario es bastante cómodo y práctico otra de las cosas que habría la función del tamaño del dispositivo es el ancho de línea los estudios de elegibilidad nos dicen que para el mínimo de ancho de línea que tenemos que utilizar para que se lea bien vale 45 a 75 caracteres por letra si ponemos más caracteres al final el historio se pierde y si ponemos menos tiene que ir tan rápido que también es muy pasado para el esto y lo que hacemos cuando declaramos el diseño responsivo es poner unos anchos relativos y poner un ancho máximo que va a adoptar ese parfo el ancho máximo lo que hago es incluso contar los caracteres cuando ya has hecho muchos ojos pero directamente cuéntenos caracteres y te salen 60 pues está bien y esta sería el código que pondríamos en ancho máximo el interleñado también tendría que variar la función del tamaño y ahora vemos que otras cosas también hay que tener en cuenta para el final interleñado el interleñado en web es un poco distinto al interleñado en papel se refiere al espacio que se distribuye por encima y por debajo de la letra si ponemos un poco interleñado es legible perdón es legible y también es legible si utilizamos mucho un tamaño adecuado interleñado vamos a necesitar más interleñado si el color de la tipografía es más oscuro también vamos a necesitar más interleñado en función del tamaño de la letra y si a mayor ancho de línea mayor interleñado esto lo vemos automáticamente en el momento que reducimos el ancho de la columna vamos a ver que nos pide reducir el interleñado y igualmente el peso el peso es de una tipografía es como la fuerza que tiene la mancha que deja el luego otra cosa que tenemos en cuenta es que siempre los párrafos van a tener más interleñado que los títulos no solo en diseño web sino también en presentaciones de powerpoint en títulos de documentos de presupuesto siempre los títulos tenemos que reducir el interleñado ahí marcaremos la diferencia hay una cosa en el diseño que se llama ritmo vertical que consiste en que todos los tamaños siempre estén proporcionados esto tradicionalmente en papel se consigue manteniendo siempre una elegía base en web también se hace pero es más complicado y desde que tú te distan no es tan necesaria manteniendo el ritmo vertical nosotros tenemos un interleñado para los párrafos y siempre que el interleñado de los títulos tiene que ser múltiplo para que respete ese interleñado entonces tenemos que adecuar el tamaño también a ese múltiplo para que no se proporcionen hay que hacer bastantes cálculos y después si el usuario incluye una imagen la altura de la imagen no seamos cuál es y nos va a destrozar la retícula nos rompe el ritmo vertical en papel esto es bastante molesto pero en web no es tan molesto no pasa nada si una imagen rompe el ritmo vertical se resetea el ritmo vertical en el siguiente párrafo de hecho el interleñado en los libros se mantiene con la elegía base y es muy importante porque tenemos dos caras en la página si nosotros estamos leyendo y las líneas no coinciden de una página a otra lo que va a pasar es que la mancha de papel nos va a molestar en la altura por eso siempre coinciden las líneas para que no veamos la línea de la página de la otra cara sin embargo en web no tenemos cara entonces no tenemos ese problema no hay que asesinarse con el ritmo vertical voy a hablar ahora de la línea familiar algo que es muy importante para conseguir un buen diseño es que no justificamos los textos a justificar los textos se producen este tipo de ríos, calles, pasillos que dificulta muchísimo la lectura para cualquier persona pero sobre todo para personas que tienen dificultad para leer, para personas que tienen justicia por favor no justifiquéis nunca los textos no tiene ningún sentido no responde a cuestiones estéticas de fluididad en cuanto a centrar los textos puede ser una idea muy elegante centrar los textos para los títulos pero luego cuando tenemos párrafos largos no es buena idea centrarlos porque el usuario se pierde es muy habitual ver textos largos centrados sobre todo en cuando en las páginas web se ponen tres columnas en la página principal y se suele centrar y cuando tenemos más de dos líneas es totalmente ilegible y antiextético en mi recomendación es que no alimiemos al centro cuando hay más de dos líneas así que hagan mucho corno hay otra cosa que es la partición de palabras la partición de palabras con guiones es incómoda, es antiextética y cuando la líneas es suficientemente ancha no es necesario partir guiones lo evitamos para móviles si no partimos las palabras con guiones cuando hay palabras largas se producen esos huevos que son igual, pues antiextéticos y dificultadas en lectura desde hace poco en web también podemos incluir guiones entonces mi recomendación es que la incluyamos para los dispositivos móviles este sería el código para que automáticamente se pusieran los guiones y mi recomendación es eso sólo para móviles porque si no vamos a dejar no lo ponemos luego algo que siempre hacemos el diseño editorial que a los correctores les encanta es que no separamos las cantidades del valor, por ejemplo de 250 personas siempre tiene que ir unido porque se lee mejor entonces utilizamos un espacio en la separación para que no se vaya al siguiente renglo si son 10 euros pues que siempre vaya no se que el 10 ahí sólo que siempre vaya junto este es el código que utilizamos que también lo podéis memorizar porque es bastante útil por ejemplo cuando tenemos este título esta noche vamos a hacer fiesta claro fiesta la palabra fiesta se queda brudada en ese reglón es antiextético, no se lee bien no respeta el ritmo de la lectura lo ideal sería que ese D bajara sobre el renglón y dijéramos esta noche vamos a salir de fiesta claro como conseguimos que ese D baje cuando tenemos no sabemos qué ha hecho a tener la pantalla porque estamos haciendo diseño responsive si ponemos un BR antes del D para que baje aparte de que eso sabemos que ya no se puede hacer porque es una dorbaridad claro cuando luego en el escritorio la pantalla sería tan ancha que sí que cabría el de fiesta entonces el D el fiesta se quedaría igualmente sólo en el siguiente renglón pues en este caso lo que hacemos es utilizar también un espacio de una separación de esa manera nos aseguramos que tenga el tamaño que tenga la pantalla el de fiesta siempre va a ir brudido entonces vamos a poder leer esta noche vamos a salir de fiesta y esto es algo que yo siempre lo tengo en cuenta en los móviles inmediatamente hay una palabra que también sucede al final del párrafo cuando hay una palabra a mí me parece que muchas veces lo importante es cuidar el detalle a lo mejor si no tienes conocimiento de diseño editorial o no eres cuidadoso con los textos pero si hay alguien que es cuidadoso con estas cosas no va a mandar entonces muchas veces en el detalle está la diferencia y bueno espero que os haya gustado porque este es el final de la con esto por recomiendo unos cuantos libros por si queréis ampliar su conocimiento por supuesto la ponencia la voy a compartir también hay algunos enlaces a todos la favor y también tenéis alguna disposición mi twitter mi página web me encantaría que me hicieras preguntas para poder ir mejorando cada vez la web las web muchas gracias a todos