Fundamentos de la tipografía UI

1. 00 Fundamentos de tipografía de introducción: Bienvenido a este curso integral sobre Fundamentos de Tipografía UI La tipografía es un elemento clave en el diseño, insuflando vida a tu trabajo y guiando a tu audiencia Durante este curso de 1 hora, me gustaría darte una visión general sobre un lado más técnico de configurar y trabajar con tipografía en la web Comenzaremos con lo básico como dónde encontrar tipos de letra, cuántos necesita para una buena configuración de interfaz y por qué las superfamilias son tan fantásticas Te voy a mostrar cómo crear una jerarquía sólida configurando una escala de tipos diferentes maneras en las que podrías hacerlo. Aprenderemos a nombrar textiles de manera efectiva y demostrando que no interfirimos con la configuración del código y la optimización de motores de búsqueda. Y voy a demostrar por qué es tan importante usar unidades RM sobre píxeles tan pronto como tu diseño cobre vida en código. Aprenderemos sobre el peso de la fuente y las fuentes variables, y explicaré cómo funciona la altura de línea en CSS y qué significa eso para tu configuración de tipografía También exploraremos la importancia del contraste de color y cómo verificarlo y documentarlo. Y lo más importante, veremos más de cerca cómo lidiar con la tipografía en diferentes tamaños de pantalla Esto incluye examinar configuraciones con puntos de ruptura, así como un enfoque más moderno para tipografía fluida usando Si bien el enfoque está en el aspecto teórico, cerrando la brecha entre el diseño y el código, también echaremos un vistazo a la implementación práctica usando herramientas como Desde la configuración básica del texto, dos técnicas más avanzadas como el uso de estilos, variables y modos. Tanto si eres un principiante como un diseñador experimentado, esto causa a medida para ayudarte a refinar tus habilidades tipográficas y configuración técnica Este es un curso MonaRo A. de MonaRo A. 2. Descripción general: Probablemente no haya ningún tema en el diseño rodeado de diseños mayores para operar que la tipografía No se deje intimidar. No se trata de obtener un doctorado. Se trata de agarrar algunas reglas básicas para asegurar que tu tipografía Y te voy a mostrar. Lo importante es entender que en lugar de leer cada palabra en línea, gente tiende a escanear texto. Entonces, ¿de qué trata este texto? Sí, eso fue suficiente. ¿Y de qué trata este texto? Es exactamente lo mismo, pero como pueden ver, se ve muy diferente porque tiene una jerarquía de trabajo. Tenemos muchos elementos como tamaño, peso, color, posición y espaciado para crear esta jerarquía, y los vamos a ver todos con más detalle. También es muy importante para mí mostrarte un poco cómo funciona esto en código para traducir y comunicar mejor nuestra configuración entre diseño y desarrollo. Entonces, durante este curso, vamos a hablar tipografías y fuentes y cuál es la diferencia en realidad Serif, y las llamadas superfamilias. Vamos a discutir dónde encontrar caras tipo para usar y cuántas necesitamos para bien diseño. Vamos a configurar una escala de tipos juntos, y voy a mostrarte diferentes formas de hacerlo. Te voy a explicar por qué usamos RM para código y píxeles a la hora de definir tamaños para la programación. Voy a tener una palabra sobre nombrar y por qué es tan importante hacerlo bien Vamos a hablar de peso, altura de línea y longitud de línea, así como espacio en blanco. Y vamos a discutir el contraste, un tema muy importante a la hora de la accesibilidad. Y muy importante y vamos a sumergirnos tipografía receptiva para asegurarnos de que tu texto se vea genial en todos los tamaños de pantalla presente, consideraremos configuración tradicional con puntos de interrupción, así como un enfoque más moderno usando abrazadera CSS y discutiendo cuándo tiene sentido usar qué? Si bien este curso se enfoca en aspectos teóricos, en el camino, también echaremos un vistazo a la implementación práctica usando herramientas como Figma, desde la configuración básica de texto hasta técnicas más avanzadas como el uso de estilos, variables y modos, así como cómo alinearse con configuraciones de diseño receptivo Y por supuesto, muchos consejos y trucos, así como algunos ejemplos de la vida real en el camino. 3. 02 tipografía y fuente en audio: Tipo de letra y fuente. ¿Qué es un tipo de letra? Se trata de un conjunto de caracteres de diseño, incluyendo letras, números y puntuación. En esta presentación, estoy usando un tipo de letra llamado Poppins Una fase tipo incluye variaciones como extra negrita, negrita, regular, condensar, y así sucesivamente Una fuente, por otro lado, es un estilo y tamaño específicos de una fase tipo. Entonces, mientras que type phase se refiere al diseño de los caracteres, font se refiere a un estilo y tamaño particulares de ese diseño. Por ejemplo, Poppins bold 16 point, esta es una fuente. A pesar de que el término correcto es tipografía, mucha gente le gusta referirse a ambos Es una mezcla común, pero no es gran cosa siempre cuando entiendas la diferencia en tu trabajo diario 4. 03 Serif, sans serif y superfamilias: Serif, San Serif y superfamilias. Hay muchas categorías de tipos de letra, pero las que realmente debes conocer y San Serif, ya que son fundamentales para entender papel de la tipografía en la legibilidad y la estética del diseño Identificar la diferencia entre ellos es bastante sencillo. serapones incluyen un trazo adicional o elemento decorativo al final de la letra, lo que puede mejorar la legibilidad en material de impresión guiando el ojo a lo largo Los ejemplos clásicos incluyen tiempos New Roman y Garamond. Comprender cuándo y por qué usar cada tipo puede afectar significativamente la efectividad de su diseño. Ya sea que estés buscando un look tradicional con serapones o un toque más contemporáneo con un San Entendamos esto un poco mejor. letra San SRF caracterizados por su apariencia limpia y moderna son una opción popular para pantallas digitales y contenido en línea Ejemplos notables incluyen Helvetica e Inter. Estas fuentes transmiten información rápida por tamaño de manera efectiva, haciéndolas ideales para espacios más pequeños, como etiquetas bajo iconos o interfaces digitales en general. Ofrecen una buena legibilidad en varios tamaños de pantalla y resoluciones Las caras tipo Sp con sus elementos decorativos en los extremos de las letras, ofrecen un aspecto más tradicional y sofisticado. Este estilo clásico es ideal para crear un ambiente de confianza y autoridad, también en los contenidos digitales. También pueden ayudar a agregar un toque de elegancia y formalidad a sitios web y aplicaciones, especialmente en entornos como revistas en línea, plataformas académicas y servicios profesionales Si bien los serapones suelen asociarse con la impresión, también se pueden usar en el diseño digital Sus seraps detallados pueden ayudar a guiar el ojo a lo largo de las líneas de texto, haciéndolos adecuados para lecturas más largas en pantallas de mayor resolución donde se mejora la legibilidad También podrías incorporar fuentes era y San sera en tu diseño, alternando entre el texto del cuerpo del titular, o tal vez elegir un Serafond para una cotización destacada Sin embargo, lograr un diseño armonioso requiere ajustes cuidadosos Los tamaños de fuente, por ejemplo, pueden mostrarse de manera diferente entre los dos estilos. Lo que funciona para uno puede no ser adecuado para el otro. Si estás considerando mezclar fuentes serafín o San sera, te recomiendo usar lo que se conoce como una Como sugiere el término, una superfamilia es una colección de rostros tipo diseñados para complementarse armónicamente, a pesar de que uno es serafín y el otro serpo Estas superfamilias suelen incluir variaciones adicionales, como las versiones redondeadas, condensadas o bofetadas Gracias al ADN compartido, como la misma base, tamaño, proporciones y espaciado, puedes mezclarlos fácilmente sin perder la armonía general de tu diseño. 5. 04 Dónde encontrar fuentes: Dónde encontrar fs. Hay tres lugares de donde podrías obtener tus tipos de letra Si trabajas para grandes corporaciones, es posible que tengan su propia tipografía personalizada que pondrán a tu disposición Por ejemplo, AB y B tiene cereal, tipografía realmente hermosa Ahora bien, es importante saber que aunque tengas el tipo de letra instalado en tu computadora, solo se te permitirá usarlo con esa compañía específica La segunda opción es comprar una licencia. Hay muchas páginas como MyFons o fun shop donde puedes navegar y encontrar increíbles tipos de letra. Déjame mostrarte. Aquí estamos en mis fuentes, y puedes buscar fuentes, por categoría, por best sellers, y así sucesivamente. Yo sólo voy a ir por categoría y decir que estamos buscando una fuente Sansa Entonces tenemos más filtros aquí la izquierda, así que realmente a mano. Podemos ver diferentes fuentes aquí abajo y obtenemos una vista previa muy agradable. Vamos a ir por ésta. Me gustan mucho estos ejemplos que nos dan para que puedas hacerte una buena idea de cómo puedes diseñar con él. Ahora, aquí abajo, obtienes la información sobre la fuente con diferentes pesos, y también puedes ver si quieres un paquete familiar o estilos individuales. Por lo general tiene sentido ir por el pack familiar, y obtienes las especificaciones técnicas y muy importante, la licencia. Esto es algo que realmente necesitarías mirar con tu cliente para asegurarte de que lo que estás comprando, tienes derecho a usarlo y eres consciente del costo. Luego puedes simplemente hacer clic una vez que lo decidas, y luego puedes elegir lo que planeas usar esta fuente. Y luego, por ejemplo, queremos una versión de escritorio con la que diseñar, y queremos incrustar esto en un sitio web, y luego puedes ver aquí que esta se calcula por vistas. Necesitaría instalar esto en su máquina para acceder a él software de diseño de interfaz de usuario como IGMA La tercera opción será usar una fuente gratuita. Hay algunos preinstalados en tu computadora ya como Aerial. Están bien como fuente alternativa, pero podrías notar que no es suficiente para tu diseño de interfaz Gran lugar para ir gratis tipo caras son las fuentes de Google. Es muy popular tiene excelentes opciones, y es súper fácil de usar. Solo ten en cuenta que cada vez que obtienes algo gratis en línea, generalmente viene adjunto con algún intercambio de datos. Ese también es el caso aquí. Es muy menor, absolutamente nada trágico, pero aún debes hacer que tu cliente esté al tanto de ello si quieres usar una fuente de Google. Eso es lo mismo para Google Maps, por cierto. Echemos un vistazo a cómo funciona la fuente de Google. Lo más importante ya que hay bastantes, si haces clic en los filtros, entonces puedes rellenar a las diferentes fuentes. Así que digamos que solo queremos el Sanserf o también si estás buscando soporte de lenguaje específico, entonces esto es realmente útil Ahora vamos a hacer clic en el primero de aquí arriba. En realidad, me llevo Open Sans me gusta bastante este. Entonces puedes obtener una vista previa. También puedes escribir el texto que quieras. Si hacemos clic en GFont Entonces obtenemos un poco más de información. Si quieres saber más, haz clic en Diseño, y esto será relevante para ti. También obtenemos todo el desarrollo de información que necesitaría. Probablemente van a obtener el código de inserción, y luego aquí está toda la información técnica. Literalmente solo necesitan saber cuál quieres usar. Por cierto, si estás trabajando en Figma, entonces no necesitas hacer nada Ni siquiera necesitas descargar la fuente ya que todo ya está preinstalado en Figma siempre y cuando estés usando Google Fonts 6. 05 ¿Cuántos tipos de letra: ¿Cuántas caras tipo debes usar? Entonces, cuántas caras tipo deberías o podrías tener en tu diseño. Generalmente se recomienda tener no más de dos. Es posible que tengas un tipo de letra de pantalla muy dominante que sea parte de la marca que solo usa tus titulares principales como escritura a mano o algo muy especial, eso no es realmente legible y sería abrumador para texto pequeño Para todos los demás textos, entonces agregarías otro tipo de letra que sea muy legible y simple de usar A menos que tengas mucha confianza con tipografía o tengas una marca dada a seguir, entonces recomendaría que prefieras mantenerte alejado de esas fuentes de pantalla elegantes Realmente no los necesitas para un diseño sólido. Si quieres sin embargo, caras de tipo mixto como Saraf San Saraf redondeadas, y así sucesivamente, entonces te recomendaría que busques usar una superfamilia ya que funcionan muy bien juntas Entonces esa sería otra razón por la que podrías tener dos caras tipo. Sin embargo, a menos que estés usando un tipo de letra de pantalla o mezclando categorías como Serif y San Serif, probablemente terminarás con dos caras de tipo muy similares, y entonces es mucho mejor usar solo Yo personalmente recomiendo comenzar y apegarse a un solo tipo de letra siempre que sea posible Para ser honesto, rara vez uso más, y aún puedes agregar esta variación usando diferentes tamaños, pesos y colores para crear tu jerarquía. Y eso suele ser más que suficiente. Entonces, para resumir, a menos que estés branding pida una cara de tipo de pantalla prominente, o quieras mezclar estilos como Serif y San Serif, donde recomendaría buscar superfamilias, apégate a 7. 06 La escala tipográfica: Crear una escala de tipo significa organizar los tamaños de texto de manera consistente, lo cual es clave para crear jerarquía. Es como darle a cada texto su propio nivel de importancia, haciendo que todo sea más fácil entender y visualmente atractivo. Al configurar una escala de tipos, normalmente comenzamos configurando un tamaño de fuente base, que generalmente se alinea con nuestro tamaño de texto corporal, ya que es el más frecuente que se usa. Una opción popular es de 16 píxeles, lo que también equivale a un RM, el tamaño predeterminado que usan los navegadores. Por supuesto, puedes cambiar el tamaño si quieres, pero a menudo es mejor quedarte alrededor este tamaño base de 16 píxeles o un ram. Puedes, por supuesto, ir más grande. Esto facilita la lectura. Personalmente, me gusta apegarme a ello porque también encaja muy bien con mi sistema general de múltiplos de cuatro y ocho, que utilizo en todo mi diseño para alinear y espaciar. Entonces, una vez que tenemos nuestro texto corporal establecido, entonces podemos configurar nuestra escala alrededor de él. No hay una manera única de configurar esto. Pero por lo mínimo, agregaría algunos titulares. Enlaces de botones y tal vez una leyenda. Y, por supuesto, puede ajustar esto aún más a sus necesidades. Por ejemplo, podrías tener más de una versión para tu texto corporal. Esto podría variar en tamaño. O, en mi ejemplo, uso enfatizado y algunos estilos regulares. Además, es posible que deba agregar algunos formatos en cursiva para las cotizaciones o dividir los titulares en categorías de visualización y normales Los titulares de pantalla serían un gran abridor que llamaría la atención mientras que los titulares normales se mezclarían más perfectamente en el flujo de texto Entonces esto realmente depende en gran medida de lo que su diseño necesite. Pero a pesar de que puedes hacer crecer tu escala de tipos tanto como necesites, siempre recomendaría mantenerla lo simple y condensada posible. En una hoja estelar, también proporcionamos información general. Por ejemplo, de familia de fuentes que vamos a estar usando, en mi caso, Poppins, queremos dar alguna información sobre el tamaño y señalar que si bien en muchos software de UI, seguimos usando píxeles para definir En CSS, usamos RAM. Así que personalmente prefiero proporcionar ambas medidas para mayor claridad. Un RM corresponde a 16 píxeles, por lo que es bastante fácil calcularlo a partir de tus valores de píxeles. Adicionalmente, queremos comunicar el peso. De nuevo, me gusta dar el nombre que uso en mi software de interfaz de usuario así como el número CSS. Y también agregamos información sobre la altura y el espaciado de la línea. Aquí estaba un poco perezoso, y en mi ejemplo, acabo agregar algo de espaciado para mi botón. Y luego finalmente, también incluimos una vista previa de nuestro texto. Por lo general, al establecer nuestra escala de tipos, comenzamos con el tamaño de pantalla más pequeño. Si es necesario, podemos agregar puntos de interrupción y especificar cómo nuestro aficionado se adapta a diferentes tamaños. Existen diferentes enfoques para esto. Algunos más modernos ya ni siquiera necesitan puntos de interrupción, pero lo discutiré en un video separado Así que esta visión general de cómo funciona nuestra tipografía nuestro producto en diferentes tamaños es realmente lo que estamos buscando Ahora, puede comenzar su diseño creando una escala de tipos, pero es posible que también desee comenzar a diseñar libremente, y luego, una vez que se sienta cómodo acerca de que su diseño tome la dirección correcta, es posible que desee organizar esto un poco en una escala de tipos. Y absolutamente puedes hacer esto. Entonces, lo que hago es que realmente configuré mi diseño libremente Y luego una vez que siento que quiero llevar esto de una manera más organizada, elijo el área diferente. Así que simplemente agarro al azar diferentes titulares y textos corporales, y lo alineo. También puedo ver cuáles son similares, así que los combino en una talla, y ahora puedo crear una jerarquía. Una vez que tengo la jerarquía, y veo qué estilos necesito, les doy algunos nombres, les traigo un orden, y puedo desde aquí, tomarlo y transformar esto en la escala de tipos que necesito Puedes acercarte de la manera que mejor te funcione. 8. 07 Sistemas de escala diferentes: Diferentes formas de escalar. Puedes elegir un tamaño para tu escala de tipografía completamente al azar si quieres, honestamente, eso funcionaría bien Pero en tu diseño, suele ser mejor tener algo de sistema y consistencia. Te mostraré dos enfoques populares, una escala fija usando el sistema de escalado de ocho puntos y una escala modular usando una relación. Me gusta mantener las cosas simples en mi diseño usando un múltiplo de cuatro u ocho para todos mis tamaños, incluida la tipografía Normalmente me apago a múltiplos de ocho, como 16, 24 y 32 para mis tamaños de fuente. No soy demasiado estricto al respecto, así que si necesito mezclarlo para lucir y sentir que busco, solo hago un salto más grande, pero sigo manteniendo la consistencia. Esto también hace que sea bastante fácil establecer la línea I en un múltiplo de cuatro, lo que crea un bonito ritmo vertical en el diseño. No tiene que ser cuatro y ocho, pero notarás que esos números funcionan como un encanto. Otro enfoque es escalar con una relación. Esto mantiene muy bien la relación proporcional. Aún comienzas con tu tamaño base, y luego te multiplicas hacia arriba usando tu proporción elegida creciendo exponencialmente Se puede jugar con diferentes proporciones para ajustar el crecimiento. Los ratios populares se hacen a tercero, perfecto, quinto y gol y proporción, pero hay mucho más para elegir. Hay excelentes herramientas en línea que pueden ayudarte a configurar esto, así que no necesitas resolver esto a mano. Déjame mostrarte. Hay muchas opciones diferentes, y voy a usar type scale com para mi ejemplo. En el sitio web, deja intacto el texto corporal, pero justo debajo en el menú desplegable, puedes elegir diferentes proporciones y jugar con ellas También puedes elegir una fuente diferente siempre que sea una fuente de Google, jugar con el peso y así sucesivamente. En el lado derecho, puedes ver una demo de cómo se vería la página. También puedes cambiar esto a una vista móvil. Esto es muy agradable porque te haces una buena idea si la jerarquía es lo que buscas. Puedes elegir entre RM y píxeles, y simplemente puedes seleccionar esta información y traducirla a tu diseño así como a tu código. Si vas por la versión pro, entonces también obtendrías los fragmentos de código No es que un enfoque sea mejor que el otro. Incluso podrías mezclar esto y usar lo mejor de ambos mundos. Encuentra una escala que te guste y luego ajusta los números al múltiplo más cercano de ocho. El mundo es tu ostra. Entonces lo importante es que se tiene una jerarquía clara. Recuerda, hay un sistema para ayudarte a no restringirte. 9. 08 Por qué rem y no px: ¿Qué es la RAM y por qué importa? RAM es una unidad CSS que mide tamaño de fuente relativo al elemento raíz de la página web. Por lo general, la etiqueta HTML. El tamaño de fuente raíz es básicamente el tamaño de fuente predeterminado de una página web. Esto normalmente se establece en 16 píxeles. Es como el punto de partida de todos los demás tamaños de fuente en la página. Entonces todo lo demás se calcula a partir de este tamaño. Por supuesto, podemos alterar estos tamaños para nuestro diseño, pero aunque no definamos nada, el navegador ya viene con su jerarquía incorporada Es fácil convertir entre ram y píxeles ya que un RM equivale a 16 píxeles. Entonces 1.5 RM sería de 25 píxeles y así sucesivamente. Sin embargo, los usuarios pueden ajustar el tamaño. En Chrome, por ejemplo, los usuarios pueden ir al menú de configuración, elegir apariencia y personalizar el tamaño de la fuente. Esto es crucial para las personas con dificultades de lectura. No podemos saber si usan esta preferencia o Zoom, pero es fundamental respetar estas preferencias en caso de que estén establecidas. Imagina que defines todos los tamaños de fuente en píxeles. Por simplicidad, digamos H un encabezado es de 48 píxeles, y el texto de tu párrafo, P es de 16 píxeles. Ahora, al usar píxeles como tamaño de fuente, esto actúa como un valor fijo y anulará la configuración del navegador. Es como si se desconectaran del tamaño de fuente raíz. Por ejemplo, si un usuario ajustó el tamaño de fuente raíz 16-24 en nuestro ejemplo, la fuente mostrada seguirá permaneciendo en 16 Esto crea una barrera de usabilidad porque el contenido no se adapta a las preferencias del usuario. Pero si usamos RM en su lugar, entonces esta es una historia diferente. Tomemos el titular. En mi configuración predeterminada, que la mayoría de la gente va a usar, tres RAM es tres veces 60 por lo que 48, y obtenemos el mismo resultado que con píxeles antes. Sin embargo, el usuario que cambió un RM a 24 píxeles ahora tiene el título mostrado en un tamaño mayor de 72. Lo bueno es que esto mantendrá intacta nuestra jerarquía ya que los diferentes tamaños aún se relacionan entre sí igual que antes. También puede encontrar unidades EM o unidades. La diferencia entre las unidades RAM y EM es que RM calcula el tamaño relativo al tamaño fond raíz, mientras que las unidades calculan el tamaño relativo a sus elementos principales más cercanos fond size. Por ejemplo, si el tamaño de fuente raíz es 16, un RM equivale a 16, sin importar dónde se use. Las unidades pueden componerse cuando se anidan dentro varios elementos con diferentes tamaños de fond y heredar del padre Sin embargo, EM al igual que la RAM respeta los ajustes preestablecidos del usuario, permitiendo diseños flexibles y receptivos basados en la configuración preferida del usuario Ambas unidades tienen su propia fortaleza y debilidades, dependiendo de cómo se utilicen. frente experto y los desarrolladores manejan su combinación de manera efectiva, que generalmente no es una preocupación para los diseñadores en absoluto. Si bien los diseñadores generalmente no necesitan considerar ni siquiera la RAM, algunos como yo incluido, les gusta incluirla en nuestra escala de tipos para reconocer el uso de los desarrolladores de diferentes unidades. Y es realmente bueno para evitar malentendidos, como, pero el diseñador me dio valores duros recubiertos Así que de esta manera, dejamos muy claro que usamos píxeles en el diseño de la interfaz de usuario porque así es como se configura, pero aún queremos respetar cualquier preajuste de usuario. Bien. 10. 09 Peso de fuentes y fuentes variables: Peso de la fuente. Entre otros, peso también es un elemento importante de tu fuente para crear jerarquía. Mientras que en la mayoría de los software de diseño de interfaz de usuario, encontrará una palabra para el peso. Entonces algo así como negrita normal o medio. En CSS, esto está representado por un número. 400, por ejemplo, suele ser normal o regular y 700 negrita. Puedes usar estas pesas a tu gusto. Pero más comúnmente, los titulares se muestran en algo un poco más audaz para destacar y su texto de copia alrededor de algo así como regular con a veces algunos resaltados en negrita. Lo único en lo que realmente deberías pensar es en no ir demasiado ligero en tu texto de copia para asegurarte de que se mantenga legible. Entonces es una buena idea mantenerse normal o regular para esos. Y por cierto, no todos los tipos de letra están estrictamente configurados 100-900 También podrías conseguir algo como esto. Realmente depende del tipo de letra. Y otra cosa importante es solo porque tienes todos estos pesos diferentes, no significa que tengas que usarlos todos. Déjame mostrarte por qué. Así que aquí estoy en Google Fonts, y ahora puedo elegir cualquier fuente que me guste. Solo tomemos este de aquí. Si hago clic en él, entonces puedo ver los diferentes pesos que vienen con esta fuente específica, y puedo dar click en la fuente G. Ahora vamos a echar un vistazo a lo que realmente significa eso. Echemos un vistazo al código incrustado que obtendríamos. Entonces aquí se puede ver eso actualmente. Esto incluye todos los diferentes pesos. Y lo que puedo hacer ahora es dar clic en cambiar estilos. Ahora puedo apagarlos todos, y verás por defecto, solo va a dejar el regular encendido, y ahora puedo elegir los que realmente estoy usando en mi diseño. Y claro, siempre podría agregar más si los necesitara más adelante. Ahora bien, si tienes un diseño donde quieres usar muchos pesos diferentes, y esto es como el núcleo de tu diseño, entonces también está bien y absolutamente posible. Lo que recomiendo es que, eche un vistazo, por ejemplo, a las fuentes de Google en los filtros e ir por algo llamado fuente variable. Por lo tanto, la fuente variable es un tipo de fuente que permite el ajuste del ancho de peso, y otros atributos a través de un solo archivo de fuente. Entonces al igual que con cualquier tipo de fase, esto no siempre es lo mismo para todas ellas. Por ejemplo, vamos a dar click aquí en Open Sans y podemos ver que esto tiene tres ejes. Si echamos un vistazo, entonces simplemente se ve como antes, tenemos nuestros diferentes pesos. Pero ahora hagamos clic en la fuente G, y veamos el código incrustado que estamos obteniendo. Si hacemos click en aquí, entonces puedes ver, tenemos el peso, tenemos el ancho, y tenemos aquí itálica. Entonces estos son los tres ejes que podemos cambiar. El interesado es el peso. Entonces, si hacemos clic en un valor, entonces tenemos tal como tenemos antes, hacemos clic en 300 400 o así sucesivamente, y esto se representa aquí. Pero lo que también podemos hacer es tener el eje completo. Entonces ahora puedes ver que esto es como todos los que se cuecen, y no estamos cargando todos estos estilos diferentes, y esto está justo dentro de esta fuente Y fíjate como dice 300 a 800 al hablar de nuestros ejes de peso. Eso significa que no tienes que establecer esto 300 400 y cualquier valor dado. Puedes elegir libremente en estos ejes y podrías elegir algo como 415, y realmente puedes afinarlo muy bien. Teniendo en cuenta que no todos los navegadores renderizarán esto exactamente igual. Los beneficios de esto es un tamaño de archivo reducido en comparación con tener múltiples fuentes estáticas, crear la flexibilidad y el diseño con la capacidad de afinar realmente, y tienes un rendimiento mejorado en las páginas web porque estás disminuyendo los tiempos de carga. 11. 10 Desmitificación de la altura de la línea: Entendiendo la altura de la línea. Al pasar del diseño gráfico al diseño web, te encontrarás con el concepto crucial de altura de línea Esta es una clave de propiedad CSS para determinar la altura total de una línea de texto. Se puede pensar en ello como una caja. En realidad se llama cuadro de línea que envía un texto más o menos verticalmente. La altura de línea está compuesta por el propio tamaño de fuente, así como el espacio extra que se agrega arriba y abajo. A este espacio se le llama líder. Y la mitad en la parte superior e inferior se llama, podrías haberla adivinado medio liderando Este espacio es muy importante para garantizar que el texto sea visualmente atractivo y fácil de leer, además de contribuir a una anestesia general de accesibilidad. Veamos un ejemplo para entenderlo mejor. El tamaño de fuente de mi ejemplo es de 24 píxeles, y quiero una altura de línea de 1.5. Entonces eso significa que calculamos 24 veces 1.5, y eso equivale a 36. Entonces la altura de la caja que contiene nuestro texto es 36. La altura de línea se puede expresar en valores sin unidades como un multiplicador, tal como lo usamos en el ejemplo, un valor porcentual o un valor de píxel Mientras esté en el software de tu ojo, es posible que aún estés usando valores de píxel, acostumbras a pensar en la altura de línea como un multiplicador, y no como un valor fijo El porcentaje funciona bien, pero lo más común que probablemente veas notaciones sin unidades en CSS La altura de línea que seleccionará depende en gran medida del tipo de fase, tamaño de fuente y su aplicación. Sin embargo, es probable que descubra que el punto óptimo existe dentro de un rango de 1.25 a 1.75, lo que le ofrece una amplia flexibilidad para sus diseños Si todo esto es muy nuevo para ti, entonces solo comienza con un 1.5 sólido para tus diseños. Esta es realmente una cama segura para que comiences. A medida que tu confianza se profundiza, seguramente comenzarás a encontrar alturas de línea, aumentándola para texto más pequeño para mejorar la legibilidad y reduciéndola para que los titulares logren un equilibrio perfecto Recuerda, la altura de línea ideal depende en gran medida de tu tipo de letra elegido, por lo que se trata de experimentar y encontrar lo que funciona mejor En diseños con una sola línea de texto, es posible que se sienta tentado a establecer su línea en altura dos uno No obstante, salvo en casos raros, desaconsejaría este enfoque. La navegación no es estática, por lo que un cambio de viewpoard podría mover el texto a una segunda línea Las páginas podrían traducirse y repente el texto es mucho más largo, y también el contenido cambia con el tiempo. Por lo que recomiendo siempre apegarse a la altura de línea específica que se estableció para el estilo que estás usando. La altura de línea es una decisión de diseño importante, así que asegúrate de incorporarla a tu escala de tipografía y Una pequeña nota al margen, probablemente esperes que la altura de línea uno o 100% sea la altura visual exacta de las fuentes. Algo así y medio dejando arriba y abajo. Este podría ser el caso para algunos, y son las imágenes que utilizo para mis explicaciones Sin embargo, si te sumerges en los detalles esenciales, encontrarás ligeras variaciones En pocas palabras, un diseño de fuente dentro de un marco específico, conocido como el cuadrado n, que sirve como una especie de lienzo para el diseñador de fuentes Las métricas de fuente, incluyendo aspectos como la altura de un ascendiente, es decir, las partes altas como una m, y la longitud de los decentros algo así como una G, pueden variar significativamente dentro del cuadrado, dependiendo del diseño del tipo de letra Al 100% de altura de línea, el texto puede o no tocar los bordes de la caja. La altura de línea se agrega a todo el cuadrado, no a la altura visual percibida, que puede resultar en lo parece ser un espaciado visual desigual, aunque el liderato esté técnicamente equilibrado. Esto no suele ser un problema importante, pero puede afectar la alineación del texto, especialmente en elementos de la interfaz de usuario como botones que aparecen ligeramente descentrado. Un ajuste manual suele ser la solución, y las actualizaciones de CSS como el recorte de cuadros de texto están planeadas, pero aún no implementadas, aunque es posible que ya las encuentre en algunas herramientas de interfaz de usuario. Entonces es bueno entender este detalle, pero no hay nada crucial por lo que estresarse. En la mayoría de los casos, vas a notar que solo trabajar con la línea oculta dada funciona perfectamente bien. Al usar diferentes fuentes juntas, elegir las de la misma superfamilia puede ayudar a mantener la consistencia en las métricas 12. 11 Una palabra sobre los nombres: Al mirar escalas de tipo, a menudo puede encontrarse con esta convención de nomenclatura de H uno, H dos, H tres, y así sucesivamente Ahora bien, estos nombres se derivan de etiquetas de nomenclatura HTML. Y quiero animarte a que evites este tipo de nomenclatura en tu configuración de diseño de interfaz y optes por un enfoque más semántico Déjame explicarte por qué. Cuando se construye un sitio web correctamente usando encabezado y otras etiquetas HGML es esencial Estas etiquetas actúan como el framework que organiza el contenido, independientemente de cómo se diseñen con CSS Por ejemplo, un H prominente en una sección de héroe podría tener un tamaño y estilo completamente diferentes del título principal, que también es uno H en una página de términos y condiciones. Esto no solo es importante para la optimización de motores de búsqueda, sino que las etiquetas de título correctas también son cruciales para los usuarios que confían en lectores de pantalla para comprender la estructura del contenido. Es importante separar el texto HTML de los diseños visuales como estilos. Mientras trabajan juntos, cada uno cumple su propósito distinto crear una experiencia de usuario efectiva. Y por cierto, en el diseño web, usamos texto HTML con CSS para estilizar, pero no todo funciona de esa manera. En el desarrollo de aplicaciones IOS, por ejemplo, no hay CSS ni optimización de motores de búsqueda de qué preocuparse. En cambio, usamos algo llamado tipo dinámico, que es solo el tamaño del texto basado en las preferencias de los usuarios. Los desarrolladores pueden comenzar con los ajustes preestablecidos de la documentación y personalizarlos si es necesario A diferencia del texto HTML con tipo dinámico, también podría construir su escala de tipos sobre esto, pero siempre asegúrese de discutir primero con el desarrollo. Por lo que es realmente útil entender de dónde estas diferentes convenciones de nomenclatura vienen estas diferentes convenciones de nomenclatura y para qué están hechas Si volvemos a nuestro proyecto de aplicación web, entonces un enfoque semántico probablemente será tu mejor apuesta No hay una manera correcta de hacer esto, pero siempre y cuando sea descriptivo y permita cambiar los valores, funcionará bien. Una forma común de separar la jerarquía de los textos, como usar los números 1-6 es adaptar el enfoque de talla de camiseta Entonces estamos usando S, M L, y así sucesivamente, que también se pueden expandir. Algunas personas prefieren un enfoque más descriptivo como pequeño, regular o enorme. Tengo que admitir que este enfoque también viene con sus propios desafíos ya que no hay espacio entre esos tamaños. Por lo que es difícil retocar las cosas más adelante. Podrías sentirte tentado usando titulares diez, 20, 30, como hacemos con los colores, lo que nos permite en entremedias como una talla Pero esto se puede confundir fácilmente con píxeles en este caso, así que personalmente no recomendaría usar esto. Para agregar más estructura, puede crear niveles usando términos como cuerpo, títulos, titulares y titulares de visualización. Entonces esto es realmente bueno si tienes un sistema realmente grande. También puede tener varias opciones , como diferentes pesos para una fuente. Nuevamente, es importante mantenerse descriptivo para que los valores puedan cambiarse fácilmente. En lugar de llamarlo regular negrita o 700 o 500, opta por algo como enfatizado o fuerte Nombrar es difícil y nombrar es importante. Por lo que generalmente recomiendo discutir el naming lo antes posible con el desarrollo para evitar malentendidos y usar posibilidades de alineación 13. !!! POR FAVOR MIRE!!! Nueva interfaz de usuario de Figma en beta: Heads Figma ha actualizado su interfaz de usuario, y es posible que veas un nuevo diseño en lugar del antiguo Esta actualización es actualmente beta cerrada, por lo que aún no todos tienen acceso. Actualizaré las artes y reflejaré la nueva interfaz una vez que esté disponible para todos. Los cambios son en su mayoría visuales. Todas las características y herramientas siguen ahí, solo en lugares ligeramente diferentes o con una nueva L. Por ejemplo, la barra de herramientas superior se ha movido hacia abajo. El panel lateral izquierdo, en cambio, se ha mantenido en su mayoría sin cambios. Ahora puedes cambiar el nombre de tu archivo aquí. Aún puedes ver todas tus páginas, capas y recursos. En el lado derecho, notarás algunos cambios cuando hagas clic en un diseño, pero todas las funciones aún están disponibles. Si eres un principiante y encuentras confusa la nueva interfaz, puedes hacer clic en el signo de interrogación en la parte inferior derecha y volver temporalmente a la interfaz de usuario anterior. Esto no influye en tu diseño. De esta manera podrás seguir junto con los videos del curso usando la interfaz de usuario antigua mucho más fácil hasta que estés listo para hacer la transición a la nueva. La FIMA está implementando gradualmente esta actualización. Si aún no tienes acceso, también puedes solicitarlo a FIMA, pero no hay garantía, algunos de ustedes tal vez solo tengan que ser un poco pacientes Es posible que el administrador de tu equipo también tenga que habilitar la actualización por ti, así que asegúrate de verificar esto también. Figma actualiza frecuentemente el software, así que espera cambios y prepárate para adaptarte Las características pueden moverse como este botón de biblioteca aquí ha estado en todos los lugares posibles en los últimos años. Pero no te preocupes, nunca se perderá nada y te acostumbrarás a usar FIMA de una manera mucho más flexible Tiene un enfoque realmente genial en la usabilidad. Entonces no se trata de aprender algo de memoria, sino de entender el software como un todo. 14. 12 Tipografía en Figma: Vamos a entender cómo manejar el texto en Figma. Echemos un vistazo rápido al menú de texto Figma. Si selecciona algún texto yacía en Figma, luego en el lado derecho en el panel de propiedades, puede ver la configuración del texto Aquí podemos elegir una fase tipo. Podemos elegir el peso. Podemos alterar el tamaño. Y también podemos elegir una altura de línea. Esto generalmente se establece en píxeles. Puedes usar esta caja para calcular. Entonces, si quiero 1.5, calcularía 16 veces 1.5. Pero lo que me gusta hacer es establecer esto realmente en porcentaje. Y de esta manera, si tuviera que cambiar el tamaño, entonces mantendría la misma altura de línea. Pequeño consejo, Figma también admite fuentes variables. Ahora bien, la fuente que estoy usando, que es Poppins no es una fuente variable Entonces, si uso este desplegable de aquí para el peso, entonces solo obtengo los presets No obstante, si tuviera que cambiarlo a una fuente variable, digamos open sans. Y uso el mismo desplegable. Entonces, por ejemplo, para mis pesos, puedo encontrar aquí un eje de fuente variable, y ahora puedo establecer el peso usando los ejes. También se puede modificar el espaciado entre letras y el espaciado entre párrafos. Esta sería la distancia entre nuestros párrafos si tenemos textos como este. Aquí puedes establecer cómo quieres que tu texto esté sentado en la caja. Recomendaría ir siempre por altura auto. Eso significa que tu cuadro de texto va a respetar automáticamente tu altura o tu altura de línea, y por lo tanto, va a crear un cuadro a su alrededor. Puedes alinear el texto, y también puedes elegir qué dirección quieres que crezca el texto. Por ejemplo, si lo configuro en línea a arriba, y ahora tengo más texto agregado, entonces agregaría al texto así. Cualquier otra cosa que estés buscando, simplemente haz clic en los tres puntitos. Aquí encontrarás ajustes adicionales como decoración de texto, estuche, recorte vertical, estilos de lista, espaciado de párrafo. Ya tenemos eso en el menú principal aquí. Si quieres tener los puntitos cuando se corta el texto, entonces lo encuentras aquí mismo. En este caso, notarás que tu caja salta de nuevo a un tamaño fijo. Ahora, una vez que configuramos este titular y el texto a nuestro gusto, queremos guardarlo como algo llamado estilo para reutilizarlo en nuestro diseño. Entonces echemos un vistazo a cómo funciona eso. Entonces, aquí hay un ejemplo muy simplificado de una escala de tipos. Puedes ver, quiero configurar una fuente de visualización, título, cuerpo, pie de foto y un botón. Y quiero usar esto en mi diseño en general, así como en un componente. Entonces mi instancia aquí debería heredar este estilo. Así que configurar un estilo es bastante sencillo. Simplemente seleccione el texto. Y luego en el panel de propiedades de tu lado derecho, ves el ícono de estilos. Haga clic en él, haga clic en más, y ahora puedo nombrarlo. Voy a llamar a esta pantalla uno. Y voy a hacer lo mismo por todos los demás. Voy a acelerar un poco este proceso para ti. Y por supuesto, tu escala de tipos podría verse completamente diferente. Esto es realmente solo un ejemplo simplificado. Si quiero ver una visión general de mis estilos, puedo dar click en el área de Canvas gris, y luego en el lado derecho, puedo verlos todos. Aquí también podría alterarlos. Entonces, si quería cambiar algo sobre el nombre o alguno de los atributos, lo puedo hacer aquí. Ahora queremos aplicar nuestros estilos a nuestro diseño. Importante si estás trabajando con componentes, aplica siempre el estilo al componente, no a la instancia. Como puedes ver aquí, aplico el estilo de caption a caption, y luego aquí selecciono mi título, desde el menú desplegable, ahora puedo elegir el estilo que creé para el título. Si hacemos clic en la instancia, entonces puedes ver que esto se heredó automáticamente. Para texto suelto como este, podemos aplicarlo directamente en nuestro diseño. Y por ejemplo, digamos que este tenía otro tamaño, así que digamos que esto era mucho más pequeño. Entonces en cuanto aplicamos nuestro estilo, esto obviamente tomaría el tamaño correcto y corregiría toda la altura de línea y todo lo que se guarda dentro del estilo. Si quieres cambiar o desvincular un estilo, simplemente pasa el cursor sobre el estilo y verás un pequeño símbolo desapegado Si haces clic en eso, está separado y puedes elegir cualquier otro estilo. Puedes usar estilos así como este. Esto en realidad sería suficiente. Pero desde abril de 2024, también podemos agregar variables si queremos. Entonces todavía tenemos nuestros estilos, pero dentro de nuestros estilos, estos pequeños bloques de construcción, podrían ser variables o no. Entonces tenemos algo así como un tipo de letra, peso, tamaño, altura de línea, espaciado, y así sucesivamente Y podemos dejarlos así y trabajar con ellos. Está absolutamente bien. Pero tan pronto como comiences a moverte a un sistema más escalable, es posible que quieras agregar variables. 15. 13 Variables de Figma para tipografía: En Figma, también podemos establecer variables, y funcionan bastante similares a las variables CSS Primero entendamos qué es una variable CSS. Entonces aquí tenemos un ejemplo en CSS, y se puede ver que el color del enlace se define como una variable. Entonces tenemos una clase llamada enlace primario, donde agregamos más información como el tamaño de fuente, la familia de formularios, etc. Y puedes ver que aquí estamos reutilizando nuestra variable CSS como parte de esa clase También podríamos configurar todo el estilo con bloques de construcción o variables si quisiéramos. El beneficio es que si quiero cambiar algo, digamos el tamaño predeterminado del texto, entonces solo necesitaría cambiar esto en la variable, y en cualquier lugar de todo mi diseño donde use esta variable, esto se actualizaría automáticamente. Echemos un vistazo a Figma. Entonces en mi configuración aquí, tengo una escala de tipos muy simplificada, y se puede ver que todo esto ya está convertido en estilos. Si hacemos clic en el fondo de las cámaras, puede ver una descripción general de los estilos, y esos estilos se utilizan en nuestros componentes, así como cualquier texto suelto dentro de nuestro diseño. Ahora, eso simplemente funciona muy bien por sí solo, así que puedes usarlo absolutamente así. Pero tan pronto como quieras escalar esto un poco más y trabajar dentro de un sistema de diseño, entonces es posible que quieras agregar variables. Entonces seguí adelante y creé una colección, haga clic en su área de cámaras, y luego vaya a variables locales. Y aquí tengo varias colecciones, y una de ellas se llama marca Typography Puede nombrarlo como sea. Insider ya creó algunas variables. Se puede ver que creé variables de tamaño de texto. Esta es una variable de tamaño, y tengo 16, 24, 32 y 40, y creé algunas variables para mi peso. Aquí estoy usando una cadena. Tengo una cuerda y luego simplemente escribo la palabra del peso que quiero aquí. Mi caso regular o negrita. También voy a añadir una familia de fuentes. Doy clic en el botón más y vuelvo a seleccionar una cadena para una familia de fuentes. Voy a llamarlo familia de fuentes, y estoy usando Poppins, simplemente voy a escribir Ahora bien, si quiero estas pequeñas categorías agradables, recuerden, simplemente podemos agrupar, hacer clic derecho y luego nuevo grupo con selección, y voy a llamar a esta familia de fuentes. Entonces si hago clic en todas las variables, puedes ver que puedo ver todas las siete variables actualmente tengo en la colección, y puedo, por supuesto, agregarles algunas todas o si necesito eliminar alguna. Déjame mover la familia de fuentes aquí arriba. Puedes organizar esto a tu gusto. Si pasa el cursor sobre cualquier variable, puede hacer clic en editar variable, y ahora puede agregar más información y también establecer el alcance Eso quiere decir que sólo va a aparecer en este campo específico. Ahora, estoy grabando esto justo después de la liberación de variables para orzuelos de texto. no tenemos alcance para esto, pero debería ser lanzado y deberías encontrarlo alrededor de este menú Hay uno llamado contenido de texto. Eso es otra cosa. Eso significaría que tomaría el valor real. Reemplaza tu texto por 16. Eso no es lo que queremos. Entonces, seamos pacientes y esperemos la actualización del alcance. Un pequeño consejo, mantenga presionada la tecla Mayús y Comando, y podrá ver varias variables a la vez. Bien, genial. Entonces, cómo vamos a meter estas variables en nuestro estilo. Lo que tenemos que hacer es que tenemos que volver a nuestro estilo, y luego continuar editando. Y luego aquí, puedes elegir cualquier variable. Entonces, por ejemplo, si elijo mi fase de tipo, ahora puedo continuar aquí, y puedo ver mi familia de fuentes llamada Poppins Y ahora esto se convierte en una variable. Y puedo hacer exactamente lo mismo por todos los demás. Entonces por ejemplo, aquí, voy a aplicar variable, y ahora voy a encontrar mi tipografía, y luego echemos un vistazo por Esta queremos ser audaces, así que voy a elegir esta, y vamos a hacer lo mismo con nuestra talla. Escojamos el tamaño correcto para éste. Ahora bien, en altura, actualmente dejo duro codificado como 150% aquí porque me gusta tener esto en porcentajes o algo así como 1.5, que es lo que veríamos en CSS Pero Figma actualmente no soporta esto en variables. Solo admite valores de píxel ya que estoy grabando esto justo cuando salió. Entonces seguro, si estás viendo este video un poco más tarde, también puedes agregar altura de línea y echar un vistazo si porcentuales o unitarios menos valores porcentuales o unitarios menos como 1.5 ya están funcionando. Se pueden utilizar píxeles. Yo solo personalmente no soy un gran fan de ello. Pero en general, puedes configurar variables para todos los diferentes campos tan pronto como veas el signo de la variable. Ahora, podrías agregar esto a tus estilos existentes. Pero, ¿y si solo estás creando estilos? Esto funcionaría igual. Saquemos algo de texto y lo separemos, y ahora aún no es un estilo. Para que veas ya puedo trabajar con mis variables en cualquier texto, así puedo configurar todo esto y luego guardarlo como estilo más adelante. Así que eres realmente flexible en tu flujo de trabajo. Y claro, si voy a hacer clic en las variables locales y cambiaría algo de cualquiera de estas variables, entonces esto se reflejaría en todo mi diseño. Entonces en este ejemplo, esto parece realmente menor porque es un ejemplo muy simplificado. Pero en un sistema más grande, esto va a ser de gran ayuda. Solo imagina que estás cambiando la familia de fuentes, tendrías que pasar por todos tus textiles y diseños. Así, solo tienes que cambiarlo aquí arriba, y luego se va a reflejar en todos tus diferentes estilos. Además, si estás cambiando una talla, digamos que tienes un tamaño base de 16, y necesitas aumentarlo. Entonces vas a haber usado este tamaño de fuente S a través de diferentes textiles, tal vez una versión ligera, una versión más audaz, y así sucesivamente Esto va a ser muy útil tan pronto como empezaste a trabajar en un sistema más grande. 16. El espacio en blanco es tu superpoder: Espacio en blanco, tu superpotencia secreta. Ahora, es posible que hayas configurado tu peso de báscula tipo y altura de línea perfectamente, pero aún le falta algo. Y ese algo suele ser espacio en blanco. Al agregar espacio en blanco, le das a tu diseño espacio para respirar y ser percibido adecuadamente. No hay reglas fijas sobre cómo editar o dónde. Pero veremos algunos principios generales que puedes usar. Entonces me gusta usar mi sistema de escalado de ocho puntos para mantener las cosas consistentes. Entonces todo es un múltiplo de ocho. Por ejemplo, entre mi titular y mi texto de copia, tengo 16. Y luego para distancias más pequeñas, uso ocho, e incluso puedo bajar a cuatro. Voy a usar eso en elementos más pequeños como un botón. Y nuevamente, este sistema está ahí para ayudarme a no restringirme. Entonces claro, puedo tener un contorno de un píxel o similar. Realmente es una pauta general para crear un ritmo. También puede marcar la diferencia entre microespaciado y microespaciado Entonces, entre el espaciado dentro de tus componentes, por ejemplo, y el espaciado alrededor de ellos. Nuevamente, este espacio en blanco más grande como entre secciones, utilizo un múltiplo de ocho. Cuanto más diseñes, más vas a tener la sensación de dónde necesitas agregar algo de espacio en blanco. Así que el espacio en blanco definitivamente no es espacio perdido. Te está ayudando con tu diseño. Es realmente un arma secreta. También recuerda, cuanto más cerca están las cosas juntas, más se perciben como una sola. Así que realmente, realmente usa espacios en blanco en tu diseño. Hace toda la diferencia. Buena idea es también siempre echar un vistazo como lo hacen los demás. Entonces, aquí hay un ejemplo del sistema de diseño de la UBA, y puedes ver que usan incrementos de cuatro, y luego tienen algunos bloques de espaciado general, y los usan en todo, como desde configurar cuadrículas hasta tamaños de iconos, y también cualquier distancia dentro En los sistemas de diseño, verá que espaciado generalmente se configura como tokens. Aquí hay un ejemplo del sistema de diseño de cables, y puedes ver que tienen su ficha general. Talla cuatro ocho y así sucesivamente, que corresponde nuevamente a un múltiplo de cuatro y ocho. Entonces podemos ver aquí abajo que lo que hacen es que luego alimentan esos tokens en una configuración más semántica Entonces entran en mucho más detalle. Entonces, por ejemplo, entre fichas, y usan estos tamaños de base, pero luego los definen mucho más claros. 17. 15 Longitud de línea óptima: En longitud. En pantallas más grandes, no quieres que el texto fluya por todo el ancho porque simplemente va a ser demasiado largo y bastante difícil de leer. Se dice que la longitud ideal de la línea es de 50-70 caracteres. Observe que aquí hablamos personajes y no de tamaño físico. Entonces eso puede ser bastante diferente para diferentes tipos de caras. Nunca deberías tener más de 90 caracteres por línea porque entonces realmente se vuelve bastante imposible de leer. Ahora, no necesitas ir a contar personajes, pero puedes ver si vas vagamente con esa regla, ya va a ser mucho más agradable y mucho más fácil de leer Además, también asegúrate de dejar que tu tipografía fluya de la manera en que fue diseñada y destinada a ser No uses una llamada justifique. Lo que justifica es que obliga tu tipografía a encajar dentro de una caja Ahora, a veces eso podría quedar genial si estás diseñando con él. Pero recuerda, tu diseño no es el resultado final. El navegador no es estático. Y una vez que la pantalla se esté moviendo y redimensionando, vas a obtener brechas bastante feas. Así que no hagas eso. Va a ser muy difícil de leer. Siempre deje que la tipografía haga lo que fue diseñada para hacer y fluya 18. 16 Color y contraste en la tipografía: Tipografía color y contraste. El contraste es un aspecto clave abordado por las pautas de accesibilidad al contenido web o WCAG cortos Están proporcionando reglas claras sobre los niveles de contraste requeridos. Y es importante señalar que esto no es simplemente una recomendación. Es una obligación legal. El WCAG mide el contraste en términos de diferencia de brillo, y eso va desde la luz, entonces uno a uno, que será blanco sobre blanco y 21 a uno, que será blanco y negro, indicando así un alto Y esto opera en un sistema de clasificación. Por lo que un cumplimiento de doble es el mínimo contraste que necesitas. Para la tipografía, esta relación se establece en 4.5 a uno para fuentes más grandes y tres a uno para las más pequeñas con grandes siendo bastante losamente definido, comenzando desde alrededor de 18 píxeles o fondos más pequeños que son negrita dependiendo del tipo fase Como esto no está claro, siempre trataría de ir por al menos un 4.5 a uno para todos los fonds utilizados Idealmente, incluso estarías yendo por una triple A. Entonces, por lo tanto, estarás apuntando a un siete a uno para fondos estándar y para fuentes más grandes, 4.5 a una. Entonces veamos un ejemplo. Aquí, tengo un fondo gris claro, y uso una tipografía roja El resultado para la relación de contraste en este caso es de dos a uno, que cae por debajo del umbral recomendado de 4.5 a uno. Por otro lado, si estoy usando esta tipografía gris oscuro sobre el mismo fondo, estoy obteniendo una relación de contraste de 12 a uno Entonces eso significa que incluso estoy cumpliendo con los estándares de la triple A. También es importante considerar el peso y el tamaño de la fuente, ya que fuentes más pequeñas y ligeras requieren un mayor contraste en comparación con las fuentes más grandes y audaces Para asegurarte de que estás obteniendo el contraste correcto, te aconsejo que siempre uses un verificador de contraste. Puede buscar un complemento de verificador de contraste en su software de interfaz de usuario o puede usar una herramienta en línea como objetivo web. Entonces, estas comprobadoras de contraste funcionan prácticamente igual ya sea usando un enchufe o una herramienta externa Básicamente, lo que haces es tomar tu color de primer plano y tu color de fondo o al revés, y luego solo lo agregas y te van a dar una proporción Ahora bien, esta es la proporción que vas a anotar y comparar con la proporción necesaria. Generalmente, las damas de contraste ya te muestran si pasa o falla Por ejemplo, si ahora altero mi color, puedo ver cómo empieza a pasar. Este podría ser el texto o el color de fondo. Generalmente recomiendo tener una visión general de todos tus colores y mantener los colores del texto separados de los colores generales de la marca, aunque podrías usar los mismos valores. De esta manera, puedes verificar color de tu texto con cualquier otro color y establecer reglas claras sobre qué colores se pueden y no se pueden combinar. Además del texto estándar, también asegúrese de considerar los colores del sistema como alertas y confirmaciones Y también es una buena idea definir un color de interacción claro. Este sería tu color de resaltado para botones, enlaces, así que cualquier cosa en la que se pueda hacer clic 19. 17 Tipografía responsiva con puntos de interrupción: Creación de tipografía responsiva con puntos de interrupción. Entonces, ¿qué son los puntos de interrupción? Son puntos específicos o más bien se producen umbrales o cambios De esta manera, los sitios web pueden ajustar su diseño y estilos para adaptarse a diferentes tamaños de pantalla. Para crear puntos de interrupción en CSS, usamos algo llamado media query La regla de consulta de medios es una forma de aplicar ciertos estilos a la página web solo si se cumplen condiciones específicas. En este caso, la condición es un ancho mínimo de 768 píxeles. Cualquier cosa dentro de los corchetes solo se aplicará cuando la ventana gráfica tenga un tamaño de 768 o más Echemos un vistazo a esto en CSS. Entonces puedes ver aquí tengo un titular y algo de texto copiado así como dos imágenes. En nuestro HTML, este es uno H, el titular, el texto de copia es P, y luego aquí tenemos nuestras imágenes con la etiqueta de imagen. Ahora en el CSS, puedes ver que configuro el texto para que tenga el tamaño de un RM, luego un poco más grande para el titular, y configuro las imágenes para ocupen todo el espacio disponible. Entonces estos son mis estilos base. Ahora como me desplazo hacia abajo, se puede ver que agregué consulta inmediata. Como acerté 400, vamos a hacer esto más grande aquí abajo. Se puede ver el tamaño, así se puede ver como golpeo 400, entonces esto cambia en la disposición. Lo que sucede aquí es que todo dentro de los paréntesis se active. Tengo un nuevo color de fondo, el H es más grande y las imágenes cambian la ocupación del espacio. Si voy aún más grande, se puede ver la segunda media query golpeando. Así se puede ver aquí abajo. Nuevamente, agregué un color de fondo, así que esto se vuelve visible, y también cambio el H para que sea aún más grande. Por lo que los puntos de interrupción suelen ser la técnica de ir a la hora de ajustar la tipografía a diferentes En teoría, podríamos establecer puntos de interrupción para cada texto individualmente Sin embargo, en la mayoría de los casos, es probable que tengas un conjunto predefinido de puntos de interrupción para tu escala de tipografía Esto significa que cuando el viewpoart alcanza un cierto tamaño, el diseño del texto se ajusta Estos puntos de interrupción podrían ser proporcionados por un framework como bootstrap, o puede elegirlos más libremente, particularmente al adoptar un enfoque de diseño CSS moderno Es posible que ya estén en su lugar para otras áreas de su diseño, como cambiar el diseño general. Así que muchas veces, tiene sentido usar los mismos puntos de interrupción Asegúrese de consultar la documentación o guía de estilo para valores numéricos específicos si está comenzando en un nuevo equipo. Y si estás a cargo de configurar desde cero, entonces asegúrate de hablar primero con tu equipo de desarrollo para saber qué necesitan y recomiendan. Entonces, una vez que conocemos nuestros puntos de interrupción individuales, el siguiente paso es expandir nuestra escala para cubrir todos los tamaños. Existen diferentes enfoques para manejar esto. Exploremos el primer enfoque, que sería hacer ajustes individuales. Normalmente, comenzamos configurando nuestra escala de tipos desde el tamaño más pequeño. Cuando alcanzamos un punto de interrupción, podemos verificar si es necesario algún cambio A menudo, un texto corporal con un tamaño de 16 funciona bien en todos los tamaños, pero los titulares principales pueden necesitar un ajuste. Por supuesto, también puedes ajustar toda tu escala a cada punto de ruptura hasta ti Nuestra segunda opción es expandirnos usando nuestro sistema modular, así escalando con ratios. Podemos mantener nuestros valores de ram consistentes, pero solo ajustamos lo que un ram equivaldría en cada punto de interrupción Por ejemplo, en nuestra pequeña pantalla, un ram podría ser igual a 16 píxeles, luego 18 píxeles para nuestro medio y 20 píxeles para nuestra pantalla grande. Y luego solo mantenemos nuestro sistema general porque estamos multiplicando el tamaño base con una proporción elegida Así que todos los demás tamaños se ajustan automáticamente. Así que mientras 1.5 ram suele ser 24 pixeles en mi pantalla media, 1.5 ram se convierte en 27, ya que ahora es 18 veces 1.5. Y para grandes, calculamos 20 veces 1.5, por lo que son 30 pixeles. Es importante configurarlo sin píxeles fijos en el código para garantizar la compatibilidad con los ajustes preestablecidos del usuario No te preocupes. Hay varias formas de lograr esto. Nada demasiado complicado. Pero vale la pena mencionar esto, como en el diseño, estaremos tratando con un nuevo conjunto de valores de píxeles independientes entre sí. Mientras esté en código, esto permanecerá como unidades relativas. Establecer puntos de interrupción para la tipografía suele ser una buena solución dentro de un estructurado Es fácil de escalar, organización de anuncios y es muy fácil comunicarse entre equipos. 20. 18 Tipografía fluida con pinza CSS(): Topografía fluida con CLAMP. Para entender la topografía de fluidos en CLAMP, primero necesitamos aprender sobre las unidades de ventana gráfica Hay algunos de ellos, pero el que nos interesa es el ancho de la ventana gráfica escrito como VW I Magister ancho de la ventana gráfica, por lo que un VW es 1% del ancho de la ventana gráfica Veamos un ejemplo. Digamos que nuestra ventana gráfica tiene un ancho de 1,000 píxeles, y nuestro tamaño de texto está establecido en dos anchos de ventana gráfica Entonces esto es 2% de 1,000, de ahí 20 píxeles. Ahora, a medida que cambia el ancho de una ventana gráfica, digamos que cambiamos el tamaño del navegador a 500 píxeles de ancho, entonces nuestro ancho de dos viewport ahora daría como resultado un tamaño de texto de Entonces de esta manera, podemos crear tipografía fluida. No obstante, tenemos el problema de que en algún momento, el texto será demasiado pequeño para leerlo o demasiado grande para nuestro diseño. Aquí es donde CSS CLM viene muy bien. No es la única manera de lidiar con esto, pero me gusta bastante ya que está usando CSS nativo. Con CLAMP, podemos establecer un valor mínimo y un valor máximo para nuestro texto, así como una tasa de crecimiento entre esos dos umbrales Entonces en mi ejemplo, el texto es al menos 1.5 RM, que es lo mismo que 32 píxeles, y no mayor que tres RM, que serán 48 píxeles. Entre ellas se escala con una tasa de escalado del 5% del ancho actual de la ventana gráfica De esta manera, nuestro texto se adapta dinámicamente a diferentes tamaños de viewpoart Observe cómo esto es independiente de los puntos de interrupción. Simplemente entraría en acción tan pronto como el 5% del ancho de la ventana gráfica sea mayor que un tamaño mínimo Ahora, clamp puede parecer la solución a todas tus esperanzas y sueños, y es fantástico. Sin embargo, es realmente un área donde diseñadores y desarrolladores necesitan sentarse juntos y trabajar en el navegador para obtener esos detalles correctamente. No va a suceder en tu archivo de diseño. También viene con algunas consideraciones de accesibilidad, así como implemento de retrocesos técnicos Entonces, en términos generales, si estás trabajando en un proyecto creativo único con mucha personalización y atención al detalle, esto podría tener mucho sentido. Sin embargo, si estás trabajando en un sistema de diseño, puede ser un poco exagerado y es posible que quieras ceñirte solo a los puntos de ruptura estándar Y por cierto, todavía podrías usar clamp, digamos, para una sección de héroe llamativa dentro de un sistema más rígido Además del ancho de la ventana gráfica, también quiero señalar un nuevo desarrollo, las consultas de contenedores Sin profundizar demasiado en las consultas de contenedor, vale la pena señalar que si bien las media queries se centran en la ventana gráfica, las consultas de contenedor nos permiten apuntar al tamaño del contenedor padre y adaptarnos También las consultas de contenedor tienen sus propias unidades similares a las unidades de ventana gráfica, pero en su lugar están vinculadas al contenedor principal Así que todavía podemos usar clamp, pero en lugar de usar el ancho de la ventana gráfica para escalar, ahora usamos el ancho de consulta del contenedor Esto significa que nuestro tamaño tecnológico ajusta de acuerdo con el espacio disponible, lo cual es bastante emocionante. Si no hay contenedor, simplemente vuelve a caer al ancho de la ventana gráfica, por cierto Sin embargo, implementar esto necesita un desarrollador front-end experto con atención al detalle, además de seguro, algo más de tiempo y presupuesto adicionales. Entonces no es para ir a por sistemas de diseño escalables fáciles. Pero sigue siendo valioso que los diseñadores lo sepan, y puede llegar a ser bastante relevante en el futuro. 21. Tipografía responsiva en Figma con estilos: Tratar con la tipografía responsiva en Figma. Actualmente hay dos formas de hacerlo. Podemos configurar un estilo para cada punto de interrupción, o podemos automatizar esto mediante el uso de variables de estilos y modos Para seguir adelante, por favor visite figma.com Farsh Moon Learning, y aquí puede encontrar las dos escalas de tipos diferentes con las diferentes configuraciones que les voy a mostrar Primero veamos el enfoque tradicional de configurar estilos individuales por punto de interrupción Entonces, lo que hago es que primero configuré todos mis estilos para mi defecto. Entonces aquí pueden ver que tengo mis nombres de diferentes estilos, y luego creé algún texto, y convertí este texto en un estilo. Entonces, si echamos un vistazo a la configuración general de nuestros estilos, puedes ver que tengo una carpeta para cada estilo, así titular X L, y luego puedes ver dentro tengo un estilo para base. Entonces este sería éste de aquí. Entonces uno para M, este sería este de aquí, y L. También podrías crear esto al revés y tener una carpeta por tamaño de pantalla y luego dentro de los diferentes estilos. Eso depende de ti. Entonces, si echamos un vistazo, también tenemos tres estilos para L. Así que puedes ver este es nuestro titular L. Y luego en el titular M, mantenemos el mismo tamaño de default a talla M y luego solo cambiamos en L. Así que puedes ver solo creé aquel donde ocurre el cambio. De lo contrario, usaríamos nuestra base. Entonces esta es también la razón por la que llamo a esta base y no talla S o algo así. Solo puedes crear el estilo cuando lo necesites, o simplemente puedes configurar estilos predeterminados aquí también. Entonces digamos que en nuestro cuerpo por defecto, también podríamos crear el tamaño base M y L, e incluso si son los mismos, solo tenerlos establecidos en el mismo. A veces eso tiene sentido porque a medida que estás construyendo, si luego decides cambiar el tamaño de tu texto, entonces todo ya está configurado. Así que realmente vale la pena una sal. Y básicamente funcionaría igual para nuestra configuración con la relación. Y aquí se puede ver que realmente necesito un estilo para cada punto de interrupción Entonces, si echamos un vistazo a esta configuración, entonces son las mismas carpetas, y puedes ver que realmente para cada estilo, necesito tres estilos en Figma para cada punto de interrupción No hace falta que resuelvas todo esto por ti mismo. Sólo tienes que ir a typescie.com y luego cambiar de RM a píxeles Y en este caso, cambiarías el tamaño del cuerpo. Esto te daría los valores para 18, y luego en mi ejemplo para 20, y luego puedes simplemente copiar los valores de píxel aquí. Entonces si quieres usarlos, solo tienes una pantalla por punto de interrupción, y puedes ver que lo que hice aquí es diferente a usar valores min y max, así puedes ver que esto los bloqueará el tamaño al valor min y max Necesita un marco de diseño automático para que esto funcione. Y luego aplico el estilo al punto de interrupción correcto. Entonces aquí pueden ver, tengo mi base titular aplicada. Entonces mi X L, pero el estilo base, y luego aquí tengo el mismo el X L, pero el tamaño M, y luego en la última pantalla, la L. También estamos usando la X L pero desvío para la pantalla Entonces podrías tener más puntos de quiebre y luego se vuelve bastante abarrotado Así que normalmente tengo este tipo de configuración en algún lugar escondido en una página diferente, como una página de patio de recreo, donde puedo probar diferentes tamaños, y luego simplemente muestro mi móvil y el tamaño de mi escritorio para la configuración general del diseño Una cosa que quiero señalar con este enfoque, lo que es bastante complicado es que si tienes componentes, con los que ojalá tengas configurado todo tu diseño, entonces probablemente necesites configurar un componente por punto de interrupción Entonces puedes ver aquí que aquí tengo mi base, y luego aquí tengo mi talla M y luego aquí mi talla L. Ahora, también podríamos sobrescribir esto para que pudieras ir dentro del componente y sobrescribir Pero esto se vuelve realmente desordenado y es una fuente potencial de error Esto es realmente un inconveniente para esta configuración. 22. 20 Automatización de la tipografía Figma con variables y modos: Agregar variables y modos a los estilos para automatizar el cambio de tamaño del texto en diferentes tamaños de pantalla. Entonces quiero mostrarte otra manera de lidiar con esto, y esto es automatizar el tamaño con estilos, variables y modos Entonces comenzamos con la misma configuración básica. Configuramos nuestros tamaños predeterminados y creamos estilos para ellos. Entonces aquí puedes ver que esto se configura también como nuestro titular X L. Así que puedes ver aquí que tengo los mismos estilos, pero solo tengo uno estilos. Así que tampoco creé ninguna subcarpeta. Y si tienes un vistazo, entonces estos son todos del mismo estilo, pero tienen diferentes tamaños. Entonces, cómo funciona esto es si abrimos nuestras variables locales, tengo una colección de tipografía, y primero veamos por defecto Estos son todos los valores por defecto. Se puede ver 16, 16, 16, y así sucesivamente. Entonces nuestros titulares son más grandes. También puedo agregar mi familia de fuentes, también puedo agregar peso, espaciado. Por ahora solo mantengo esto enfocado en el tamaño del texto. Entonces creé dos modos más, uno para talla M y otro para talla L. Puedes crear modos haciendo clic en el botón más, pero necesitas tener un plan pro o arriba de figma para hacerlo Y luego cambio los valores aquí. Esto es de nuevo, configurado en píxeles, y puedo configurar nuevos valores para mi modo M, y mi modo tamaño L. Ahora bien, lo que hice en mi resumen es que estos son todos pequeños fotogramas, y luego encuentras por aquí en cuanto tienes un elemento que tiene un modo que Figma te da el pequeño interruptor de modo y puedes ver que cambié este de aquí a, y ahora estoy obteniendo los tamaños para, y por aquí, estoy obteniendo los tamaños por L. Y automáticamente intercambia este tamaño de texto como dado en los modos. Si vuelvo al valor predeterminado, se puede ver que estoy recibiendo de nuevo las tallas pequeñas. Y así en mi diseño, solo configuré mi base, y entonces puedes ver aquí que todo sigue usando el mismo estilo. Pero cambié el modo del marco padre, así se puede ver aquí desde el tamaño M. Si vuelvo a default y todo iría al tamaño más pequeño. Y de esta manera, también solo necesito un componente porque esto es solo usar el estilo general. Pero como este componente está configurado en auto, todo lo que pongas en el marco padre necesita mantener su configuración automática y, por lo tanto, heredaría el estilo establecido por el marco padre Aquí puedes ver que aunque esto tenga un tamaño, si vamos a modo sordo, podemos ver el tamaño del texto aquí lo tenemos es a los 30, y si retrocedemos y comparamos esto, entonces podemos ver que 30 es el tamaño para titular en nuestra pantalla L. Así que esta es realmente una gran manera de lidiar con esto. Sin embargo, debes estar consciente de que necesitas que todos estén en un plan pro o superior para lidiar con esto. También necesita algunos buenos conocimientos de figma, y también es un poco más complicado una vez que su sistema de diseño está creciendo, por lo que necesita tirar de diferentes bibliotecas y alterar muchas cosas diferentes 23. 21 ejemplos de la vida real: Hay muchas formas y enfoques diferentes que podría usar para configurar y documentar cómo lidiar con elementos como componentes de espaciado y tipografía Siempre es una buena idea buscar inspiración a su alrededor. No obstante, ten en cuenta que realmente depende del tipo de proyecto al que estés apuntando, de tu equipo y de tu presupuesto. Entonces, realmente se trata de obtener ideas y elegir lo que es correcto para tu proyecto específico. Dos de mis sistemas de diseño favoritos para inspirarme es el sistema de diseño Uber llamado base. Esto realmente ofrece una guía integral de su filosofía e implementación. Así que realmente puedes dar click y ver cómo hacen las cosas. Otro que me gusta mucho es el diseño de puntos. No es tan detallado como el sistema de diseño de la UBA. Es más una idea amplia de cómo manejan su diseño, pero todavía tiene muy buenos ejemplos que ver. No obstante, generalmente recomiendo dos lugares donde puedes encontrar mucha inspiración. El primero es el escaparate de altura cero. En caso de que no conozcas la altura cero, es una gran plataforma de software que facilita el proceso de documentación entre los equipos de diseño y desarrollo. Aquí podrás encontrar una buena visión general de las diferentes empresas que construyen un sistema de diseño abierto con altura cero, y simplemente puedes hacer click a través ellas y obtener ideas y comparar. Otro lugar que me gusta mucho es el libro de cuentos. Es más enfoque de desarrollador, pero también encuentras una sección de escaparate aquí, así que también puedes revisar estos ejemplos, y también podría ser una buena idea repasarlos con tu equipo de desarrollo para ver diferentes ideas. Al igual que con la altura cero, puedes navegar por ellos y también puedes encontrar las diferentes áreas como espaciado tipográfico, componentes y así sucesivamente Pero puedes entenderlos desde un punto de vista más centrado en el desarrollador. Bien. 24. Gracias: Bien hecho por terminar este curso. Siéntete libre de llegar a nosotros en moon learning dot io, siempre estamos interesados en escuchar tus comentarios. También harías como un gran favor si tan solo pudieras tomarte un minuto y dejar una reseña aquí mismo. Si disfrutaste de este curso y además asegúrate de echar un vistazo a nuestros cursos adicionales. En Moody Learning dot. Cubrimos todos los temas desde los fundamentos mismos del diseño UX UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestro sitio web en Moody Learning dot IO, donde también puedes suscribirte a nuestro boletín de noticias.