 Hola a todos, bienvenidos a esta nueva ponencia de la tarde, ok, pues nada, a la persona que me toca presentar ahorita creo yo que no necesita presentación, ¿verdad? Ana Cirojano, crack del diseño UXG de la comunidad WordPress de España y también del equipo global de diseño. Nos trae en estos momentos una presentación con mucho ritmo, así que espero que estén atentos a todas las dinámicas que nos va a traer y los dejo con Ana Cirojano con el ritmo que el ritmo nos pare. Muchas gracias, Alex, y muchas gracias a la organización de Work on Zaragoza, que es un verdadero privilegio ser ponente en esta Work on. Bueno, como me ha dicho, Alex soy diseñadora de negocio digital, soy orgullosa, embajadora de piensasolutions, que es un hosting especializado en WordPress con un plan gratuito, soy organizadora de la mitad de WordPress en Torreledones, que este año tenemos Work on en marzo, estamos a dos horas en el ave, lo sé porque yo he venido aquí. Están las entradas a la venta, el programa ha publicado, así que si os ha gustado Work on Zaragoza, ya veréis como os gustará también Work on Torreledones. Tengo un podcast que se llama un billete a Chatanuga, emitimos en directo junto con mi compañero y amigo Pablo Monatinos, hablamos de diseño, marketing y negocios online y también os invito a que lo veáis. Nadie, seguidme para apoyar la creación de contenido. Algunas personas, de hecho, como cuatro o cinco personas, habéis venido a decirme hoyana y cómo poner los títulos de las charlas. Y este título que le has puesto a la charla, eso de que el ritmo no pare, como si fuera una sobrada o algo que no tiene nada que ver con lo que voy a contar, pero cualquier persona que sepa de diseño sabe lo que es el ritmo. El ritmo del diseño es algo muy importante, el ritmo visual. El ritmo está en todas partes, en la naturaleza. El ritmo es algo que se repite con un patrón, donde miremos, hasta en las baldosas del escenario, siempre hay un ritmo, una repetición que tiene una escala concreta, a veces es más fácil reconocer que escala es y otra vez es más complicado. También hay lo que se conoce como fractales, repeticiones unas dentro de otras y al final, al cabo, es ritmo. Se ve mucho en las plantas, en la naturaleza viva, pero también se ve en la naturaleza muerta, en la arena. Vemos que hay un ritmo, un patrón que se repite, como la escala de Fibonacci, por ejemplo, que está muy presente en la naturaleza y en estas formas que hace la arena, el agua, incluso en el cosmos, en el infinito. Nuestro cerebro es una máquina entrenada para reconocer patrones. Como digo, a veces los identificamos más fácilmente, otra vez es más complicado, pero la percepción ocurre en el cerebro, nuestros oídos, nuestros ojos son solo herramientas, pero esa percepción ocurre en el cerebro. Y bueno, yo sé que en la comunidad WordPress tenemos mucho ritmo, son ahora mismo en las tres y cuarto y vamos a demostrarlo. Entonces, vamos a hacer una carrera de caballos. Los caballos son vosotros. Entonces, vamos a empezar con el trote, galope. Curva a la derecha, a vuestra izquierda. Vamos, tenemos trote. Curva a vuestra derecha. Galope. Un túnel. Trote. Curva a la derecha. Y salto. Muy bien. Oye, qué ritmazo. Muchas gracias. Bueno, en diseño hay dos tipos de ritmo, en las webs hay un ritmo horizontal y un ritmo vertical. El ritmo horizontal tiene que ver con la legibilidad y el ritmo vertical tiene que ver con la lecturabilidad, qué diferencia hay entre legibilidad y lecturabilidad. Lo usan más en inglés, legibility y lecturability, pero se entiende bien la diferencia. Ahora vamos a ver más ejemplos y tal, pero el ritmo horizontal tiene que ver, o sea, la legibilidad tiene que ver con la capacidad que tenemos para leer mejor o peor las letras, la capacidad que tenemos para reconocer los caracteres y la lecturabilidad tiene que ver con la comprensión del texto en su conjunto. Tiene más que ver con la jerarquía visual, con comprender, diferenciar lo que es un título, lo que son párrafos, lo que es una nota al pie, en función de los tamaños, de las distancias. El ritmo horizontal tiene que ver con el espacio entre letras y palabras y el ritmo vertical tiene que ver con el espacio en interlineado, o sea, el espacio entre líneas y el espacio entre párrafos o otros elementos del diseño. Ahora ya entendemos mejor el título de la charla. Vale, vamos a ver el ritmo horizontal para entenderlo un poco mejor. En los títulos, siempre reducimos el espacio entre letras, porque cuando diseñamos una tipografía, la persona que diseña la letra diseña letra por letra, como si fuera un dibujo con vectores, y tiene en cuenta un tamaño pequeño, como siempre piensa en un tamaño para párrafos más que para títulos. Entonces, cuando las letras tienen un tamaño grande y mucho peso, es decir, mucho grosor, parece que la percepción que tiene es que es mayor de lo que debería, parece que está demasiado separada, entonces siempre lo reducimos un poco para que quede más compacto. Si os fijáis en este ejemplo, pues no hay mucha diferencia, son reducciones muy sutiles, o un menos 0,08 rem, que es muy poquito, por ejemplo, pero es eso lo hacer por eso, para que se sienta, se perciba de la misma manera que los párrafos, y no quede demasiado espacio, no se percibe demasiado espacio. Esto es una cosa que tenemos que hacer siempre, siempre reducimos el interletrado en los títulos un poquito. Cuando escribimos en letras mayúsculas, y en tamaño pequeño, por ejemplo, para poner en las cards el nombre de la categoría, que se suele hacer así mayúsculas, o en otros ejemplos, cuando es poco texto, ya sabéis que mayúsculas se lee peor, pero cuando es poco texto, muchas veces pues queda más compacto. En este caso aumentamos el espacio entre letras, leemos un poquito de letter spacing, por ejemplo, en este ejemplo es un 0,1 rem, muy poquitos, son diferencias muy sutiles, pero que se percibe bastante mejor cuando se aumenta, en este caso se aumenta. ¿Por qué? Porque si no la aumentamos, al final las letras se perciben demasiado juntas, entonces necesitamos aumentar un poquito el espacio entre letras para que se lea mejor. Esto es, como decía, para mejorar la legibilidad, o sea, paras un poco y ya se lee bastante mejor. Aparte de que queda más elegante, en las marcas se suele hacer cuando son logotipos mayúsculas, también se aumenta un poco el espacio entre letras, y queda más elegante. Otro tipo de espacio entre letras es, bueno, lo que en diseño llamamos Kernin, el letter spacing o enterletrado es lo que en diseño es lo que en diseño llamamos tracking. Alguna vez os habéis preguntado, ¿no? ¿Y qué se diferencia del Kernin del tracking? Todas las mañanas, ¿no? Levantáis, ¿qué sé? Si es espacio entre letras, ¿pero qué es el Kernin y qué es el tracking? ¿Qué lío? Es muy fácil diferenciarlo, en realidad. Os reíos los que síos lo preguntáis, ¿no? El Kernin lo define el diseñador de la tipografía, no se puede modificar en la web. El letter spacing, si lo modificábamos con CSS y lo aplicábamos a todo el elemento, ¿no?, a todo el párrafo, o a donde declaremos, si ponemos una clase y acotamos, pues donde lo declaremos, ¿no? Pero el Kernin no se puede cambiar con CSS porque viene con la tipografía. Son los espacios entre ciertos pares de letras que el diseñador de la tipografía modifica para mejorar la elegibilidad. Por ejemplo, el ejemplo de arriba está mal, no hay un Kernin, no hay un ajuste óptico para mejorar. Se nota mucho entre la W y la O, por ejemplo, ¿no? Que parece que la W forma parte de otra palabra, casi está demasiado lejos. Sin embargo, abajo vemos que la O ocupa un poco del espacio de la W y se lee mucho mejor, ¿no? Se ve la palabra mucho más compacta. Pero esto no podemos modificarlo nosotros. Lo que tenemos que hacer es elegir una tipografía que esté bien diseñada. A veces nos descargamos tipografías gratuitas de sitios de dudosa procedencia y está mal diseñado el Kernin, ¿no? Y para saberlo, pues, normalmente nos fijamos mucho en, por ejemplo, la W y la O en estos ajustes que hace falta, ¿no? Hacer porque en los demás, en la Zeila, por ejemplo, también se nota, pero no se nota tanto, ¿no? Entonces, si ponemos una W y una O, lo vamos a detectar también para saber si la tipografía que hemos elegido, pues tiene un buen Kernin, ¿no? Hoy en día, por ejemplo, las de Adobe Fonts o las de Wolf Fonts tienen, la mayoría tienen un buen Kernin, aunque alguno se goela. Otra cosa que tenemos que tener en cuenta es el espacio entre palabras. Hasta ahora estábamos hablando del espacio entre letras y también tenemos que tener en cuenta el espacio entre palabras, ¿no? Y aquí vuelvo a insistir en el ritmo, ¿no? En cómo leemos. En el bloque de la izquierda, en el párrafo de la izquierda, tenemos un ritmo de lectura normal, ¿no? Nunca se justifican los textos porque el espacio entre palabras es todo el mismo espacio, pero el de la derecha es nunca se justifican los textos porque el espacio entre palabras tiene que tener un ritmo constante, los espacios irregulares entre palabras que se producen, sí, justificamos los textos, hacen que este ritmo se rompa y se dificulta la lectura. Cada tú puedes decir, bueno, van a que exagerada, sí, pues con un objetivo didáctico lo exagerado, pero hay muchas personas que tienen dificultades en la lectura, por ejemplo, una persona que tenga dyslexia, esto realmente le ocurre, es que se pierde, al romper el ritmo, lo que le ocurre es que lo leen con más dificultad, ¿no? Por eso en web nunca debemos justificar los textos. A veces hacemos webs para clientes y, claro, el cliente siempre tiene la razón, a veces los clientes nos piden que justifiquemos los textos, a mí por suerte nunca nadie me lo ha pedido, pero sé de muchos que sí, por ejemplo, podría pediros que levantar en la mano, algunos ha pedido un cliente que justifique los textos, sí, lo siento, lo siento por vosotros, a ver, dejar la mano levantada y lo sabéis justificado o lo habéis podido explicar por qué no se podía, lo habéis dejado justificado. Vale, pues para estos casos que había, demasiados, había muchos, si tenéis que justificar los textos, por lo menos, incluid guiones. Bueno, el ejemplo de la derecha, realmente no está bien justificado porque lo estaba haciendo directamente en Google Slides, esto es una confesión, porque me lo podía haber llevado a otra herramienta y haberlo hecho bien, pero se entiende, ¿no? Tendría que estar toda alineada la derecha y los guiones, ¿no? Es verdad que hay una norma en composición de textos, yo vengo de diseño editorial, llevo más de 15 años diseñando y empecé haciendo libros, catálogos, folletos y estoy especializada en diseño editorial, por eso hablo tanto de tipografía. Hay una norma que dice que no se pueden poner tres guiones seguidos y hay una propiedad de CSS que esto lo tienen en cuenta y no te los pones, eso sería incorrecto, pero bueno, para el ejemplo pues me valía. Cuando ponemos guiones, sí que vemos que el espacio entre palabras se ajusta, no es perfecto como cuando alineamos a la izquierda, pero por lo menos el cliente está contento y una persona con dislesia pues lo puede leer más o menos y vamos ahora al ritmo vertical, otro tipo de ritmo visual. La diferencia entre, bueno, aquí igual estoy haciendo un poco de trampa, ¿no? Porque veis que el texto de la izquierda pues no tiene ritmo, ¿no? Igual que el ritmo en música cuando está desacompasado, nos resulta desagradable. El ritmo visual cuando no está bien medido pues también nos, aparte de que visualmente nos resulta más desagradable, nos perdemos, comprendemos peor, a que si el párrafo pertenece a una sección o pertenece a la siguiente. El párrafo de la, perdón, el texto de la derecha tiene un buen ritmo y el izquierdo pues tiene un mal ritmo porque cuando establecemos la configuración del interlineado y el espacio entre párrafos tenemos que tener en cuenta que las unidades que utilicemos sean múltiplos para que caigan dentro de la cuadrícula que hemos definido. En el caso de la izquierda decía que he hecho trampa porque claro, ya no, o sea, bueno aquí no se ve bien, no voy a volver la anterior, no es solo que no tenga ritmo, es que además tiene demasiado poco interlineado, entonces bueno, para que entendiéramos que está mal compuesto. Bueno, en el caso es que tiene que cuadrar, aquí más que la legibilidad interviene la lecturabilidad como decíamos antes, la comprensión del texto y es más importante, son más importantes las distancias, ya sabes que las cosas que están más juntas las entendemos como que pertenecen a un mismo todo y las cosas que están separadas las entendemos como diferentes, una cosa pertenece a un mismo conjunto o si está separada pertenece a otro conjunto. Y aquí por ejemplo, bueno, se ve claramente que sería 1,5 rem en los 24 píxeles y 3 rem, no? Vemos que el título, los párrafos pertenecen a primer título y luego hay otro título abajo que ya pertenece a otra sección, no está dentro del mismo título. ¿Por qué? Porque tiene una separación, una separación proporcional. Y esto en realidad se trata de seguir, o sea, cumplir con la norma de una escala modular y un ritmo, definir lo primero el tamaño de la letra en función del tamaño de la letra, establecemos un ancho máximo de columna y en función de eso establecemos el interlineado. Cuando el ancho de la columna cambia el interlineado también cambia y en función de eso también cambia el espacio entre párrafos. Esto luego si alguien me pregunta cómo lo hacemos responsive, lo contesto, pero adelanto que es con la función CLAMP en CSS. Al final son matemáticas, pero son muy sencillas y además tenemos herramientas como esta que se llama gridlover que nos hace los cálculos para poder cuadrar. Y como hoy quería que me hicieran muchas preguntas sobre esto, vamos a acabar aquí, pero vamos a terminar con lo que os lleva resonando en la cabeza desde que leísteis el título. . . Bueno, gracias a Carlos MDH, que ha hecho un montaje, no sé cómo, pero yo dije, yo voy a hacer una mezcla, y es una mezcla de Carlos, así que le atribuyo la autoría, y a Patricia Manterola también, ¿cómo no? Y nada, y a todos vosotros, muchas gracias y preguntas. Bueno, muchas gracias por la charla, una pregunta que siempre me hago, ¿vale? La justificación de textos en web, ok, pero en los demás textos, en documentos, en otro tipo de archivo digital, que esto siempre me me ha preguntado. Muy buena pregunta. ¿Por qué tú puedes decir, bueno, y por qué en los libros se justifica el texto? Bueno, pues porque en los libros no, los libros no son responsivos. Tenemos un ancho de línea definido. Y para ese ancho de línea utilizamos unos valores en Adobe InDesign, que es la herramienta que utilizamos para editar. Establecemos unos números mínimos y máximos de espacio entre letras, y con esos valores, en función del tamaño de la letra, del interniado y todo eso, con esos valores el propio InDesign va ajustando para que, o sea, se suele hacer un mínimo y un máximo, para que lo haga automáticamente, ¿vale? Y el propio InDesign ajusta los espacios irregulares entre palabras para que sea lo más regular posible, con lo cual se le mejor. Se utilizan siempre guiones, y además una vez que se han establecido esos ajustes automáticos, con un mínimo y un máximo, vamos párrafo por párrafo ajustando manualmente. InDesign te ponen rojo, cuando ve que no ha conseguido de manera automática establecer unos valores de espacio entre palabras ópticos, te lo ponen rojo. Entonces vas uno por uno, y la persona que se ocupa de editar, pues si lo has hecho mal, te pone a corregir el... O sea, es una cosa que se hace, es un trabajo que se hace párrafo por párfo en los libros. Y podrías decir, bueno, esos cálculos se pueden hacer con house screen. Claro, pero alinear a la izquierda. Porque puedes decir, bueno, pero esa tradición es que queda en blog, que queda más estético, más bonito, bueno, pero la estética es cultural y aprendida. Podemos aprender a apreciar la belleza del texto con bandera izquierda, que es lo que es cómo se conoce el texto alinear a la izquierda. Gracias a ti por la pregunta, Marta, muy buena. ¿Alguna otra pregunta? Tengo un artículo buscando el internet porque no quiero hacer publicidad, pero tengo un artículo que empieza diciendo, has llegado aquí porque la persona que ha diseñado tu web te ha enviado este enlace. Le has pedido justificar los textos y yo te voy a explicar por qué no es una buena idea. Es un artículo superlargo, explicando todo con capturas, como guión de ejemplos, y explicando que es por accesibilidad, no es accesible un texto justificado. O sea, alguien quiere profundizar en el tema. Sí, yo quería preguntarte. ¿Hay un carácter que es el espacio duro? ¿Este es útil en web o no se usa o da problemas en ciertos navegadores? Sí, es el espacio de no separación, el non-breaking space. Hay una entidad HTML, que es así precisamente, nbsp, no, ampersandnbsp.com, y se utiliza para cuando queremos forzar un salto de línea para no dejarnos una y griega suelta a la derecha, al final de la línea. Claro, tú lo que harías sería pasar la y griega al siguiente renglón, pero en web no lo podemos hacer porque es responsivo. Entonces, claro, saltaría al siguiente renglón aunque no hiciera falta y quedaría ahí un hueco en blanco. Entonces, lo que hacemos, en vez de separar con un br, por ejemplo, lo que hacemos es unir, unimos la y griega a la siguiente, en vez de separarla de la interior, y así la y griega se va con la siguiente palabra, y aunque sea tanto móvil como un escritorio, que vaya unida, siempre va a funcionar. Todos lo hacemos así. Es muy útil ese carácter para no dejar palabras viudas o uérfanas. Si no cabe, tendrá que ir abajo. Imagínate, una marca, un naming, que son dos palabras. Tú lo que quieres es que nunca te salgan separadas, porque quieres que ese naming se respete. Entonces, tú metes ahí el non-breaking space para que siempre vayan juntas, pero si están justo al final de una línea, tendrán que ir abajo y dejar ese hueco arriba en la línea anterior. Son palabras muy largas, en 320 píxeles, que es lo mínimo que usamos hoy en día, no sé qué sea un reloj o algo así, creo que no se leen las webs en el reloj, solo los mensajes. 320 píxeles, yo lo que controlo como lo mínimo. Ahí caben un montón de palabras. Si no te cabe, entonces establece un tamaño menor de letra para ese ancho de dispositivo. Se utiliza mucho también, por ejemplo, con una cifra y el valor, las unidades. 8 euros, eso siempre tiene que ir junto. No se puede quedar el 8 al final de la línea. Nos ponemos 8, non-breaking space, euros. Y eso va a caber. Hombre, si fuera una palabra tan larga, tan larga, tan larga que no cabe, puede tener el problema siempre. No dependería de la longitud de las palabras, sino de todas las palabras que vienen previamente en esa misma línea. Solo se va a quedar unida las palabras en las que tú unas con el espacio duro. Las demás van a fluir de manera natural. Vale, gracias. En primer lugar, gracias por la charla. Es muy interesante. Yo soy front-end, entonces, de diseño. No tengo mucha idea. Pero cuando nos pasan los diseños, a veces la letra está como... el tamaño de letra está en píxeles y el line-hate está en porcientajes. Entonces, el ritmo vertical. Si yo mantengo fijo el tamaño de la letra y lo pongo por ejemplo line-hate 130%, se mantiene. A ver, tú tienes que establecer siempre unas medidas responsives. Entonces, para un tamaño de letra concreto y un ancho de línea concreto, tienes un interlineado. En el momento que cambias el tamaño de la letra, que siempre tienes que cambiarlo para cuando cambias el ancho del dispositivo, tienes que cambiar también el interlineado y el espacio entre párrafos. Y tienen que ser múltiplos entre sí. Tú lo declaras en REM o en un porcentaje, pero si lo divides entre 16 te dan los píxeles. Si lo multiplicas, perdón. Entonces, si el diseñador te da píxeles, tú lo traduces, lo conviertes a REM y funciona. Lo que pasa es que tienes que usar la función CLAMP que he comentado antes para decirle que también para eso utilizamos una herramienta. Hay mucha documentación. Hablé de esto en Work in Valencia del año pasado. También hay una charla que lo explico y tal, porque en WordPress se utiliza la función CLAMP. Pero tienes que determinar un tamaño mínimo de dispositivo, un tamaño máximo de dispositivo y luego dices el tamaño de letra mínimo para ese dispositivo mínimo y el tamaño de letra máximo para ese dispositivo máximo. Yo hago un tamaño de letra ideal, que se declara en unidades de viewport para que sea un porcentaje relativo. Y todo esto se interpola. Es una función CLAMP, que es genial porque hace esto, teniendo en cuenta lo mínimo y máximo del ancho del dispositivo. Entonces, no puedes hacerlo solo para el tamaño de letra, sino para todas las unidades que se modifican cuando se modifica el tamaño de letra. Pero con la función CLAMP es muy fácil, porque es todo responsable. Si lo declaras una vez, y ya está. Y esto lo tienes que hacer no solo para estas tres variables, sino para todos los elementos. El H1, el subtítulo, el párrafo normal, el párrafo destacado, el pie de foto, y lo vas cambiando. Luego hay muchas unidades que se repiten. Hay tamaños de letra que no hay tantos tamaños pero hay más diferencia de tamaño en escritorio. En móvil ya llega un momento que los tamaños más pequeños tienen el mismo número. Pero eso se hace con herramientas. Se te lleva un tiempo, pero luego es que es todo tan maravilloso porque fluye. Tipografía fluida. Hay mucha documentación. Sí, porque así sé también que si te preguntábamos era esto. Es un poco rollo de explicar, pero si tienes interés para buscar más información tipografía fluida, y ahí calculadoras. Pero primero necesitas que la persona que diseña establezca los tamaños y tenga en cuenta la rejilla, la proporcionalidad y todo esto. Muy bien, muchísimas gracias. Gracias a ti. Una pregunta que esperaba que alguien me hiciera, pero si nadie me la hace, la quiero responder. Si la prefiero responder para que no se te olvide, espero. No, no, no. Quiero dar la oportunidad de que alguien se le ocurra. Yo tenía una pregunta respecto al mismo mundo del copyright y sobre todo cuando se hacen landis más enfocadas a ventas. Se dice mucho que se generan fricción cognitiva y eso para la venta es malo. Sin embargo, en el mundo editorial, que además tú eres experto, estamos acostumbrados a leer párrafos muy largos. Entonces quería preguntarte, como me pareció muy interesante lo del ritmo horizontal y vertical que mencionabas. ¿Qué opinión tienes tú respecto a cómo establecer ese ritmo en trocear los párrafos para la venta o para que en un libro o en escritorio es diferente que en web y sobre todo en móvil. En móvil, o sea, en internet en general, en la web en general, queremos recibir la información rápido. Y sin embargo, cuando estamos leyendo un libro, un periódico, nos entretenemos más en el deleite del placer de la lectura. No queremos solo coger información, sino entretenernos leyendo. Entonces, efectivamente, hay que hacer una palabra sin llevarlo al extremo. Hay una moda ahora de hacer palabra por párrafo. Aparte de que ya está un poco manido y cansa, no es más legible. Está un poco exagerado y yo no creo que por usabilidad sea bueno. Yo creo que eso en su día fue muy novedoso y engancha, llama la atención, engancha, pero yo creo que no hay que pasarse. Es más natural y si separar, o sea, muchas veces, o sea, en el colegio aprendimos que es un párrafo una idea, pero ahora en web es una frase en párrafo, ¿no? Entonces, claro, tenemos que cambiar un poco el chip, pero eso no es exagerar. En el móvil, sobre todo, que si tienes un ladrillo que solo se ve texto y no se ve ninguna separación, nos abruma y no podemos leer. Pero sí, eso sin exagerar. Nada a ti. Hola, lo primero muchas gracias por la charla. La verdad es que el mundo tipográfico es infinito y mi pregunta es ante una web que, por ejemplo, trabajas tipografía sobre el fondo blanco y luego sobre el fondo con colores y teniendo en cuenta que haya un contraste ya óptimo para la legibilidad. Si trabajas los textos de una manera diferente ante fondo blanco, ante fondo de color. Sí, claro, igual que cuando un párrafo tiene un color que no sea negro, bueno, nunca se usa el negro puro, ¿no? Ya sabemos por qué tiene, tendría demasiado contraste, es muy duro. Pero, por ejemplo, si ponemos un texto en letra azul, le tenemos que dar un poco más de peso por el contraste. Aunque el color en sí, objetivamente por métrica, tenga contraste, si es muy fino pierde legibilidad igualmente, ¿no? Tiene menos contraste por el color en sí, esté contrastado, ¿no? Y con el fondo ocurre lo mismo. El color de fondo se come la letra. Entonces, le tenemos que dar un poco más de peso. El peso es el grosor de la letra. Si es un color muy clarito, pues no hace ese efecto, pero por qué tiene eso. Yo soy el diseñador, yo son los programadores. Y luego se quejan de, oye, es que esto es de una manera subjetiva. A veces es muy subjetivo, porque cuando llevas muchos años lo sientes, que ese es el tamaño óptimo. Y les llega de muchas maneras y no les vuelvo loco, pero se quejan. Dicen, a ver, un poco de consistencia. Si me has declarado esto aquí, ¿por qué ahora me declaras esto otro y tú? A ver, no tiene nada que ver esto con esto. Te voy a explicar por qué. Lo que le he explicado ahora cuando preguntaba es por cada elemento. Y luego tengo que hacer una jerarquía, pero es que si queremos ser profesionales y alcanzar la excelencia, si tenemos que hacer un proyecto en el que queramos demostrar que hacemos un buen frontend, pues se hace así. En este proyecto no tengo presupuesto, no tengo ganas. Lo voy a hacer como pueda. Declaramos... No hacemos ni tipografía responsiva, ni nada. Tenemos el conocimiento y las ganas de hacer algo excelente. Hay que tener en cuenta el usuario y que tenga una experiencia de lectura agradable. Y se hace así. A ti. Ahora creo que estoy aquí. Hola, muy buena sana. Me vas a hacer una pregunta difícil. Venga. La pregunta es, ¿cómo afectaría el peso visual de los elementos a ese ritmo visual? Por ejemplo, en el ejemplo que has puesto antes, el título estaba más separado de los párrafos, que los párrafos entre sí. También cuando hay una imagen dentro de los elementos. Claro, yo como programador digo, bueno, 20 pisceles cada cosa entre sí, pero obviamente eso no cumple con los ritmos. Pero digamos que hay algún modo de determinar qué espaciado extra hay que añadir para esos elementos, al final es algo que también... A ver, tenemos al final yo para los espacios declaro unos espacios al principio, que son iguales para todos los proyectos, es un sistema despaciado. Entonces son 8, 16, 24, 32, 40, 80. Y con eso hago todo. Entonces lo digo, lo llamo S, M, L, XL y tal. Entonces si es 40 y algo ya es 80. Si es menor de 40, pero más de 24 son 32. Entonces al final no es tan difícil. Así que puedes aferrarte a un sistema métrico, pero tienes que tener en cuenta el peso visual que eso es una percepción. Y un diseñador te puede decir un poquito menos y otro te puede decir un poquito más. Y incluso depende de lo que quieres comunicar. Somos gamberros, somos elegantes, todo eso influye. Entonces es una cosa subjetiva, aunque siempre hay dentro de unas normas. Los colores más fuertes se perciben como elementos más grandes. Desde luego si es más grande tiene más peso, es evidente, pero hay otras formas de darle importancia visual a los elementos. Como por ejemplo eso cambiando el color o si pesa mucho tienes que separar. Pero tendría que estar más cerca, pero es que tiene un tamaño mucho más grande. Por eso yo me imagino que tienen un aura los elementos que necesitan su espacio para poder respirar porque son muy fuertes y necesitan más espacio. Si son finitos necesitan menos espacio. No tienen tanta tensión. Se conoce un diseño como tensión. Hay un agujero negro que hay que separar las cosas para que no se lastra. Ya, voy a contar eso rápido. Claro, tienes que hacer seguir la cuadrícula. Tenemos que seguir la cuadrícula y cumplir con los múltiplos. Y si mete una imagen cuál es el alto de la imagen puede ser 624. Si tenemos un ancho de 100% puede ser 644. Si 127 se me rompe el ritmo. No pasa nada. Hay librería de Javascript para calcular el alto en función del interlineado y que te cuadre, pero no hace falta usar Javascript para eso. Es como cuando vas en el tren que haces y no pasa nada. Porque el ritmo al final continúa. En los libros había que tener muy en cuenta eso porque las páginas, cuando le das la vuelta se transparentaba la línea de la página anterior. Tenía que cuadrar para que no se manchara. Pero en la web no tenemos revés. Con lo cual no pasa nada. Era eso. Muchas gracias. Gracias a todos por atender la de Ana. Hay mancharlas todavía.