Crear una escala de tipo (campo de inicio de diseño de UI, semana 5)

1. Introducción: En este video, en este corto curso, estaremos construyendo un sistema tipográfico. Primero hablaremos y aprenderemos por qué la parte más importante de nuestra rejilla de diseño es la rejilla vertical, sobre todo con diseño sensible. Y por lo tanto nuestra topografía va a dictar todo. Utilizaremos este conocimiento para construir una escala tipográfica donde sólo nos preocupamos por el tamaño de los diferentes encabezados y los espacios, los paddings y márgenes alrededor de esos diversos encabezamientos y párrafos. Vamos a ver algunas de las otras cosas que construyen jerarquía visual en un sistema tipográfico. Y veremos algunas de las características avanzadas que podemos utilizar para hacer que nuestro sistema tipográfico sea un poco más interesante. Entonces, por último, pondremos todo esto junto con nuestro proyecto esta semana para crear un sistema tipográfico simple como el que se puede ver actualmente en pantalla. Tu sistema tipográfico es tu primer bloque de construcción para construir un sistema de diseño completo. Vamos a arreglar esto. 2. Grid vertical: Son muchas las razones diferentes las que lo primero absoluto que vamos a hacer al diseñar una aplicación es elegir la topografía corporal. La elección de la tipografía para los textos corporales va a influir en la altura de línea para el texto del cuerpo. Y la altura de línea para el texto del cuerpo va a influir en el ritmo vertical de toda la página, todo el diseño de todo el sitio o aplicación. Si miramos un par de líneas de texto corporal en mi página de Facebook, podemos ver exactamente la misma cuadrícula de línea base se utiliza en otro lugar para elementos de interfaz de usuario o todo tipo de diferentes partes del diseño de esta página, incluyendo iconos, fondos, pero también diferentes tamaños de tipografía. Ahora esto nos da un aspecto más unificado, que por supuesto es bueno para el diseño, teniendo una bonita cuadrícula de línea de base uniformada por la página. Pero también va a ayudar con la legibilidad. Como usuario lee diferentes áreas de texto de diferentes tamaños. Cuando hacen esos movimientos oculares saccádicos hacia atrás, tienen un entendimiento inconscientemente de dónde está la rejilla basal. Es por estas razones que personalmente creo que lo primero absoluto que debes hacer al diseñar una aplicación es elegir el tipo de letra del cuerpo. El rastro de la tipografía dictará el tamaño de la tipografía del cuerpo. El tamaño de la tipografía del cuerpo dictará la longitud de la línea. Y todas esas cosas combinadas dictarán la altura de la línea, lo que dicta el ritmo vertical para todo el diseño de la página. Si Facebook de repente decidiera re-marca y usara Garamond, tendrían que rediseñar todo en la página, cada margen, cada pieza de relleno, porque la altura de la línea lo haría necesidad de cambiar para el texto. El término grid basal puede ser un poco engañoso. Probablemente deberíamos llamarlo realmente una rejilla vertical. Acabo de tomar este botón bastante similar al que acabamos de ver en Facebook. Y acabo de mostrarte con una línea que viene justo en la ver más en la cuadrícula justo debajo de la parte inferior de las letras. Realistamente la grilla en Facebook y no sé, no he trabajado en Facebook. Probablemente se ve algo parecido a esto. En realidad estamos ver más no se sienta del todo en la cuadrícula de línea de base. Y si divido eso en trozos más pequeños, esta es una cuadrícula de cuatro píxeles. Esta es una cuadrícula de 16 píxeles. Creo que probablemente se ve un poco más así. El texto se sienta en medio de esto. Esencialmente las alturas de línea de Seymour son de 16 píxeles, en lugar de estar sentado con las letras que descansan en la parte inferior de la cuadrícula. Ahora las varias razones por las que realmente usuario grid similar a esta. Y el primero es tan pronto como traduzcas esto al japonés, ya no va a sentarse en el fondo de la rejilla. Y por supuesto cambiaríamos el tamaño ligeramente para los japoneses de todos modos, pero no se sentará en esa línea de base cómodamente. Se va a sentar en el medio. El alto de línea se basa en la cuadrícula, no en la línea base del texto. Un error increíblemente común que he visto a diseñadores con un fondo impreso que han empezado a hacer diseño web es decirnos cuál es este margen. El margen desde la línea de base de un texto hasta la parte superior del encabezamiento del siguiente texto. Ahora como sabemos, no es así como medimos la altura del texto, sino cuando llegamos a escribir CSS, eso es absolutamente imposible implementar lo que nuestros desarrolladores necesitan. O si somos desarrolladores front-end, lo que necesitamos es conocer este margen. Este es el margen desde la parte inferior del cuadro de contorno. Si selecciono este texto de encabezado, se puede ver el cuadro de contorno. Y si hago doble clic aquí y selecciono el texto, se puede ver dónde termina la altura de línea hasta la parte superior de este texto. Y si hago clic aquí y selecciono algún texto, se puede ver dónde está la altura de línea de esto. Ahora en CSS, podemos implementar esto si conocemos este tamaño aquí, podemos implementarlo. Esto, no podemos porque a medida que cambia este texto, medida que cambian estos márgenes, medida que cambia nuestra cuadrícula vertical y a medida que este impuesto cambia, este espacio también va a cambiar. Por lo que un problema muy común en los nuevos diseñadores o diseñadores que han tenido un fondo de impresión, es pensar que el espacio desde la cuadrícula de línea base es de cualquier utilidad para nosotros. Lo que siempre nos interesa es el espacio real de la caja fronteriza, y por lo tanto nos interesa más la altura de la línea. He traído de vuelta a nuestros dos favoritos, Garamond y Verdana. Y como ya he hablado anteriormente, estoy usando estos dos como ejemplos porque son tipos de letra tan salvajemente diferentes, tienen alturas x muy diferentes. Ahora ya sabemos que para que EB Garamond sea legible, lo deseamos idealmente con un tamaño de tipo de 17.5 píxeles de referencia de alto. Y por eso, he hecho la line-height cerca 1.25 veces la tipografía, parte porque esta es una longitud de línea bastante larga. Dice 75. Carácter por línea, longitud de línea. Y como se puede ver en este momento, 75 caracteres por línea no son realmente tan largos. Ahora lo que tenemos con esta altura de línea de 24 píxeles, tenemos una bonita altura de línea conveniente para hacer una rejilla vertical. Acabo de crear una cuadrícula de píxeles completa. Y podemos ver que todas las alturas de línea encajan muy bien en eso porque todas son alturas de línea de 24. He creado un encabezado que encaja en eso también. Y un botón con un relleno y márgenes y cosas que todos encajan cómodamente en eso. De hecho, si superpongo este espacio entre ellos, podemos ver que los huecos entre cada bloque de texto también encaja bastante bien en esa cuadrícula de cuatro píxeles. Entonces eso está todo bien y bueno para Garamond. ¿ Qué tal para DAWNA? Ahora sabemos que la verdana tiene una altura x más grande, por lo que podemos hacer la tipografía un poco más pequeña, pero idealmente queremos una altura de línea ligeramente más alta. Veamos cómo se ve el Vedanta. Creo que se ve bastante bonito aquí. Ya sabrás por los videos anteriores que para Donna, idealmente queremos un 12.5 pixel de referencia alturas de textos. Y si ponemos eso derecho al máximo, derecho al 150 por ciento de altura de línea, eso nos da 18.5 píxeles de referencia. Ahora no podemos desafiar eso en una bonita, cómoda rejilla vertical tan fácilmente. Lo he dividido en una rejilla vertical de tres puntos siete. Y por favor no olvides que puedes tener una fracción de un píxel de referencia. Algunos desarrolladores, diseñadores, e incluso software no te permitirán usar fracciones de un píxel de referencia. Las fracciones de un píxel de referencia han sido completamente aceptables desde la primera versión de CSS. Y no hay razón práctica para que sea un problema cuando se toma en consideración que un píxel de referencia es muy raramente divisible por los píxeles reales en la pantalla. De todos modos. En cambio, he dado para Donna una cuadrícula de referencia de 3.7 píxeles de referencia en lugar de cuatro. Y así es como he elegido la altura de línea del texto del encabezado, que es 48.1 píxeles de referencia, line-height y el botón y el espaciado. Ahora claro, eso está todo bien y bueno en un mundo perfecto, pero muy raramente estás trabajando en un mundo perfecto. Normalmente tienes que sacar tus diseños bastante rapidez y necesitas traducirlos a otros idiomas con bastante rapidez. Qué van a hacer muchos diseñadores, y lo que probablemente terminará haciendo. Y lo que en su mayoría voy a hacer por el resto de este curso. Vamos a redondear un poco los números. Por ejemplo, sabemos que las alturas perfectas para nuestro texto Vedanta son de 12.5 píxeles. Pero tal vez acabamos de redondear eso hasta 13 y acabamos de hacer la altura de línea un poco más grande para que se ajuste más bien en una cuadrícula de píxeles de referencia completa. Y eso nos va a hacer mucho más fácil el uso software de diseño para comunicarnos con otros diseñadores y comunica qué desarrolladores. Y vamos a sacar nuestros diseños más rápidos, no vamos a hacer mejores diseños. Pero en el mundo real, normalmente hay que hacer los ligeros compromisos. Y de igual manera, muchos diseñadores, cuando lo traduzcan al japonés, por ejemplo, ignorarán el hecho de que se quiere hacer alrededor del 110% al 115% de tamaño del texto, porque van a necesitar alterar bastante esa cuadrícula de línea base, que potencialmente está castigando a los usuarios japoneses. Pero si tomamos esto por Donna, por ejemplo, en realidad no estamos haciendo que sea más difícil para nuestros lectores japoneses el uso. Estamos haciendo que sea más difícil para nuestros lectores de inglés el uso porque ya estamos redondeando el tamaño del texto. Pero no son solo traducciones de las que tenemos que preocuparnos. También es capacidad de respuesta. Ahora si miro esta bonita página de Garamond práctica, tengo con una rejilla vertical de cuatro píxeles. Tan pronto como convierta esto en móvil, vamos a reducir la altura de línea porque la longitud de la línea no es tan larga. Y entonces eso va a cambiar por completo mi rejilla vertical. Figma ni siquiera me deja tener una fracción en el tamaño de mi rejilla vertical. He tenido que crear mis propias rejillas con cajas. Y se puede ver aquí que el textil todavía bastante bien encaja en mi propia rejilla a medida dibujada con cajas. Y todos los márgenes también encajan muy bien en esa rejilla. Pero como vimos, sutilmente cambiado de la vista de escritorio a la vista móvil, vamos a necesitar cambiar estos márgenes un poco. Cambia este botón un poquito para asegurarnos de que no perdamos el ritmo vertical bajando por la página. Debido a eso, nunca podemos confiar realmente en nuestra cuadrícula vertical sido un número redondo agradable, cómodo como cuatro píxeles. Nuevamente, en esta situación, manera realista probablemente vas a tomar un pequeño sacrificio para tus usuarios móviles o tal vez optimizado para móviles y llevarás un pequeño sacrificio para tus usuarios móviles o tal vez optimizado para móviles y llevarás un pequeño sacrificio a tus usuarios de escritorio. Normalmente en interés de algo tan importante como realmente cumplir con el plazo. En el diseño web, la idea de una rejilla basal es imposible. Contamos con una rejilla vertical. La línea basada en texto nunca se establece en la cuadrícula. Eso sería imposible escribir el CSS para y resolver las traducciones. La cuadrícula de base ideal para una aplicación web es la altura de línea de los textos del cuerpo. Ahora la altura de línea de los textos corporales en realidad puede cambiar. Por ejemplo, cuando miramos la aplicación en su teléfono móvil o si cambiamos el texto a japonés fueron posibles queremos existan algunas reglas CSS que puedan actualizar esto. Vamos a ver esto mucho más en la etapa de implementación por ahora sin embargo. Una vez conocemos nuestra tipografía y conocemos la longitud de la línea, y conocemos la altura de la línea. Ahora tenemos una buena idea de cuál va a ser nuestra rejilla de base. Podemos empezar a elaborar una escala de tipo y eventualmente trabajar todo el diseño para nuestra aplicación. Fuera de esa altura de línea. 3. Jerarquía visual: Por supuesto, cuando estamos trabajando nuestro sistema tipográfico, queremos construir una jerarquía visual en eso. Sabemos que la jerarquía visual es de vital importancia porque el usuario necesita saber qué leer primero, qué leer segundo, y qué leer. Tercero, conocemos el contenido en la página web. Todavía no lo hacen. Depende de nosotros decirles la importancia de cada pieza de tipografía. Ahora, todos conocen la vieja regla de que texto más importante es más grande y el texto menos importante es más pequeño. Pero hay muchas otras cosas que podemos hacer para crear una jerarquía visual en nuestro sistema tipográfico. Tengo este sitio web aquí arriba, piensa global health.org. En realidad nunca he visto este sitio web antes, pero voy a usar esto para detectar algunos ejemplos de jerarquía visual en la topografía. Lo primero es que los grandes textos de encabezado en la parte superior, es grande, pero en realidad no es mucho más grande que los textos corporales. Hay un salto bastante arriba, pero no es mucho más grande. Es boulder. Pero lo que es más importante, está justificado centralmente. Es lo único. Esto y el menú a continuación es lo único que se justifica centralmente. Todo lo demás queda alineado, todos los demás textos al instante se sale. Parece que es más importante porque está en el centro de la página y por supuesto en la parte superior de la página. Y como que me pregunto si hicimos este texto aún menos audaz son un poco más pequeños, pero todavía se ve bastante importante. Ahora, otra cosa que le da a algo mucha jerarquía visual es tener mucho espacio en blanco a su alrededor. A menudo no necesariamente necesitamos hacer que el texto sea más grande, solo necesitamos hacer más grande el espacio que ocupa. Este pensar cuadro de salud global en la parte superior, tiene un margen bastante grande alrededor de ella. Y si se incluye el bloqueo con el menú, es porcentaje significativo de la página es tomado por este texto de encabezado. Sin Think Global Health sido que mucho más grande que una talla no encaja todos claramente tiene mucha más importancia debido a la cantidad de espacios en blanco que existe a su alrededor. Ahora noto que cada noticia de esta página tiene un poco de pobreza superpuesta, gobernanza, este tipo de cosas para decir en qué categoría se encuentra. Y esto había salido de cierta manera porque está en todas las gorras y está en un color diferente. Entonces hay otras dos cosas ahí que ayudan a darle jerarquía, que ayudan a diferenciarla y decir que es algo diferente. Lo único que hay en la página en este color naranja, que es obviamente uno de los colores resaltados de marca, es el botón de suscripción y estos botones de categoría. Ahora otra cosa que han utilizado para identificar la jerarquía es la tipografía. Cuando llegamos a los encabezados para artículos individuales, están en esta tipografía serif, mientras que los encabezados principales todos parecían estar en esta tipografía sans serif. Podemos detectar instantáneamente que estos significan cosas diferentes. Al desplazarse hacia abajo por la página, verás que hay divisores con un borde superior escritos en un texto en negrita. Estos obviamente dividen la página hacia arriba y son un nivel diferente de rumbo. Este divisor es también, en cierto modo un mecanismo de jerarquía visual tipográfica. Y si me desplace un poco más hacia abajo, verás que hay textos de apoyo de vez en cuando escritos en cursiva, lo que de nuevo nos dice que significa algo diferente al otro texto de la página. Es un nivel diferente en la jerarquía. Claramente son algunas etiquetas Meta o alguna descripción de lo que se trata esta serie. Ahora un par de otras cosas que no han utilizado en este sitio, aunque creo que han utilizado mayoría de las técnicas de jerarquía visual que puedo pensar con tipografía es tener un color de fondo aunque sé que es aquí donde dice suscribirse y usar escritura menor y bastante grande. Como obviamente quieres que veamos que esto tiene un fondo negro con texto en blanco. Así que al instante se destaca y se ve bastante diferente al otro texto de la página. Podríamos por supuesto tener un bloque coloreado detrás algunos textos o algo así para crear una jerarquía visual sin colorear el texto en sí, pero al darle un fondo, en términos generales, los textos con un mayor contraste entre el fondo y el color de primer plano se consideran más importantes. Y no pude evitar notar que este color del texto aquí es un gris ligeramente más claro que los encabezados. Y en realidad justo en la parte superior, Piense que la salud global parece ser un negro ligeramente más oscuro cuando estos subencabezamientos también. Por último, otra herramienta de jerarquía visual es el seguimiento. En realidad este texto naranja que dice pobreza. Los encabezados de categoría parecen tener cierta cantidad de espacio alrededor de las letras, por supuesto, porque están escritos en todas las tapas, por lo que han aumentado el seguimiento. Pero cada vez más el espaciado de letras o el seguimiento puede volver a hacer que un bloque de texto parezca más importante hasta la jerarquía visual. Acabamos de mirar este sitio web de pensar en salud global porque tenía muchos ejemplos de jerarquía visual en la tipografía. En términos generales, los sitios web de noticias lo hacen porque tienen mucho texto en ellos. Pero algunas de las técnicas que podríamos querer pensar en nuestro color, fondo, color, espaciado, o rastrear los márgenes, la cantidad de espacios en blanco alrededor del texto. Usando todas las mayúsculas, la justificación, podríamos sangrar ligeramente el texto usando cursiva o pequeñas mayúsculas o diferentes estilos de texto. Podríamos tener una textura sobre el texto si se trataba de un encabezamiento textos específicamente. ver si hay algo más que no haya pensado que se pueda pensar literalmente en los cielos, los límites, pero estos son los que en su mayoría parecíamos usar en sistemas tipográficos. 4. Escala de tipo: Una vez que tengamos todas las dimensiones para nuestro texto corporal, podemos averiguar el tamaño para los textos de encabezado y los textos de los subtítulos, etc. Al llegar a una escala de tipo, queremos el encabezado, uno, textos de encabezado, lo que era ser del mismo tamaño. Quieres que todos nuestros subtítulos sean del mismo tamaño. Pero también queremos que se sientan como parte de la misma composición, si se quiere, como el texto corporal, queremos que encajen en una escala. Ahora a veces la gente podría realmente usar una de las escalas musicales porque sabemos que estas naturalmente se sienten bien con nosotros. Tiendo a usar la relación dorada o la secuencia de Fibonacci principalmente porque uso esa proporción en otro lugar de mi diseño. Y posiblemente le da algún tipo de campo uniforme a todo usando la misma relación para la escala de tipo. No estoy 100% seguro. He establecido la altura del texto de mi cuerpo para que tenga 16 píxeles de referencia de alto. Y puedes ver que entonces se decide que si estás usando la escala de los tercios principales y tu texto corporal es de 16 píxeles de referencia, entonces estás encabezando textos deben ser 48.83. Píxeles de referencia. Como píxeles de referencia no son exactamente lo mismo que los píxeles. Puedes tener un punto o una fracción de un píxel. Entonces está perfectamente bien que uses algo así. Y estos números van a ser ligeramente diferentes. Vas a tener que usar un poco tu ojo y ver cómo funciona con otras partes de tu diseño y encaja en tu ritmo vertical de tu diseño, todo ese tipo de cosas. Pero creo que este es un lugar de partida realmente agradable para encontrar lo que potencialmente podría ser un buen tamaño de encabezado para este texto corporal. Ahora como acabo de decir, tiendo a usar la proporción dorada. Y la otra ventaja de eso es que esta calculadora, G R T calculator.com, me parece ser un poco más agradable de todos modos. Ahora he puesto en EB Garamond, que es un Google Fonts, una versión gratuita de Garamond disponible en Google Fonts. Y podemos ver que en realidad la relación de aspecto de EB Garamond es un poco más grande que la de Garamond. La versión de Google tiene una altura x ligeramente mayor que la tipografía estándar normal de Garamond. Y si divido siete píxeles de referencia por nada, 0.4, Siete píxeles de referencia han sido aproximadamente nueve minutos de arco. Voy a conseguir 17.517.5 es bastante un buen tamaño de fuente para hacer Garamond, para que sea más legible para la mayoría de la gente, he establecido el ancho del contenido a 700 píxeles de referencia por ahora. Y en realidad se puede ver si miras aquí abajo, la escala, se sugiere la escala de proporción dorada. En realidad lo ha redondeado mis 17.5 píxeles de referencia. No le gustan las fracciones de un pixel en esta app, pero se puede ver que me ha dado los tamaños de fuente para las diferentes alturas así como la altura de la línea. Ahora si cambio el ancho del contenido aquí, se puede ver que en realidad actualiza la altura de la línea como hablamos antes. Si tenemos textos más largos, sí queremos una altura de línea ligeramente más alta también. Lo que me gusta esta calculadora es en realidad si bajo, puedo ver algunos ejemplos de todos los diferentes tamaños de texto y cómo podría verse nuestra lista y todo este tipo de cosas usando esto tipografía con esta escala de tipo. Si cambio esto a Verdana porque ya hemos hablado un poco para Dinah. Ahora sabemos que para Diana en realidad puede ser bastante más pequeño que Garamond. Voy a fijar esto en 12.5, que es la mejor altura de lectura para Verdana según nuestros cálculos anteriores. Y verás que en realidad la altura de línea que se da, es un poco más grande y en realidad le da una altura de línea ligeramente mayor, incluso si lo hacemos del mismo tamaño Garamond porque es calculó que sí tiene una altura x ligeramente mayor y así necesita un poco más de espacio a su alrededor. Esta calculadora podría ser un buen lugar para venir y conseguir algunos números básicos antes de empezar a tratar de averiguar nuestra escala de tipo. Nunca queremos simplemente tomar estos números y pegarlos en nuestro diseño y esperamos que se vea bien. Vamos a tener que ajustarlos ligeramente porque todo esto se basa más o menos en algunos números básicos alrededor de estos tipos de letra. Podemos ver mucho más con nuestros ojos de lo que estas calculadoras pueden ver con esos números. Solo queremos sacar estos números ahí y posiblemente usarlos como punto de partida antes de afinar cómo van a verse realmente estas escalas de tipo. Una vez que sepamos cuál es nuestra tipografía corporal, podemos usar esto para que sepamos qué tamaño es nuestro texto corporal, y luego sabemos qué altura de línea van a tener nuestros textos corporales. Y podemos usar eso para identificar dos cosas. Cuál es la cuadrícula de referencia que vamos a utilizar para toda la aplicación. ¿ Y cuál es la escala de tipo? ¿ Qué tan grandes van a ser nuestros encabezamientos y subtítulos? 5. Crea una escala de tipo: En el último video, aprendimos a usar una calculadora de escala tipo en línea para obtener algunas alturas básicas para nuestros encabezados de uno a seis y nuestro texto de párrafo, y también tener una idea sobre el altura de línea inicial. Ahora, lo que he hecho aquí en mi pantalla en este momento es que he puesto algo de texto en Figma. Y si usas un software de diseño diferente, eso está absolutamente bien. Sólo voy a demostrar en Figma porque eso es lo que uso. Y tengo seis piezas de textos para diferentes tamaños de encabezado y uno para el tamaño del párrafo. Ahora, he hecho dos cosas a cada una de estas. Una vez que he decidido el tamaño del texto, también he decidido una altura de línea. Se puede ver si acerco, tengo una cuadrícula vertical de cuatro píxeles encendida. puede ver que la altura de línea encaja perfectamente en esa cuadrícula de cuatro píxeles porque tengo una altura de línea de 64. Pero también he ido y escondido una caja gris, que es lo que sería el margen. Ahora si no estás familiarizado con el modelo de caja CSS, tendrías tu line-height y tu relleno, etc, dentro de la caja, eso estaría dentro de esta área, entonces tendrías algunos márgenes fuera de la caja. Ahora no voy a meterme demasiado en los detalles de lo que se trata el modelo de caja CSS. Pero todo lo que necesitas saber en este momento es que esta zona gris es el espacio adicional que vamos a sumar alrededor del encabezado. Y eso tiene que estar también en rojo. Por lo que la altura de toda la zona para las etiquetas de encabezado es un 132, que también encaja bastante bien en nuestra cuadrícula de cuatro píxeles. Ahora, lo que he hecho es que me he ido en caja NAT oculta para que en realidad no lo puedas ver. Pero se puede ver que cada rubro no tiene espacio entre ellos. Y eso es porque para cada uno de los encabezados, he añadido estas casillas de margen para que podamos ver cómo encajarían entre sí. Eso se debe a que para cada uno de estos encabezamientos, he agregado esta caja de margen gris y la oculté. Podemos alinearlos fácilmente y ver cómo encajarían con sus márgenes. Ahora, lo que he hecho es que he ido y hecho eso por los seis de estos elementos de rumbo. Y una vez para el párrafo, el párrafo, como se puede ver, tiene apenas un margen de cuatro píxeles en la parte superior e inferior. Tal vez eso está bien. Tal vez no lo sea. Vamos a averiguarlo ahora. Y ahora los he creado como componentes de Figma, pero si estás usando software de diferentes diseños, siéntete libre de hacerlo como quieras. Lo que ahora puedo hacer es que tengo una página de ejemplo y voy a arrastrar mi componente de encabezado hacia fuera, encajar eso en mis cuadrículas, luego arrastrar un párrafo y hacer que se alinee para que podamos ver que tocan cada uno otro. Si alejo el zoom, debería poder empezar a hacerme una idea de hacer que se vean bien, si tengo un encabezado número uno y luego algunos textos de párrafo, ¿eso se ve bien? Ahora lo que quiero hacer en esta página es asegurarme de haber probado todas las combinaciones para que veamos cómo se ven ahora, en lugar de intentar crear toda nuestra aplicación y luego darse cuenta de que algo no funciona. A lo mejor tengo un rumbo a la rúbrica tres. ¿ Qué pasa cuando tengo rumbo tres seguido de rumbo a? Ahora, ya estoy empezando a pensar que tal vez el espacio en la parte superior del rubro tres, el margen no es lo suficientemente alto y el margen en la parte inferior quizás sea un poco demasiado pequeño. Entonces lo que puedo hacer es volver aquí y en mi componente, puedo mover el margen. Y luego se va a actualizar sobre todos estos y puedo restablecer mi página. Ahora creo que probablemente todavía haya necesidades un poco de ajuste, pero una vez que lo tengo luciendo razonablemente bueno, quiero probar esto con algunos mejores textos que solo encabezar uno, encabezando dos, a la mayor brevedad posible cuando estamos creando un sistema de diseño o una escala de tipografía, queremos estar poniendo contenido real ahí porque queremos ver cómo se ve con real contenido que en realidad podría encajar en el diseño. Encabezado. Uno es un rumbo muy corto. Probablemente nunca vamos a tener eso. Ahora sólo voy a pasar a la página web de Noticias de la BBC y agarrar algún texto. Así que ahora tengo un nuevo trozo de texto en el encabezamiento uno, y en realidad podemos tener una idea mucho mejor de cómo funciona la line-height porque va pasando a una segunda línea y podemos ver cómo el margen alrededor de ella trabajando. Ahora idealmente queremos actualizar nuestro rubro dos y nuestro encabezamiento tres textos también. que podamos empezar a ver cómo se ve esto con texto real en ella. Ahora de inmediato, voy a decir que tal vez este rumbo uno está un poquito demasiado lejos de este texto de aquí abajo. Por lo que tal vez reducimos el margen entre el encabezamiento uno y los textos del párrafo en cuatro píxeles. Y en algún momento vamos a querer decir tal vez , bueno, ya sabes qué, realmente no hay suficiente definición entre. El rubro tres y rumbo al texto. Creo que necesito hacer el encabezado tres textos un poco más grande o el encabezado de texto completo un poco más pequeño. Bueno, solo podemos hacer eso en nuestro componente y ver cómo se ve a lo largo de nuestra página de muestra. Y no importa si no encaja en ese tipo calculadora de escala con la que empezamos originalmente porque nuestro ojo es mucho más importante que las matemáticas si se ve bien en la página y podemos ver fácilmente la jerarquía visual y la diferencia entre los encabezados. Eso es lo importante. Entonces usamos esa escala del último video como punto de partida, pero la vamos a ajustar ahora y encontrar algo que funcione mejor para nosotros y para esta tipografía. Cuando estás haciendo este ejercicio, cuando estás haciendo esto con tu escala de tipo, una cosa muy importante a recordar siempre es que hay una cuadrícula de cuatro píxeles que he creado. Y es posible que elija una cuadrícula de seis píxeles o puede elegir una cuadrícula de 3.5 píxeles. Estoy usando cuatro píxeles o estoy usando un número completo de píxeles porque es más rápida configurar la cuadrícula en Figma, voy a usar la cuadrícula vertical de píxel de referencia A6. Y recuerda si en algún momento se ve mejor si algo no encaja en esa rejilla, entonces no lo quedes en la rejilla. Nosotros usando la rejilla vertical como directriz es ayudar a que se vea más agradable sin demasiado esfuerzo tan pronto como pensamos que se ve mejor ignorar la rejilla o romper la rejilla, entonces debemos absolutamente hacer que cuando estoy afinando bien. Si decido que este rubro tres debe tener margen de tres píxeles en la parte superior en lugar de un margen de píxel completo, entonces eso es absolutamente lo que debemos hacer. El grid vertical, el ritmo vertical de la página está todo ahí para ayudarnos. No está ahí para dicta completamente cómo trabajamos. Así que toma uno de los tipos de letra con los que estás trabajando y abre cualquier software de diseño que uses. Comience con una de esas calculadoras Type Scale. Si te parece un punto de partida útil y crea tus textos de encabezado de uno a seis y tus textos de párrafo como una caja invisible alrededor que se utilizará como margen, luego probarlos en órdenes diferentes. ¿ Cómo se ve si tienes un rubro tres con un encabezado para debajo de él y luego cinco párrafos de texto. ¿ Cómo va a verse? ¿ Se ve demasiado condensada? ¿ Se ve demasiado extendido? Es obvio que el encabezamiento se relaciona con el texto a continuación no están por encima de él. Posiblemente algo que este rubro tres esté fallando en momento y posiblemente necesite un margen ligeramente mayor en la parte superior. Y luego una técnica que suele usar los diseñadores de tipo es entrecerrar los ojos ligeramente o guardarlo y ponerlo en Photoshop o algo así puedes usar un desenfoque. Ahora cuando ponemos el desenfoque en los textos del cuerpo, queríamos tener un bonito color gris claro consistente para que no nos parezca demasiado pesado. Pero otro buen punto es ayudar a nuestra jerarquía. Idealmente queremos que la densidad o la oscuridad del encabezamiento principal parezca más oscura que el texto del párrafo. Si entrecerran los ojos, obtienes una consistencia ligeramente diferente para el texto del encabezado y los textos del párrafo que al menos deberían decirte que hay suficiente diferenciación. Recuerda, la gente no se está enfocando en toda la página a la vez. Sólo se están enfocando donde el centro muerto absoluto de su ojo está mirando ese momento, se llama la fóvea. Todo lo demás en la página les parece borroso y necesitan poder identificar dónde están los encabezados de inmediato. Si la página es borrosa o son diferentes consistencias en el gris para los diferentes encabezados. Quiero que sigas adelante y elijas una tipografía aleatoria o una con la que has estado trabajando y trata y solo crea esta escala de tipo muy simple. Pon algún texto real ahí y prueba tantos diseños como puedas con el encabezado a la rúbrica tres, cuatro en conjunto para asegurarte de que se vea bien. Ahora, antes de empezar a crear el resto de su sistema de tipo, su sistema de diseño, y luego diseñar la aplicación. 6. Crea una escala 2: En el último par de videos, creamos una escala tipográfica, que podemos empezar a utilizar para nuestro sistema de tipo y nuestro sistema de diseño. Hasta ahora, hemos establecido jerarquía visual con solo usar el tamaño de fuente. Ahora en la pantalla aquí, he ido y hecho el mismo ejercicio. He creado encabezados uno a seis y algunas etiquetas de párrafo. He intentado crear una jerarquía visual donde no cambio el tamaño de tipo, alto. He hecho que los textos del párrafo sean un poco grandes porque sé que lo estoy usando a lo largo. Por lo que tiene 18 píxeles de referencia de alto. Pero he hecho el tamaño de tipo cuatro, todos los textos 18 píxeles de referencia. Y he tratado de crear una jerarquía visual. Sólo algunas ideas de otras cosas que podemos hacer para crear algún tipo de jerarquía visual con nuestros textos. El primero de probablemente lo más importante es lo grande que es ese margen alrededor del texto se encabeza uno, no necesariamente necesita ser mucho más grande, pero si tiene un gran espacio a su alrededor, al instante parece más importante y encaja más arriba en nuestra jerarquía, a menudo en una escala de tipos, en un sistema de tipos, rumbo seis ni siquiera será más grande que el texto del párrafo. Hay un montón de sistemas de tipo que estamos encabezando seis es en realidad más pequeño que el texto del párrafo, pero tal vez está en negrita están en todas las tapas, o tiene algo al respecto que lo hace destacar. A veces eso podría ser simplemente que tenga más espacio a su alrededor. Ahora, creo que este rubro seis todavía parece un rumbo. Algunas otras cosas a considerar. Al encabezar uno aquí tengo un **** de mucho rastreo. Hay mucho espacio entre las letras. Considerando que para cuando bajé a la partida seis, en realidad estoy aplastando la lechuga bastante cerca. Obviamente hay color en los dos primeros encabezamientos y luego algún otro indicador visual en los próximos dos encabezamientos y los encabezados finales que tengo cursiva solo para darles algo que llama la atención ellos y los hace parecer un poco más como un rumbo. He usado un poco los blancos. Este es muy pesado en la parte superior, y para cuando lleguemos al fondo, es un texto bastante delgado. Podríamos sangrar potencialmente uno. Esto podría sangrarse ligeramente o incluso sangrar negativamente. Por lo que entra en el margen y eso va a hacer que se destaque instantáneamente y que sea más importante los fines obvios. Y en realidad simplemente no caber en la rejilla ya sea vertical u horizontal, va a darle importancia. Por lo que es posible que pudiéramos crear una jerarquía visual para algunos textos simplemente haciéndolo no funcionar en esa cuadrícula vertical que hemos creado. Ahora, quiero que también te vayas con esto. ver si puedes encontrar dos formas diferentes identificar encabezamientos a lo que he intentado, nunca vas a hacer esto en la vida real. Esto es puramente para la práctica, pero vamos a ver si podemos crear una jerarquía visual, una escala de tipo sin tocar el tamaño de la fuente. Y luego al igual que en el último video, voy a crear una nueva vista de escritorio. Voy a ver cómo se ven estos elementos si los pongo uno encima del otro, ¿cómo se ve si tengo encabezado uno y luego texto de párrafo? ¿ Cómo se ve si tengo el rubro dos, seguido por el rubro tres, seguido de más texto de párrafo. Ahora en realidad no he probado eso. Muy bien ahora, pero de inmediato puedo ver que esto está demasiado aplastado aquí. Quisiera añadir un pequeño margen en la parte superior de ese rubro dos, por ejemplo. Y posiblemente que esta línea roja va todo el camino a través podría ser un poco demasiado divisor para tener en medio de un artículo. Similar a en el último video. En algún momento vamos a querer editar este texto para que sea algo un poco más realista. Simplemente mira si puedes crear una escala de tipo, una jerarquía visual que se ve bien y funciona, pero sin tener que tocar el tamaño del texto porque hay tantas otras cosas que podemos hacer. No estoy seguro si lo logré aquí por completo todavía, pero tengo una jugada con ella. No va a quedar genial y no va a ser perfecto. Pero es un ejercicio realmente agradable hacer que tu cerebro piense otras cosas que el tamaño del texto antes de seguir adelante y crear un sistema de tipo real. 7. Sistema de diseño: Una gran diferencia entre la topografía impresa y tipografía web suele ser con una revista o un libro. El tipo se escribirá primero. El mecanografista recibirá todos los artículos y todos los textos listos para crear un sistema tipográfico. Mientras que a menudo con una aplicación web o un sitio web, los artículos y el contenido vendrán mucho más tarde. Cuando estamos lidiando con la tipografía web, necesitamos un sistema mucho más sólido de cómo los subtítulos, cómo se ven las cotizaciones, cómo se ven todas estas cosas, porque no sabemos cuál va a ser el contenido. No sabemos si el periódico está algún día va a tener un rumbo realmente largo y otros días tienen uno muy corto. Necesitamos una serie de reglas porque como el diseñador o incluso el desarrollador front-end, no estaremos disponibles cuando se publique cada artículo. Elaborar un sistema tipográfico sólido es una parte muy importante de nuestro sistema de diseño. Y voy a empezar con un poco de inspiración de nuevo, si vienes a diseñar sistemas repo.com, en realidad ves enlaces a cientos y cientos de sistemas de diseños diferentes. Adiós, a veces empresas bastante grandes, Uber, IBM está justo aquí. Mucha Audi, muchas grandes empresas están publicando sus pautas de diseño que diseñan sistemas para que todo el mundo pueda verlos. Y podemos mirar algunos de estos para inspirarnos para crear nuestro propio sistema de diseño. Y gran parte de eso es que tengo sistema tipográfico. Voy a mirar uno ahora mismo porque es uno de los, probablemente uno de los más famosos. Es Google, diseño de materiales de google, sistema de diseño. Y solo estoy mirando la sección de tipografía en este momento. Ahora lo superior que tienen es la escala de tipo. Ya hemos hablado un poco de esto y lo vamos a afinar en esta sección. Verás que tienen una escala de todos los encabezados y todo el texto corporal y el texto inferior, y cómo van a verse todos esos. En realidad tenemos aquí una mesita práctica mostrando que hay dos tipos de texto corporal. Esto es un botón. El botón está en todas las tapas. Y nos dice no sólo qué tipo de letra usar, dónde, ya sea ligero, regular o medio. Nos dice el tamaño y los píxeles de referencia, si el botón o el superposición están en todas las tapas. Y en realidad nos dice el menor espacio también porque este encabezamientos bastante grandes, por lo que vamos a querer tenerlo un poco. Considerando que este texto de botón, aunque botones, sí tenemos inmuebles limitados, está en todas las tapas. El espaciado entre letras o el seguimiento se ha incrementado un poco ahí. Podemos echar un vistazo a esto, danos una idea de cómo Google está usando eso. Un par de cosas interesantes a tomar nota es ante todo, aunque este gráfico tiene píxeles de referencia en ella, sí sugieren usar unidades RAM más sobre eso más adelante. Pero si bajamos un poco, tienen algunas cosas sobre cómo aplicar la escala de tipo. Se trata de reglas que están escritas en el sistema de diseño para que cuando la gente lo esté usando, puedan ver Exactamente algunas ideas de cómo usarlo. Ahora una cosa que sí creo que es bastante interesante con diseño de materiales de Google es cuando sustituyen el tipo de letra de encabezado. Es posible que hayas notado que usaron Roboto para encabezamientos y texto corporal. Pero sugieren al sustituir el tipo de letra del encabezado para utilizar realmente los mismos requisitos exactos, exactamente el mismo tamaño de tipo. Y asumiría el mismo seguimiento, line-height y todo lo demás. Entonces a pesar de que en este diseño tienen una tipografía muy, muy pesada ponderada. Y éste, tienen esto para un scripting ligero con una altura x muy alta. Están sugiriendo usar exactamente el mismo tamaño de tipo que usarías con Roboto. Ahora sin embargo, si me desplaza hacia abajo un poco más, sugiere que para cosas como los subtítulos, está dando un poco de advertencia diciendo, no quieres usar un para expresar una tipografía para los subtítulos. Lo hacen. Intenta restringir las reglas cuando te pongas al cuerpo y al texto del título más pequeño. Pero en general, este es un muy buen lugar para venir y obtener algo de inspiración para cómo un sistema de tipos va a mirar ahora sobre el próximo par de videos, sin duda al final de esta sección, vamos a tener un sistema de tipo muy sólido para nuestras propias aplicaciones en las que estamos trabajando. Una forma en que la tipografía web difiere masivamente topografía impresa es a menudo con la tipografía web, necesitamos resolver el sistema de tipos mucho antes de que se escriba mucho del contenido. Un sistema tipo web necesita tener muchas más reglas antes de completar nuestros propios sistemas de tipo, vale la pena ir y tomar un poco de inspiración al echar un vistazo a cómo Google funciona el sistema tipo, o Uber o cualquier otra empresa bastante grande que usted cree que tiene un muy buen diseño. 8. Figma: En este video y en los próximos dos videos, te voy a mostrar cómo usar algunas de las características avanzadas de tipo abierto para diferentes piezas de software. Este video, voy a hablar de Figma. Si no usas Figma, salta a la de Adobe XD o Sketch para ver cómo habilitar esas características en esas aplicaciones. Ahora en Figma, he escrito esta línea de textos que dice Figma, y está escrita en Roboto. Roboto tiene algunas características de tipo abierto que podemos activar. Si hago clic en estos tres puntos aquí abajo. En realidad, Figma es absolutamente lo más fácil de trabajar con estas cosas porque cuando hago clic en estos tres puntos, cuando hago clic en estos tres puntos,viene con este menú realmente largo con todas las cosas que está disponible para esta tipografía. Acabamos, para un ejemplo rápido, puedo activar ligaduras. Y lo que eso va a hacer si miras a la F y al I de Figma, va a simplemente conectar los arriba bastante bien ahí. Entonces aunque estamos utilizando una tipografía bastante estándar, Roboto, bastante una tipografía de uso común. Podemos cambiar este tiro de hazaña y va a darle un poco más de carácter, lo cual es bastante agradable para nosotros. Y luego hay otra llamada ligaduras raras. Echará un vistazo a por qué cambiar a estos más adelante y todas las características que están disponibles para diferentes tipos de letra. Pero para que lo sepas, si eres usuario de Figma, así es como accedes a las características de tipo abierto de una tipografía. Si alguna de las características está en gris como las que se muestran en la parte inferior de la pantalla en este momento. Eso significa que el tipo de letra específico, el texto específico que está seleccionado actualmente, no tiene opción para esa característica de tipo abierto. Ahora si no sabes lo que significa el tipo abierto, no te preocupes, vamos a estar hablando de ello a lo largo de esta sección. 9. Boceto: Ahora si eres usuario de boceto, en algún momento vamos a querer activar las características de tipo abierto para algunos textos en boceto. Acabo de escribir boceto 50 para aquí porque esa es la versión de sketch que estoy usando. Hace tiempo que no he pagado por el boceto. Para que puedas ver las cosas un poco diferente si tienes una nueva versión de boceto, he escrito este texto en pantalla de Playfair. Ahora si selecciono esto, puedo subir a Ver Mostrar fuentes. Y me va a mostrar todas las diferentes fuentes que tengo a mi disposición en este momento. Y si hago clic en el cog en la parte superior y selecciono tipografía. Estas son todas las características de tipo abierto disponibles para la visualización de Playfair en este momento. Si sólo muevo esto por aquí, ahora si sólo selecciono este texto, tal vez quiero cambiar estos números a textos minúsculas porque está en línea. También texto en minúsculas se llama en realidad figuras de estilo antiguo. Hablaremos de esto más tarde. Pero si selecciono eso, verás que convierte estos números en minúsculas. Ahora si ves diferentes características tipográficas aquí a las que tengo actualmente. Eso es probablemente porque has seleccionado un tipo de letra diferente. Si, por ejemplo, selecciono Roboto en su lugar, y verás que tengo diferentes opciones disponibles. Ahora si no entiendes que lo que los números de estilo antiguo son todavía, eso está bien. Vamos a tener un video sobre eso en breve. Pero ahora ya sabes cómo acceder a todas las características de tipo abierto en Sketch. Por lo que es simplemente ver, mostrar fuentes y luego haga clic en el cog en la parte superior aquí y haga clic en Topografía. Y eso va a subir esta ventana. 10. Otro software: He pasado algún tiempo tratando averiguar cómo cambiar las características de tipo abierto en Adobe XD o en InVision Studio. Y con toda honestidad, si quieres hacer esto, es posible que necesites escribir algún código que pueda complicar increíblemente. Mi opinión personal es que si actualmente no estás usando Sketch o Figma para hacer diseños de UI, ahora podría ser un buen momento para aprender a usar Figma. Porque para ser perfectamente honesto, adobe XD e InVision Studio nunca han actualizado realmente completamente su sueño de ser un competidor de boceto completamente. Y creo que su falta de soporte para características de tipo abierto es solo una de las muchas razones por las que este software tal vez no se pueda utilizar para el diseño de la interfaz de usuario por el momento. Por supuesto, esto podría no ser posible dependiendo de dónde trabaje, pero incluso si se ve obligado a usar una de estas piezas de software para el trabajo, tal vez aprenda un poco sobre Figma o si eliges bosquejar solo para que puedas tener un juego alrededor con las características de tipo abierto de las que vamos a hablar a lo largo de este módulo. 11. Aplicar estilo: Para el resto de esta sección, vamos a tener algunos videos de fuego rápido sobre cómo agregar estilo e interés visual para ayudar a su jerarquía visual a convertir su escala tipográfica en un sistema de tipo completo listo para ser utilizado en una aplicación o en un sitio web. En este primer video, quiero hablar de lo que comúnmente denominamos estilo tipo, que es negrita y cursiva. Hay un par de reglas rápidas reales que quiero plantear en una de esas es si tienes un encabezamiento muy pesado de textos ponderados, no quieres que sea audaz. Si cambio el rumbo a Montserrat, Montserrat tiene un negro extra audaz incluso lo llaman opción Negro. Ahora hacer tu número uno encabezando este espeso es bastante intenso. Está exigiendo un poco demasiada atención. Y para ser honesto, esta tipografía, Montserrat no tiene el tipo de detalle para trabajar a esa escala y esa espera, no escala bien a ese tamaño, pero también es increíblemente densa e increíblemente punchy. Una cosa que podrías hacer si tuvieras que hacer esto es que en realidad podrías bajar el color tan levemente. Si hago de esto un negro ligeramente más claro, de manera realista, se va a ver más o menos el mismo color que el resto del texto porque es mucho más denso, se va a quedar más negro de todos modos. En ocasiones, si las personas tienen un área demasiado densa de textos, podrían reducir un poco ese color para ayudar a contrarrestarlo. Pero en realidad no deberías estar haciendo esto. Por supuesto, podríamos tener nuestro rumbo principal para estar en una Montserrat negra, pero simplemente no tan grande como introducimos nuevos estilos para ayudarnos con nuestra jerarquía visual, no tenemos que confiar en el tamaño tanto más. Por razones similares, si me dieron este rubro seis o incluso algo de mi texto más pequeño. Y yo también hice esta monstera. Y estoy eligiendo Montserrat porque sé que tiene un montón de blancos. Si hice a Montserrat extra ligero, simplemente no va a funcionar en este rubro seis, dependiendo de la calidad de los monitores de alguien de buena calidad, tal vez ni siquiera puedan ver eso adecuadamente. Puede que no se renderice correctamente en la pantalla. Las líneas son demasiado delgadas. Nosotros por supuesto, cuando nos aseguramos de que no estamos poniendo nuestro rubro más grande y los textos más audaces y nuestro rubro más pequeño en el texto más ligero, no va a funcionar. Deberías tener en cuenta mientras aún estás en la etapa de diseño allí, si tienes una tipografía que no tiene un archivo de fuente en negrita o no tiene un archivo de fuente cursiva. Algunos navegadores se corregirán para eso para usted. No te dirá que no tienes un archivo de fuente cursiva. En realidad inclinará las letras, cursivas no son versiones inclinadas de las mismas letras. Son un Cliff Original completamente nuevo para tener el estilo de una cursiva. No es solo inclinar la letra, sino que el navegador hará eso por ti en alguna horrible característica que tienen algunos navegadores, donde simplemente inclinarán el texto para ti. Y de vez en cuando algunos navegadores incluso han sido conocidos por Bolden el texto para usted sin tener realmente la tipografía negrita disponible. Queremos tener cuidado si tenemos unos pesos de texto bastante pesados a un tamaño bastante grande que tampoco lo hacemos bastante audaz, va a ser un poco demasiado. Y de igual manera, si tenemos un texto bastante pequeño, no queremos que sea demasiado delgado. Si alguna vez hacemos algunos textos un poco demasiado densos en la página, podemos ajustar la oscuridad o ligereza del color siempre tan ligeramente. Y casi será en notable por nuestros usuarios porque el texto más denso va a parecer más oscuro de todos modos. Así que sólo estamos corrigiendo para eso. Y si estamos utilizando texto cursiva o una ponderación específica de texto en negrita, queremos asegurarnos de que tenemos el archivo de fuente correcto porque a veces puede pasar desapercibido si el navegador corrige para el hecho de que no lo hagamos. 12. Ligaduras: Echemos un vistazo a algunas de esas características que acabamos ver cómo habilitar en Figma y en boceto. Voy a seleccionar este rubro Tipo II. Lo he cambiado a arenas más justas. Estoy usando el miedo un sentido por la razón de que hay muchas alternativas a los estilos de tipo aquí. Si acabo de escribir FF, FF II incluso verás cómo la F un poco choca con los puntos del ojo. Ahora, es posible que quieras darle estilo a esto para que esa f no choque contra el punto de la I. O tal vez quieras que parezca así. Ahí es donde las ligaduras son muy prácticas. Acabo de seleccionar FI y en el panel Detalles de tipo, voy a encender ligaduras. Y verás que el I y F Now se combinan en una sola letra. Y en realidad esta tipografía tiene algo llamado ligaduras raras también, donde si quiero que el FF a todos combinados juntos, puedo encender eso también. Y eso ahora se une en un solo glifo de tres caracteres. Ahora vale la pena mirar un poco esto cuando estás seleccionando tu tipografía. Porque a veces estos cambios sutiles pueden realmente hacer que una tipografía se vea bastante diferente. Y luego te da algunas opciones potencialmente más interesantes. Es posible que desee que las ligaduras solo aparezcan para partes de los textos pero no otra. O quizá no quieras usarlos en absoluto, pero vale la pena echarle un vistazo. Ahora, Farah suena en realidad tiene muchas otras cosas. Por ejemplo, el, estos símbolos interesantes aquí que se pueden encender y apagar. Sinceramente no sé lo que éstos así sucesivamente. O tal vez por ejemplo, necesito usar la taquigrafía para el número como no. Si enciendo esto, puedo escribir N O dot y va a convertir eso automáticamente en este símbolo aquí. Si estuviéramos creando una aplicación o un sitio web que tiene muchas cosas matemáticas pasando de que probablemente queremos tomar notas que hay ciertos símbolos matemáticos que algunas fuentes van a permitir nosotros para encender o apagar. También tenemos unas variaciones estilísticas aquí también, dondequiera que sea una forma muy tradicional aquí. Pero si nos gusta, podemos hacer de esto una más simple una como esta similar con el G. Se puede ver como hay ligera modificación es que se puede hacer a una tipografía para crear más interés, a potencialmente crear alguna variación. Pero ciertamente esto, algunos de estos van a ser símbolos matemáticos que en realidad podrías necesitar para la aplicación que estás creando. Ahora si estás usando algún software y estás usando una tipografía y estás bastante seguro de que debería tener estas opciones, pero no las estás viendo. Vale la pena señalar que depende del tipo de archivo de fuente que tengas. Y hablaremos un poco más en la etapa de implementación. Pero a estas veces se les conoce como características de tipo abierto. El tipo de archivo de tipo abierto le permite tener estos, igual que el tipo de archivo W OFF. Si está utilizando un archivo de fuente de estilo más antiguo, es posible que no necesariamente tenga las ligaduras disponibles para esa tipografía. Y por supuesto eso significa que queremos asegurarnos de que estamos cargando el archivo de fuente correcto en nuestros sitios web también. Eso es ligaduras y alternativas estilísticas dondequiera que la tipografía esté lidiando con y-naught, ver si hay algunos glifos adicionales para combinar algunas de las letras o alternativas para algunas de las letras que podrían funcionar mejor con los diseños que vas a estar creando. Siempre que estemos utilizando una fuente de tipo abierto y un archivo OTF o un archivo de formato de fuente abierto web y un W0 OFF, tenemos acceso a las características de tipo abierto como ligaduras y alternativas estilísticas. Vale la pena echarle un vistazo a lo que está disponible ahí porque algunos de estos van a ayudar a nuestra tipografía a transmitir el mensaje que queremos transmitir. Y a veces va a haber algún tipo de símbolos que realmente necesitamos usar para nuestro texto. 13. Tachos pequeños: A veces se ve esto en libros escritos y a veces se puede ver en sitios web, pero iniciar un párrafo o una sección de texto con un par de palabras de gorras pequeñas puede ayudar a llevarnos en y medio, un poco de interés visual al inicio del texto. Entonces en realidad voy a cambiar este tipo de letra. Actualmente es más tarde, y lo voy a cambiar a alegoría o eso es porque notarás que la tipografia ahora está completamente cambiada. Y sólo voy a seleccionar las tres primeras palabras. Y esto va a volver, recuerda que esto funcionará de manera diferente en boceto, pero voy a hacer clic aquí abajo. Y voy a venir aquí y hay un estilo aquí para gorras pequeñas. Ahora lo que tenemos es que tenemos este poquito funky donde empieza el párrafo con tres palabras en gorras pequeñas. Ahora hay múltiples razones por las que podríamos elegir tener campamentos pequeños al inicio o en medio incluso de una frase, o posiblemente para nuestros encabezamientos. Ahora si alguna vez quisiéramos usar dos tipos de letra en el mismo párrafo y tener el otro tipo de letra de mayúsculas pequeñas en línea con las letras minúsculas de este otro tipo de letra. Vamos a querer intentar alinear las gorras pequeñas con la x-height. En realidad parece que ya estamos bastante cerca aquí. Es posible que deseemos aumentar una pequeña cantidad de seguimiento para ayudar a diferenciar entre estos elementos. Sólo voy a poner dos espacios por ahora. Sólo para asegurarnos de que los estamos separando ligeramente. Podríamos usar gorras pequeñas para uno de los encabezamientos o algo así, pero es más comúnmente utilizado como un poco de inicio a un párrafo de texto. Podríamos utilizar potencialmente una tipografia diferente para las gorras pequeñas si la que estamos usando no tiene gorras pequeñas, por ejemplo, cuando sí queremos alinear la x-height con la parte superior de las gorras pequeñas. Y debido a que estas son gorras, posible que deseemos aumentar el seguimiento cada vez tan ligeramente y posiblemente tener un poco más de espacio al final de la sección de gorras pequeñas. 14. Espaciado de las letras: Vamos a espaciar, espaciado de caracteres y seguimiento son tres nombres diferentes para esencialmente exactamente lo mismo. Que es si revisas esto, la cantidad de espacio entre cada letra individual. Si tengo un encabezado grande en la parte superior de la página, esta es quizás la razón más utilizada para el seguimiento. Si tengo un rumbo sobredimensionado, un rumbo bastante grande, voy a reducir el seguimiento ligeramente por debajo de 0. Entonces voy a sacar parte del exceso de espacio entre las letras. Las varias razones por las que podrías hacer esto en un rumbo sobredimensionado. Una es que es simplemente más grande así que hay más espacio disponible para aplastarlo. Por supuesto, probablemente tengas una cantidad limitada de espacio en tu pantalla, específicamente en el móvil. Por lo que puede haber varias razones por las que necesitas para reducirlo. Entonces toda la pantalla no es tomada por un rumbo. Pero también la mayoría de los otros sitios web están eliminando algún seguimiento de los grandes encabezados de gran tamaño. Por lo que podría parecer un poco raro ahora cuando la gente ve grandes encabezados que no tienen un seguimiento reducido. En términos generales, para nuestro rubro principal, vamos a reducir ligeramente el seguimiento. Y luego para dos y encabezando tres potencialmente, vas a tomar un poco menos rastreo cada vez. Cuanto más te bajes, más espacio vas a tener entre esas letras. Ahora si en algún momento tienes un rumbo que está en todas las gorras o incluso bastante audaz, bastante pesado él, entonces va a empezar a buscar un poco agrupado demasiado. Por lo que vas a querer un seguimiento adicional alrededor de esas cartas. De nuevo, podemos hacer esto difuminando la página o entrecerrando los ojos y viendo si tiene un color gris razonablemente consistente sobre ella. No queremos bloques grandes y densos de color oscuro. Y así el seguimiento puede ayudarnos a asegurarnos de que los eliminemos. Cuando se trata de interfaz de usuario, botones de texto y menús y cosas así, probablemente haya una razón para expandir a veces el seguimiento y a veces reducirlo. Es posible que hayas ido por todas las mayúsculas en el texto de tu interfaz de usuario. Podría ser potencialmente bastante pequeña o bastante vidas dependiendo de lo que te hayas ido. Si es bastante pequeño y es todo gorras, vas a necesitar espaciarlas un poco. Quieres que tus elementos de interfaz de usuario se destaquen y sean fáciles de identificar. Pero en el otro lado de eso puede ser por esas razones, usted ha hecho el texto un poco más grande como yo. Tal vez lo hagas todo gorras y luego solo vas a ser capaz de caber tantos elementos de menú en la pantalla. Por lo que tal vez quieras reducir el seguimiento y aplastar un poco esos elementos de la interfaz de usuario. Así que el seguimiento es una forma realmente agradable de reducir la densidad alrededor de la página y también de reducir la cantidad de espacio que pueden ocupar algunos bits menos densos de textos, pero también podría usarse para la jerarquía visual. Por ejemplo, aquí tengo mi texto superpuesto, que puede ser como un color diferente por encima de algunos textos. Veremos algunas de las otras opciones más adelante. Pero tal vez quiero que este texto destaque y luzca bastante diferente. Así que tal vez acabo de poner en una especie de ridículo cantidad de seguimiento. Y va a crear una jerarquía más visual porque al instante se ve bastante diferente a los otros elementos. Además de necesitar seguimiento para controlar la densidad en la página y nuestro uso del espacio. También puede ayudarnos a establecer una jerarquía visual más interesante. Podemos utilizar el espaciado de letras, el espaciado de caracteres, o el seguimiento como quieras llamarlo para aumentar o reducir la densidad de diferentes bloques de texto. Pero también podemos usarlo para ayudarnos a establecer nuestra jerarquía visual y crear elementos de texto con un poco más de interés visual. 15. Interletraje: Simplemente miramos el espaciado de letras o rastreando cuánto espacio hay entre cada letra. Pero el kerning es lo que la diferencia hay entre el espacio de ciertas letras. Por ejemplo, no queremos que esto yo y este d estén demasiado cerca porque son letras bastante grandes, pero algo como esto e y esto a puede acercarse un poco porque tienen este borde redondeado y hay menos de la densidad del personaje al borde del glifo por esas razones, cuando estamos averiguando cuánto espacio hay entre cada letra. No nos preocupa esto. No nos preocupa la brecha. Nos preocupa la zona. Nos preocupa esto. Déjame simplemente hacer que el texto sea blanco para que puedas verlo más fácil. ¿ Estas dos áreas amarillas tienen aproximadamente la misma superficie? La forma de la izquierda se ve un poco más grande, pero eso probablemente sea más porque dibujé líneas rectas en el borde de la E y la a. podemos ver los espacios entre estas letras. El área entre ellos es más o menos la misma. Bueno, si tienes la suerte de estar trabajando con una tipografía con algunas características de fuente abiertas. Podemos volver a entrar aquí y podemos encender pares de kerning. En realidad ya está encendido para esto. Pero si lo apago, puede ver que en realidad eso agrega aún más espacio entre esa H y E. Ciertas letras son bastante difíciles para el software o el navegador para identificar cuán grande debe ese espacio ser. Lo que sucede es cuando las personas están creando la tipografía, cuando están creando los archivos de fuente, agregan en una tabla de kerning para que puedan identificar cuáles deben ser los vacíos entre específicos cartas problemáticas cuando van juntas. Cuando piensas en todas las combinaciones de todas las diferentes letras y comprobando que se ven bien. Podría ayudarte a entender por qué los tipos de letra tardan literalmente años en crear. También posiblemente te ayude a entender algunas de las diferencias entre las realmente caras y las que la gente regala de forma gratuita. Los problemas entre una letra mayúscula y una minúscula son siempre un tema. Y así el archivo de fuente tiene algunos datos de kerning ahí para decirnos que esta E debe estar más cerca que esta h Ahora tu software o tu navegador a veces intenta resolver esto por sí mismo. Hace algunos cálculos especiales para averiguar cómo debe ocurrir en las letras, cuáles deberían estar más cerca y más separadas? En realidad, el software que estoy usando edición completa de video en este momento hace eso. Entonces, si miras las pantallas de título para estas conferencias, podrías notar algún kerning oscuro de vez en cuando. Mucho software no considera que esto sea demasiado importante, y muchos navegadores todavía no lo hacen. Y sin embargo, en realidad es bastante importante cuando piensas en cuánto de tu sitio web está gravado y cómo necesitas que sea cómodamente espacio, para ser fácil de leer, cómodo de leer y no se ven raras para tus usuarios. Kerning es una parte increíblemente importante del diseño web, y sin embargo, realmente no puedes hacerlo correctamente. La mayoría de los navegadores no van a corregir para esto, y la mayoría de los tipos de letra tampoco van a hacer demasiado. Pero es cada vez mejor. Y veremos esto cuando veamos la implementación. Pero hay algunas bibliotecas de JavaScript que podemos usar que en realidad harán un poco de kerning óptico para nosotros y calcular algunos de esos números hacia fuera. Si tenemos una tipografía que no tiene una buena tabla de kerning. Esta, estoy usando una fuente gratuita de Google llamada Laura. Yo diría que se ve bastante bien. Y vas a necesitar entrenar tu ojo en esto. Nuevamente, en realidad he encontrado un juego realmente genial llamado type method, donde tienes que probar y Kern las letras tú mismo, por lo que te da las letras en la pantalla. Tengo que tratar de averiguar si el espacio entre cada una de estas letras es igual, no desde el punto hasta el punto, sino el área real entre ellas. Entonces creo que hay V necesita estar un poco más cerca de esto. Cuando estás contento con él, golpeas compare. Y verás que en realidad lo hice realmente, realmente mal. He sido diseñador web durante la mayor parte de mi carrera. Y el kerning es algo que realmente no ha sido posible en los sitios web todavía bastante recientemente. Nunca he sido bueno en kerning. Pero sigue lo que digo, no lo que hago y comparo y pruébalo porque esto es algo que ahora es posible. Ciertas tipografías ahora tienen estas tablas de kerning en las características de tipo abierto. Hay algunas características de JavaScript que nos ayudan manera realista cuando estamos pensando en esto en nuestros diseños. Todo lo que tenemos que tener en cuenta es que hay limitaciones masivas con los tipos de letra y los navegadores. Y queremos asegurarnos de que sólo somos mínimamente algunos de los temas de kerning que podríamos ver. Kerning es el espacio entre letras específicas. Entonces nos ajustamos para las letras que aparecen más cerca porque son densas en peso o tienen líneas rectas justo al lado del otro. Una tipografía de buena calidad tendrá una mesa de kerning integrada para ajustarse a algunas de las letras problemáticas. Siempre y cuando tengamos un archivo de fuente OTF o W OFF, podemos encender esos pares de kerning. Si no, es posible que queramos entrenar ligeramente nuestros ojos para detectar más problemas de kerning porque ahora podemos usar JavaScript para solucionar algunos problemas de kerning. 16. Alineación de párrafos: Nos hemos burlado de un área pequeña de nuestro texto aquí usando nuestro sistema de diseño actual aquí mismo, me he burlado de una pequeña sección de cómo serían nuestros textos con dos encabezados y algunos párrafos. Una cosa con los párrafos en línea que generalmente se mantuvieron bastante cortos compararon dos párrafos de un libro, gente tiene mucho menos pacientes una vez que llegan a su computadora. Los cerebros se han adaptado desde que empezamos a usar computadoras. Y si vemos dos bloque de texto más grande que es demasiado desalentador, nos asustamos y dejamos de leerlo. Generalmente mantenemos nuestros párrafos bastante cortos, pero también con texto impreso, normalmente tienes un poco de sangría al inicio de párrafo como este. Hay un pequeño indicador de que el párrafo empieza ahí. Realmente nunca ves esto en línea. No es así como lo hacemos. Lo que tendemos a hacer es poner un poco de espacio alrededor de los párrafos. Ya lo hemos hecho con nuestro margen, pero vale la pena señalar que esto tiene más que ver con cómo leemos en línea. Generalmente, un párrafo de texto en una aplicación web o un sitio web está escrito tal manera que podría leerse fuera de contexto porque la gente generalmente descremada, tal vez encuentre un encabezado que suena a Rafael a lo que querían volver a leer y ocasionalmente saltarse un párrafo. Normalmente se escriben los párrafos para que sean un poco más autónomos de lo que harían en un libro. Es menos probable que sigan adelante de lo que se escribió antes, es más probable que sean un bloque autónomo de texto en sí mismos. Si escribieras algún texto y quisieras que se leyera en un estilo similar a un libro, podría ser un indicador visual bastante útil a la mitad que sangraba en lugar los márgenes entre los párrafos. Otra cosa que muy raramente ves en línea son textos que se justifican el pasillo de izquierda a derecha, siempre tienes este trapo en el extremo derecho. Hay algunas reglas CSS para hacer que los textos se estiren todo el camino y simplemente aumentar el espaciado para que todas las líneas de texto terminen en el mismo espacio. Desafortunadamente, estas reglas CSS no son soportadas por casi ningún navegador. Y no estoy realmente seguro por qué lo harías. De todos modos. Crea unos horribles ríos de espacio en medio de tus párrafos. Se ve feo y realmente no tiene una ventaja demasiado grande. Otra cosa que generalmente nunca verías en la impresión es tener una palabra huérfana en la parte inferior como esta, normalmente empujaríamos unas palabras hacia abajo intencionalmente para crear un trapo más agradable en el lado derecho aquí. Y para asegurarnos de que tengamos al menos dos o tres palabras en la nueva línea. Nuevamente, estas cosas no son necesariamente tan posibles en línea, por lo que normalmente sólo aceptamos que tenemos que lidiar con ello. De nuevo hay, algunas bibliotecas de JavaScript por ahí, o podríamos escribir algún JavaScript para cuidar las palabras huérfanas y dar cuenta de ellas. Pero es un compromiso bastante malo cuando está ralentizando tu sitio o qué tipo de cosas tienes para decidir lo importante que es eso incluso para ti. Algo que muy raramente verías a alguien hacer es alinear centralmente o justificar centralmente los textos como este. Para un par de líneas, esto está bien, pero recuerda cómo tu ojo necesita aprender a saltar de nuevo al inicio de la siguiente línea. Y cuando ese inicio se ha movido alrededor, se hace más difícil para bloques de textos más grandes normalmente solo justificaría centralmente el texto si se trata de un pedazo de texto muy corto. Una de las razones por las que esencialmente se puede justificar el texto de vez en cuando es que parece más autoritario. Es una reminiscencia de volantes de estilo antiguo y otras piezas de gráficos que tienen texto alineado centralmente normalmente sería algo bastante autoritario. Miramos un sitio web de noticias antes y tenía un logotipo alineado centralmente en el medio. Hace que el periódico aparezca un poco más autorizado. Para nuestros textos de párrafo, casi nunca lo vamos a justificar centralmente. Cuando estamos trazando párrafos de textos, queremos ser conscientes de que la gente no lee en línea lo mismo que leen en un libro. Entonces no tenemos las mismas reglas. Añadimos márgenes entre párrafos y no sangramos porque no se siguen tanto el uno del otro. Si estamos tratando de hacer una declaración y animar a la gente a leer de manera lineal. Es posible que deseemos estar más influenciados por el diseño de impresión. En su mayoría no nos preocupamos por cosas como palabras huérfanas al final de un párrafo o cosas como el trapo en el lado derecho de un párrafo es demasiado difícil para nosotros poner reglas en nuestro sistema para asegurarse de que esos no sucedan. Y sólo justificamos centralmente un pedazo de texto si es muy corto, cito o posiblemente el encabezado principal, puede parecer un poco más autoritario, lucir más importante cuando lo hacemos. Y sin duda hace que destaque. 17. Números y datos: Un punto realmente importante a la hora seleccionar una tipografía y al seleccionar los estilos y cómo usan a través nuestro sistema tipográfico son los números y los datos. Porque hay todo tipo de cosas diferentes a considerar con nuestros números y nuestros datos. Ya hemos hablado bastante de cómo en realidad con tu tipografía, quieres asegurarte de que tengas acceso a todos los símbolos matemáticos que te gustan. Algunas tipografías tienen glifos para fracciones o para ciertos símbolos matemáticos que posiblemente otros no lo hacen. No es necesario luchar ni encontrar sustitutos. Necesitas encontrar una tipografía que tenga todos los glifos que necesitas. Ahora una cosa que toqué antes también es que si pongo algunos números en medio de este texto, estos son números mayúsculas. Estos probablemente se ven bien en el encabezado, pesar de que es un rumbo minúscula, pero en medio de un párrafo que es un poco extraño tener estos grandes números gruesos, es bastante distraente incluso, y sólo se ve un poco raro. Lo que queremos hacer aquí es por nuestros párrafos, queremos encender lo que a veces se llama números de estilo antiguo, pero se puede pensar en números minúsculas. Se puede pensar en mayúsculas como estado guarnición de números. Si cambio esto, ahora se puede ver que los números en medio de este párrafo en nuestros números minúsculas, ahora se sientan cómodamente en esa línea de base. Tienen que enviarnos lo mismo que algunas de las letras minúsculas. Por supuesto, si se trata de chino, japonés, coreano, donde no hay concepto de números minúsculas. Eso no es algo de lo que vas a necesitar preocuparte. Luego viene la cuestión de cuándo los datos están en una tabla. Ahora esto es algo que aún no hemos mirado una herramienta, pero por supuesto, a veces tus datos están en una tabla. Ahora la regla más común que probablemente ya hayas escuchado es que aunque dejaste alinear todas las columnas de textos, deberías escribir una línea. El número de columnas. Normalmente tendrías algo como esto. Y parte de la razón es que es un poco más fácil ver qué es lo correcto de ese punto decimal. Este número superior que he dado aquí, 1.27 es un poco más fácil de comparar eso con el número a continuación cuando los puntos decimales están todos alineados. Pero a medida que estos números se hacen más grandes y ya se puede ver algún tipo de diferencias tener uno aquí en lugar de un 0, estos puntos se van a perder una línea. Idealmente, lo que querría es poder alinear la tipografía con el punto decimal en lugar de izquierda o derecha. Bueno, eso sería bastante duro, pero sí tenemos un sistema para sortear esto. Y es similar a esos tipografía monoespaciada es, hablamos de tipografía monoespaciada es un poco antes. Esto es cuando cada carácter tiene el mismo ancho con los números, normalmente no usamos la palabra monospace, normalmente usamos la palabra tabula. Pero si selecciono todos estos, hay otra opción para tener un monoespacio o números Tabula que también son mayúsculas y guarnición. Si hago clic en eso, ahora, muchos números que llego a la izquierda aquí y sean cuales sean esos números, esos decimales todos van a alinearse realmente con esta tipografía más adelante, no parecen hacer una diferencia demasiado grande. En esa nota. Simplemente señalaría que más tarde en realidad tiene algunas opciones bastante bonitas para los números y funciona bastante bien en una mesa. Entonces esta es una tipografía realmente agradable para usar para los datos de la tabla. Entonces realmente hay tres cosas las que pensar con números y datos. Y el primero es asegurarse de que la tipografía que estás usando tenga todos los símbolos matemáticos que puedas necesitar. Si vas a estar usando muchas fracciones, asegúrate de que el tipo de letra tenga glifos para fracciones. A continuación, si sabes que vas a estar usando mucho los números en medio de los párrafos. Asegúrate de que haya una opción para números minúsculas o de estilo antiguo. Y si vas a estar usando muchos números en las tablas, asegúrate de que haya una versión monoespacial de los números, también llamada a veces versión tabular de los números. 18. Sistemas tipográficos: Esta etapa, tenemos absolutamente mucha información sobre cómo tomar una buena decisión, elegir un tipo de letra sobre otro para nuestra marca y para el proyecto que estamos creando con esa marca, hemos aprendido absolutamente cargas sobre conseguir los tamaños y las longitudes de línea, etc, correctos para una buena legibilidad. Entonces hemos mirado cómo mirar los diversos tamaños de encabezado diferentes y crea una buena jerarquía visual utilizando otras técnicas que no sean solo tamaño, la mejor manera para nosotros de llevar todos estas habilidades juntas es crear un sistema de diseño tipográfico que usaríamos a lo largo de una aplicación cuando lo creamos. Ahora, he ido adelante y creado tres de éstos como ejemplo, y voy a hablarte a través de ellos. Ahora. En los tres de estos ejemplos, he tomado una página de Wikipedia no completamente al azar. Quería conseguir unas cuantas bastante diferentes, pero casi completamente al azar. Y he intentado diseñar usando mi nuevo sistema tipográfico. Puede que en realidad no estemos en una posición donde tengamos un layout para la página o sabemos exactamente cuál es el contenido. Pero cuando empezamos a intentar crear nuestro sistema, queremos pensar en las posibilidades y queremos estar usando contenido del mundo real. No queremos usar texto de marcador de posición. Se va a quedar diferente y no vamos a entender completamente cómo funcionará lo terminado. Por supuesto, como en realidad empezamos a crear una aplicación, medida que empezamos a diseñar todas las distintas páginas y elementos diferentes, nos vamos a dar cuenta de que existían diferentes estilos tipográficos que tenemos que cambiar ligeramente. Pero mientras tengamos nuestro sistema de diseño, tenemos una única fuente de verdad que podemos compartir con todos nuestros autores, desarrolladores y otros diseñadores. El primer ejemplo es que he tomado éste sobre dar a luz un yate, y he elegido, te habrás dado cuenta, también he tomado algunas decisiones iniciales sobre colores y cosas que no son necesariamente lo que estamos hablando en este curso, pero vale la pena tirarlo mientras intentas crear este sistema de diseño porque te da una idea mucho mejor sobre tamaños y opciones de tipografía. Si miramos hacia atrás al sistema, verás que no me he parado con el nombre rumbo uno a la rúbrica seis. He seguido adelante y les he dado nombres dependiendo de cómo en realidad se usarían en su lugar a lo largo de la aplicación. Y no tenemos una pantalla súper grande encabezando sobre el cabello que pueda aparecer en la página de inicio o algo porque simplemente no se usa en la página. Luego pasé a crear para este sistema de tipo. Si tuviera algún encabezado de exhibición, este es el estilo con el que me he ido, con las ligaduras y todo. Pero no lo he usado en el diseño, así que acabo de sacarlo del sistema tipográfico porque si no se usa, no lo quiero en el sistema. Todo lo que tenemos en este bloque de la izquierda tiene todos los tamaños correctos con las alturas de línea, las longitudes de línea, y los márgenes a su alrededor. Cómo creo que van a funcionar bien en una página. Y luego he ido adelante y creé una página. En realidad, vas a crear varios diferentes y ver cómo podría funcionar en diferentes partes de tu aplicación o sitio web para asegurarte de que mi sistema tipográfico sea algo que soy contenta con ahora porque es toda una especie de cosa exótica, tradicional, fletando un yate. Tiene una sensación tradicional muy, de clase muy alta a ella. He ido por una tipografía estilo Baskerville, que como sabemos, es un serif tradicional. Y creo que encaja bastante bien con cómo creo que la marca sería de cuatro páginas sobre fletar un yate. Si miramos mi segundo ejemplo, he ido por Blockchain. He tomado la página de Wikipedia para blockchain y he ido por algo que se ve un poco más de cabello técnico, por supuesto, colores ligeramente más técnicos de aspecto. Esta tipografía aquí es Mary Weather, y tiene un Serif un poco más moderno. Algún contraste interesante en la topografía y algunas formas bastante interesantes sin estar realmente por ahí y extrañas. Se ve muy moderno, sin ser demasiado estilística. Se ve muy moderno. Y creo que para algún tipo de tecnología de vanguardia, esta es una opción particularmente buena. Y se puede ver que he agregado unas cuantas capas en mi jerarquía tipográfica que he entonces una vez más solo trato de diseñar en una página, mi página inicial y ver qué bien se ve la altura de la línea bajando. Posiblemente tenga un aspecto un poco más oficial, el tipo de cosas que podría parecer un diario porque probablemente sea bastante informativo y hablando de tecnología de vanguardia y posiblemente de intentar para convencer a gente de alguna nueva evidencia científica sobre lo buena que es la blockchain o algo así. Así que lo he presentado un poco más como un diario, pero con algunas cosas que lo hacen un poco diferente demostrar que es una especie de tecnología de vanguardia. Y luego finalmente he ido por algo con un poco de datos sobre él. He ido a esta página sobre el PIB de Wikipedia. Y para ello, me alineé centralmente a los encabezados, como dije antes, esto siempre da a las cosas más de una especie de sentimiento autoritario cuando estamos hablando de algo así como datos que tal vez el texto alineado centralmente es una buena idea. El encabezamiento y el texto corporal está todo en Roboto. Ahora roboto es una muy buena opción para este estilo de lista de páginas de todos, porque tiene todos los números de estilo que necesitamos para asegurarnos de que esté correctamente alineado para que podamos leer nuestro números correctamente. Pero una razón por la que creo que Roboto es realmente bueno para este estilo de página es que esta es una página que va a ser leída por personas que son analistas y les gustan los estilos no tontos. Sin admitir realmente eso en el fondo, están tan influenciados por el estilo visual como todos los demás. Creo que Roboto tiene una especie de estética sin tonterías a ella, aunque sigue siendo bastante amable, tiene bordes redondeados bastante bonitos y cosas. Y así creo que describiría este tipo de letra no tienen una personalidad muy acogedora, pero es lo suficientemente sutil que analistas de datos y personas que no creen que haya emociones o que les afecta. Otras personas que tal vez van a dejar que ese pequeño pedacito de estilo se deslice. Por supuesto es bastante irónico sugerir que algunas personas serían de mente completamente lógica. Simplemente crea que quieren leer un artículo solo para obtener los datos cuando se habla de algo así como comparar cifras del PIB entre países, lo cual es casi completamente ilógico porque la forma medimos el PIB ahora es vergonzoso. Pero a algunas personas simplemente les gusta ver números y tener una fe ilimitada en los números. Y es mi entendimiento que ese tipo de personas van a querer esta tipografía mucho más simple sin tonterías porque roboto sí tiene unos personajes bastante bien espaciados con buenos x- altura y contadores grandes como por ejemplo, en el sistema operativo y esas cosas, he logrado hacerlo un poco más pequeño mientras sigue siendo bastante legible. Si acabamos de llegar a un costado aquí se puede ver el sistema tipográfico por su cuenta. Ahora, cuando estás usando, estoy usando el pelo Figma, como he dicho antes, estoy usando Figma y cuando los estás viendo en la página, quieres recordar que para establecer la vista a un 100% cuando estás decidir si crees que es de buen tamaño y legible ahora mismo en mi pantalla. Y podría ser diferente que ver con el tamaño de tu pantalla y cómo las dimensiones del video son diferentes. Pero ahora mismo en mi pantalla, estoy mirando esto a un 100%. Entonces este es el tamaño exacto que se vería en la pantalla si creáramos este diseño exactamente igual. Pero eso va a cambiar un poco cuando quieras crear tu sistema tipográfico receptivo. Entonces sólo para este sistema, he creado la versión móvil. Esta es una página móvil de la misma página exacta de creado la versión móvil. Y este es el sistema móvil. Esto es todos los márgenes y tamaños de tipo para móvil. Ahora una cosa que notarás es que si estás buscando, si tus dimensiones son algo como mi pantalla, esto se ve demasiado pequeño para leer. Pero eso es por supuesto, porque no sostienes tu móvil tan lejos de tu cara. Cuando estamos utilizando software de diseño y queremos realmente asegurarnos de entregar nuestros diseños a nuestros desarrolladores o compartirlos con el resto de nuestro equipo en los tamaños que realmente van a estar en el pantalla y las dimensiones físicas reales. Entonces así es como quisiéramos crear nuestro sistema de tipos y nuestros diseños. Pero cuando lo vemos en nuestra pantalla de escritorio, si estamos sentados en una laptop o una computadora de escritorio, queremos asegurarnos cuando miramos la versión móvil que estamos haciendo zoom que ingresan 200 por ciento a compense el hecho de que la pantalla está mucho más lejos de nuestra cara que normalmente sosteníamos nuestro teléfono móvil. Ahora, como dije, estoy usando Figma y vale la pena señalar si también estás usando Figma, que hay una aplicación móvil llamada Figma mirror, donde una vez que inicias sesión , lo que sea, cualquiera que sea la mesa de trabajo que tengas seleccionado en la aplicación de escritorio se espejará en su teléfono móvil. Puedes mirar tu teléfono con bastante comodidad y ver exactamente cómo va a verse ese diseño en un teléfono móvil, que es una manera mucho mejor de evaluar si creemos que los tamaños de tipo son buenos y luego solo acercándose al 200%. He visto a otros diseñadores antes hacer cosas como simplemente hacer el tablero de arte para la vista móvil el doble del tamaño en su escritorio para que estén viendo todo el doble del tamaño para conseguir una idea de cómo va a verse en comparación. Creo que siempre queremos estar lidiando con el tamaño físico real que todo va a ser cuando estamos tratando con los archivos de diseño para que sea menos confuso cuando lo compartimos con el resto de nuestro equipo. Apenas un par de punteros allí que cuando estás revisando la vista móvil, estás jugando con tus tamaños de tipo. No olvides acercar o simplemente ver el diseño directamente en un teléfono porque no va a tener el mismo aspecto que se ve en una vista de escritorio. El gran reto, este es el gran reto principal, grande de diseño es que quiero que creéis un sistema de diseño. Ahora usando la aplicación que vas a estar creando, ya sea una aplicación web o si se trata de un blog o una revista. Y piensa en todas las cosas que ya hemos aprendido sobre elegir la tipografía. Ya teníamos un ir en eso. Obteniendo los tamaños de tipo correctos, alturas de línea, y todas esas cosas que hacer con la legibilidad. Y ahora empieza a pensar en la jerarquía visual y todas las cosas que podemos ajustar para conseguir una buena jerarquía visual. Ya sea color, si se trata de tapas pequeñas, si está usando múltiples tipos de letra, creando márgenes más grandes alrededor las cosas para decidir qué crea una buena jerarquía visual mientras se trabaja con el contenido que tienes y el branding que tienes. Nuevamente, cuantas más veces completes este reto, mejor. Entonces, ¿por qué no hacer lo que he hecho y simplemente obtener una página de Wikipedia y ver si la página de reserva de Wikipedia, puedes encontrar tipografías que sientas comunican el mismo mensaje. Descubre cómo hacer que esos tipos de letra sean de buen tamaño legible, y luego crea una jerarquía visual para solo esa página de Wikipedia. Cuantas más veces hagas esto, mejor te vas a conseguir en la creación de sistemas tipográficos. 19. Resumen: Estilizar y formatear nuestro texto tiene varias ventajas. Podemos utilizar ligaduras, por ejemplo, para crear combinaciones únicas en nuestros textos que le den más personalidad. Pero también podríamos usar algo así como números minúsculas dentro un párrafo y números de ancho fijo dentro de una tabla, donde va a ser mucho más útil. Si elegimos una tipografía gratuita, es posible que no siempre tengamos estas opciones. Ese puede ser un factor decisivo cuando estamos eligiendo la mejor tipografía para nuestro proyecto. Podemos usar estilos más obvios como el color y texto en negrita para ayudar a crear una jerarquía visual a lo largo de nuestro diseño, queremos que nuestros usuarios identifiquen al instante dónde se supone que deben buscar primero y tener muy pocos artículos luchando por nuestra atención en cualquier momento. Podríamos empezar esto creando una escala tipográfica utilizando la secuencia Fibonacci o una escala musical si nos gusta asegurar que tengamos relaciones consistentes a lo largo de nuestro diseño, dependiendo de la naturaleza de la aplicación que estamos diseñando, posible que deseemos que el tamaño del tipo aumente menos dramáticamente para el texto más grande. Entonces no es tan grande. No necesariamente necesitamos una cartelera a través de cada página, pero siempre necesitamos tomar las decisiones finales sobre el dimensionamiento sin ojos. Existen diferentes ponderaciones ópticas y diferentes colores que pueden hacer que el dimensionamiento se sienta ligeramente diferente. Tenemos que entrenar nuestro ojo. Cualquier cosa que podamos utilizar para diferenciar un encabezado, posición de color, color de borde de fondo-color, márgenes se puede utilizar todo para convertir la escala de tipo simple en Sway sofisticado sistema tipográfico. Una vez que tenemos IVA, estamos listos para finalmente escribir algún código.