Cómo observar la tipografía: fundamentos de la tipografía web

1. Introducción: La tipografía es algo mágica. Es lo que da voz a las palabras. Creo que el lenguaje cobra vida por la tipografía. No es sólo lo que está escrito, sino que es la forma que toma. Se ha dicho que es la ropa que llevan las palabras, y creo que eso es tonto y también perfecto. Hola, soy Jason Santa María. Soy director de diseño en Slate y cofundador y director creativo de A Book Apart. Ambos trabajos se centraron muy fuertemente en la palabra escrita. Obviamente, los libros están en gran medida apretados en Slate, el sitio web es publicaciones editoriales por lo que publicamos muchos artículos todos los días. Casi exclusivamente, mi trabajo se centra en torno a la tipografía, todo lo demás gira en torno a eso. Yo quiero que esta clase te enseñe a ver tipo. Quiero que entiendas que hay diferentes consideraciones que hacer a la hora de elegir un tipo de letra, y cosas que puedes buscar para asegurarte de que las elecciones que tomes te van a dar lo que necesitas para tu diseño. Espero que después de esta clase, no solo te conformes con tal vez una fuente que está en la computadora o la fuente que se usa todo el tiempo y cualquier aplicación que abras. Pero buscarás algo que se adapte a tus necesidades, algo que te ayude a comunicar mejor tu mensaje. Para poner en uso todo este conocimiento, vamos a estar haciendo un pequeño sitio web de una página sobre nosotros. Esto incluirá una foto tuya, una breve biografía, y tal vez un titular y algunos enlaces fuera de tus cuentas sociales. Yo voy a estar haciendo el proyecto junto con ustedes. Entonces, a medida que pasemos por la clase, verás las elecciones que hago cuando estoy eligiendo tipos de letra y también la forma en que creo que deben estar dispuestas para mi página. Creo que lo más difícil de la tipografía para alguien que es nuevo en ella es que se siente como si acabaras de abrir la caja de Pandora. A menudo encuentro que se puede aprender en una cantidad tremenda sobre la historia y tomar biografía de las clasificaciones a cómo se usaban las cosas hace 200 años. Pero realmente se reduce a cómo se ve algo, y desarrollar un ojo para cómo se ve algo te guiará tanto más lejos que esos otros hallazgos. Estoy tan emocionado de hablar de tipo hoy. Empecemos. 2. ¿Qué es la tipografía?: Tanto si eres un diseñador que acaba de empezar como si eres nuevo en el diseño por completo, conocimiento tipográfico es una de las cosas más grandes que puedes aprender. El web es tanto de un medio visual que todo lo que hay está básicamente conformado por tipo. Ya sea que estés diseñando o no algo tú mismo o trabajando con un diseñador, tener un vocabulario para la tipografía te dará una mayor apreciación del trabajo que están haciendo y te permitirá entender qué algo se ve como cuando es bueno o cuando es malo. Los principios de la tipografía entre la impresión y la Web son en gran medida los mismos con dos grandes excepciones. Una es la web es un medio variable. Por lo tanto, cuando se establece el tipo en una página web, alguien puede ver eso en un escritorio o una computadora portátil o una tableta o un teléfono. El modo en que estableces ese tipo, necesita entender esas condiciones y seguir siendo legible y aún así ser agradable de leer. También todo lo que cargas en una página web es un activo que necesita venir de un servidor o de algún otro lugar. Entonces, cuantas más fuentes pongas en la página, más lento va a ser tu sitio web. Lo más importante de la tipografía es que estás fijando tiempo para que alguien más lea. Ese tipo no sólo necesita ser legible, sino legible. Legibilidad significa que alguien realmente puede ver las formas de letra y entender lo que quiere decir. Legibilidad significa: “¿Quieren leerlo? ¿ Es algo que invita?” Y la forma en que fijas tu tipo, transmitirá algún tipo de mensaje. Podría ser abierto y agradable, podría ser standoffish, podría ser fuerte, podría ser descarado, podría ser suave y gentil. Todas estas cosas están envueltas en la forma en que estableces ese tipo. Cuando se trata de legibilidad, realmente estamos hablando de los principios de la tipografía. ¿ Es correcto el espaciado? ¿ El tamaño de tu tipo es lo suficientemente grande para que alguien pueda leerlo desde la distancia en la que se sienta? ¿ El color proporciona suficiente contraste para ser legible? ¿ El espaciado de las líneas es correcto para el tamaño de tipo que estás usando? Todas estas cosas se unen para básicamente equivaler a algún tipo de legibilidad. Si apenas estás empezando con la tipografía, dos de las cosas que son consideraciones fáciles de hacer son, simplemente hacer que tu tipo sea lo suficientemente grande como para ser leído y elegir una tipografía que sea adecuada para lo que estás tratando de decir. A lo que estamos apuntando es algo que se sienta cómodo. Buena tipografía se desvanece al fondo. Es una especie de pareja silenciosa para la historia que se está contando. Si está llamando la atención sobre sí mismo, está alejando la atención de la historia. Cuando se trata de tipografías y fuentes, mucha gente usa estos términos de manera intercambiable y casual, eso probablemente esté bien, pero una tipografía y una fuente son algo diferente. El tipo de letra es la obra de arte y una fuente es la forma real de ese arte. El diseñador, Nick Sherman, resumió bien esto. Un tipo de letra es a una canción como la fuente es a un MP3. Entonces, un diseñador de tipos diseñará una tipografía. Digamos, que es Proxima Nova, y esa tipografía existe en tu computadora estará en un archivo de fuente. En el caso de Proxima Nova, podría tener ProximaNova Bold.ttf. Esa es la fuente. También es útil entender la diferencia entre tipografía y letras. tipografía es todo sobre tipografía, estás usando fuentes para crear resultados reproducibles que son exactamente los mismos cada vez. letras son más parecidas a la ilustración o dibujo de formularios de letras para una especie de uso puntual. Las clasificaciones son formas de describir las tipografías. Así como podrías tener géneros de películas o canciones, también tienes una especie de géneros de tipografías y estos son representativos no sólo de cuando ocurrieron en la historia, sino de cómo se ven las formas de letra. Algunos ejemplos podrían ser de los que ya has oído hablar antes, Serif, Sans serif, Monospaced. Pero hay algunos agujeros realmente profundos que puedes pasar a la historia aquí también. Diferentes tipos de Serifs desde Spur hasta Bracketed, Estilo antiguo, Transicional y mucho de esto es probablemente más de lo que necesitas saber a diario. Pero solo debes saber que hay muchos términos por ahí para describir cómo se ven las tipografías. anatomía tipográfica es probablemente exactamente lo que crees que es. Todas las formas de letra tienen partes diferentes y hay nombres para esas partes. Este podría ser el tallo de una letra, la apertura dentro de una O, con una A o G como una o dos historias, X altura de una letra. Todas las diferentes piezas de formas de letra tienen nombres. De nuevo, es posible que no necesites saber todos estos, pero es útil entender que no solo hay nombres para estas cosas sino que algunas tipografías tienen formas de letra de aspecto diferentes que otras. Hoy vamos a armar todo esto en nuestro proyecto. Este va a ser un sitio web de una página que te describa. Consiste en un titular, un breve párrafo sobre ti y algunos enlaces fuera de tus otras cuentas de redes sociales. Voy a estar haciendo este proyecto contigo. Voy a elegir algunas tipografías que me gusten que podrían ser adecuadas para mí. Pero vas a tener que elegir algunas que sean adecuadas para ti. Una vez que termines, súbelo a la Galería de Proyectos, donde podrás ver los proyectos de los tuyos y otros alumnos también y darnos unos a otros comentarios. Estoy muy emocionado de ver lo que se te ocurre. 3. Consideraciones prácticas: Al estar trabajando a través de este proyecto, vamos a llamar algunas consideraciones técnicas que son útiles a tener en cuenta a la hora de trabajar en la web. Al trabajar en la web, en su mayoría quieres estar considerando dos cosas principales, el tamaño de tus archivos y también el tamaño de tu tipo. Tamaño de archivo significa lo grande que va a ser el archivo para transferir de un servidor a tu sitio web y el tamaño de tu tipo es solo el tamaño real en el que estableces tu tipo. Cuando se trata de tamaño de archivo, es útil pensarlo como una imagen. Cuanto más grande sea la imagen, más grande será el archivo. Para un Typeface, generalmente cuantos más caracteres contenga, más grande será. Debido a que gran parte de la web está compuesta por texto, quieres asegurarte de que tu tipo sea legible al tamaño en el que lo estás configurando. Otra cosa en la que pensar es el formato de archivo Font que estás usando. Hay algunos tipos diferentes, pero más que nada estamos usando WOFF en la web, W-O-F-F que viene en dos variedades WOFF y WOFF II. El segundo proporcionando un poco más de compresión. Utilizamos WOFF porque comprime fuentes tan pequeñas como pueden ser en este momento. Si estás utilizando un servicio como Typekit o Google Fonts, probablemente no tengas que preocuparte por ello. Te servirán el formato de archivo adecuado. Las fuentes generalmente cuestan dinero. Cada Fundición y Servicio es un poco diferente. Algunos te cobrarán en función de las vistas de página que obtenga tu sitio, algunos son gratuitos y tienen uso que no tiene límites. Si estás pagando un Tipografía, a veces el costo podría ser bastante. pesos y estilos individuales pueden estar del orden de 10 a 20 dólares a un par de cientos. Y, si los estás usando para la Web, este costo podría aumentar porque muchas fundiciones y servicios te cobran en función de las vistas de página que acumulas cada mes. Más veces que no uso el servicio como Typekit o Google Fonts porque averiguaron la licencia para mí. En ocasiones, iré directamente a una fundición y auto anfitrión, pero cada Fundición tiene sus propios acuerdos de licencia de los que también tienes que preocuparte. En general, tenga la certeza de que tiene derecho a utilizar un archivo de fuentes. Si estás usando un servicio, esto ya está abotonado para ti. Si estás comprando algo directamente de una Fundición, probablemente tengan sus propios términos. Si alguien te dio una fuente, probablemente no tengas los derechos para usarla. 4. El diseño de los tipos de letras: Algo que busco cuando estoy mirando tipos de letra. Yo quiero algo que tenga suficiente contraste. Entonces, una tipografía con menos contraste va a tener anchos muy parejos en cada uno de sus trazos. Aquí no verás mucha variación. Pero una tipografía con mucho contraste va a tener mucha más diferencia entre las partes gruesas y las partes delgadas de las letras. Dependiendo de cómo vaya a usar la tipografía, podría querer más o menos contraste. Las tipografias con mucho contraste pueden ser difíciles de usar para el texto porque tienen que hacerse tan pequeñas, las diferencias entre esos ticks y delfines se vuelven más pronunciadas y podría afectar la legibilidad. Altura X se refiere al tamaño de las letras minúsculas contra las mayúsculas. Se puede ver que aquí, la tipografía de la izquierda tiene una altura X mayor que la tipografía de la derecha. Lo que esto significa es que básicamente hay más cuerpo En Las formas de letra en la tipografía de la izquierda que el de la derecha lo que ayuda con la legibilidad. A menudo veces cuando estás configurando tareas de ejecución como lo verías en un artículo o un párrafo, esa legibilidad realmente puede sumar. Entonces, si estás configurando algo más que decir un párrafo, si estás haciendo un artículo o algún tipo de libro, quieres elegir un tipo de letra que va a ser no sólo legible sino que va a aguantar bien a ese tamaño de tipo. El tipo de letra de la derecha no es necesariamente una mala elección pero puede ser un poco difícil de leer debido al tamaño de esa altura X. Debido a que la mayor altura X le da un poco más de cuerpo, básicamente sólo hay más información para definir cómo es una letra. Algo de lo que es realmente importante hacer un seguimiento es, si tu tipografía tiene todos los personajes que necesitas muchas veces esto realmente se reduce a la puntuación. algunas tres fuentes o fuentes de visualización no tengan un conjunto de caracteres completo, posible que solo tengan letras. Pero no con el tipo set running o realmente simplemente cualquier tipo de tipo. A menudo vas a necesitar algún tipo de puntuación, necesitas comillas, necesitas periodos y comas y un conjunto de guiones. Estos se asegurarán de que cualquier tipo que quieras establecer vas a tener los formularios adecuados para. Si a tu tipografía le faltan algunas de estas marcas importantes, el navegador podría volver a caer en una tipografía diferente algún tipo de defecto y se verá realmente discordante con la tipografía que estás usando. Esto también es importante si tu texto va a ser traducido a otros idiomas. Muchos idiomas requieren algún tipo de formas acentuadas o un conjunto de caracteres más grande que podría no estar contenido en un lenguaje basado en latín en sí. Si veo que a esa tipografía le faltan estos caracteres clave, usualmente seguiré buscando. Otra consideración a hacer a la hora de elegir un tipo de letra es asegurarse de que tenga todos los pesos y estilos que necesita. Por lo general, necesitas un romano vertical y una cursiva y una audaz y eso debería ser sobre ello. Algunos tipos de letra podrían no incluir esos o podrían incluir algunos pesos adicionales más pesados, cosas semibolds como esa así así como negrita y cursiva. Normalmente no me preocupo tanto por negrita y cursiva porque es una especie de doble énfasis. Y es una cosa menos que tienes que cargar en tu página. Cuando busco un tipo.Me gusta buscar formas de letra que sean únicas o al menos sean reconocibles por lo que son. Muchas tipografías podrían tener formas de letra que son similares entre sí y eso está bien. Eso es lo que los hace cohesivos. Pero, cuando una forma de letra puede confundirse como otra, eso puede afectar la legibilidad. Entonces, en un tipo de letra como Helvetica que no tiene mucha variabilidad y son formas de letra, medida que ese tipo se hace más pequeño es más fácil confundir algunas de esas formas de letra una D mayúscula podría parecer un cero. A mí me gusta buscar tipos de letra que sean una especie de caballos de batalla, cosas que puedo usar en una variedad de tamaños. Entonces, un tipo de letra que se verá bien para un texto en ejecución pero también bueno para un titular, puede ser bueno para una fecha en una entrada de blog o navegación en un sitio web. La forma más fácil de determinar eso, es buscar algunas de estas características. ¿ Tiene una altura X lo suficientemente alta? ¿ Son reconocibles las formas de letra? Y luego realmente cavar y empezar a jugar con él en una variedad de tamaños. Entonces, ¿cuáles son algunas banderas rojas de las que quieres estar al tanto al buscar tipografías? Hablamos de la consistencia del trazo pero también hay consistencia de las formas de letras. ¿ Alguno de los formularios se ve fuera de lugar? ¿ Parecen como si fueran de una fuente diferente o como si estuvieran haciendo sus propias cosas? A veces simplemente se baja a sentir cuando ves todas las letras alineadas y viendo cómo se ven unas contra otras. Pero, algunas de las piezas deberían sentir como si fueran parte de una familia. Las aberturas y letras la forma en que un descendiente cae por debajo de una línea, del tamaño de una letra mayúscula. Estas cosas deberían sentir como si fueran consistentes y parte de un sistema. Normalmente trato de evitar fuentes a las que llamo readymades. Cosas que parecen tener diseño ya horneado. tipografía es realmente de donde viene el diseño y si la fuente tiene demasiada opinión va a ser difícil alejarse de eso. Esta podría ser una fuente que es realmente grungy o realmente extrema. Esas cosas están como empacadas en la tipografía y no puedes separar tu diseño de ellas. La mayoría de las buenas tipografías cuestan dinero. Muchas fundiciones independientes se ganan la vida de vender estos tipos de letra. Pero también hay muchos servicios ahí fuera que brindan nivel de entrada y planes gratuitos. Las fuentes de Google tendrán un montón de tipos de letra que son vez buenas y malas pero sin duda asequibles. Typekit otro servicio tiene un plan gratuito así como tutores de pago y muchas de las tipografías en ahí son realmente buenas también. Hay fuentes gratuitas que están bien diseñadas pero hay muchas fuentes gratuitas que no están bien diseñadas. Siempre es bueno pagar por la calidad si puedes pagarla, sobre todo si estás apoyando una fundición independiente. Lo bueno también de pagar por una fuente es que otras personas pueden no haber pagado por una fuente, así que, podrías tener una tipografía que otras personas no están usando. Aunque no quieras pagar por fuentes, algunas de las que vienen en tu computadora están totalmente bien de usar también. Helvetica se usa mucho pero sigue siendo una tipografía realmente bonita. Georgia, Verdana incluso Times, todos estos tienen su lugar. Entonces, ahora miramos algunas cosas a tener en cuenta y algunas banderas rojas a evitar. Pero ahora vamos a cavar en realmente elegir un tipo de letra. 5. Inspiración para tipos de letras: Algunas personas guardan imágenes de cortes de pelo que tal vez les guste tener algún día o de la forma en que podría gustarle darle estilo a una habitación de su casa. Guardo páginas de tipografías que me gustaría usar algún día. Sigo al día con las noticias de tipo porque me interesan mucho los nuevos desarrollos y las nuevas tipografías que salen, y me gusta marcar tipografías que podrían ser útiles en futuros proyectos. Entonces, colecciono tipografías en Pinterest. La mayoría de estos están divididos por clasificaciones para san serif a serif, script, e incluso algunas decorativas. A mí me gusta hacer un seguimiento de las tipografías de esta manera porque no siempre tengo necesidad de ellas de inmediato, pero podría que en el futuro, y algunas de estas realmente me hablan por diferentes razones. Podría gustarme que algo sea realmente extremadamente amplio y excéntrico, o que simplemente tenga algunas formas elegantes realmente interesantes. No sé para qué usaría esto pero me habla y es útil guardarlo en algún lugar para uso futuro. Por lo que estos en particular, son un poco más decorativos. Algunos de estos podrían virar un poco hacia el territorio ya hecho, pero todo va a depender de cómo se usan en realidad. Porque me mantengo al día en tipografía, encuentro que estos tableros suelen ser mi primera parada cuando busco una tipografía, porque he recogido lo suficiente como para saber que hay mucho aquí que me gusta, y es más fácil simplemente pasar por algunas de estas primer tipo de como están pre-aprobados para al menos consideración en lugar de simplemente saltar a grandes listados de tipos de letra en otro lugar. Estas son algunas de mis tipografías favoritas en este momento. Esa lista de tipos de letra que quiero usar mucho los cambios, pero estos son los que me han hablado de alguna manera. Esta primera, Harriet, es una tipografía serif realmente interesante, muy contrastada. Se puede ver que tiene un montón de looks diferentes dependiendo de cómo quieras usarlo. Desde usarla realmente pesada y todas las gorras hasta algunos de los usos itálicos. Tiene un hermoso flujo hacia ella y algunas de estas formas de letra son decorativas sin ser demasiado sobrecargables. Si estás cansado de usar Helvetica pero aún así quieres un san serif realmente claro y agradable, Proxima Nova es una opción fantástica. Los formularios de letras son muy abiertos, hay una altura X muy grande, y viene en una variedad de pesos y tamaños también. De regular a condensada y comprimida, las formas de letra son un poco más abiertas sobre todo los espacios abiertos como el interior de C o un E. No estarían tan cerradas como lo es Helvetica. Mallory es otro san serif realmente bonito y algo así como un estilo más nuevo. Tiene algunas pequeñas características realmente interesantes que le dan un poco de peculiaridad y un poco de singularidad. Lo que es bonito también es que este tipo de letra fue ideado para funcionar muy bien para tamaños pequeños, por lo que en realidad lo puedes ver aquí en el margen en algunos ajustes más pequeños, y aguanta muy, muy bien para texto como este. No hay pautas reales para lo que funcionaría mejor para el texto, ya sea de tamaño pequeño o grande, realmente depende de cómo se vean las formas de letra. Esto funciona bien porque algunas de las cosas que hemos mirado antes tiene una altura X muy bonita y algunas formas de letra realmente abiertas, para que cuando sí se pone pequeña, sea muy legible. Se pueden ver todas esas formas de letra muy claramente, y se puede decir lo que son y leerlas. Pero eso no significa necesariamente que un serif tampoco lo haría mal en la situación. La entrada es una familia monospace realmente fantástica que también es personalizable. Podrás personalizar cómo quieres que se vean algunos de los formularios de letras cuando haya diferentes versiones. Hay variantes de cosas como el número uno o un cero. Las fuentes monoespaciales se suelen usar para aplicaciones de codificación, y ésta es en realidad la que uso cuando codifico sitios web. Pero este es uno muy interesante, y que aguanta muy bien para el texto en un sitio web también. La fuente monospace no es necesariamente san serif o serif para realmente cualquier cosa que no sea las formas de letra ocupan la misma cantidad exacta de espacio para cada personaje. Entonces, cada personaje ocupa exactamente la misma cantidad de espacio horizontal, modo que las letras siempre se van a alinear en una cuadrícula muy específica. Tanto es así que en realidad puedes contar las letras y alinear y predecir exactamente cuántas van a encajar, y siempre será lo mismo. El flete es una superfamilia, y lo que eso generalmente significa es que, hay más de un tipo de tipografía dentro de esa familia que podría ser un serif y un san serif. flete es realmente bonito porque la superfamilia incluye no solo texto en san serif sino algunas tipografías de uso más grandes así como una pantalla. Entonces, esta es en realidad una de esas familias en las que puedes quedarte por completo y solo par decir, el san serif con el serif y probablemente lo llaman un día. El flete tiene algunas cartas realmente hermosas pero una de mis cosas más favoritas al respecto es, tiene una cursiva fantástica. Simplemente son muy expresivos y me siento súper encantadora. Simplemente les tienen una mirada muy interesante. En el tema de estilos adicionales, si estás configurando algo para ejecutar texto suele ser útil tener una cursiva realmente bonita y una negrita, que puedas cambiar a enfatizar las cosas cuando lo necesites. Muchas veces estas son bastante sencillas y no necesariamente tienes que preocuparte por ellas. Pero esto es solo otra consideración a hacer a la hora de elegir tu tipo de letra. Ten la certeza de que la cursiva parece que es cursiva, y es lo suficientemente distinta de la vertical normal, y de que el audaz se ve lo suficientemente audaz como para destacarse. Si quieres mantenerte al día de la tipografía, suele ser útil encontrar algunas fundiciones que te gusten e inscribirte en sus boletines informativos. Pero hay una serie de sitios web por ahí también que publican noticias tipo. Uno de mis favoritos es, Fuentes en uso, que no solo muestra tipos de letra sino proyectos en los que se usan. 6. Encuentra el tipo de letra correcto: Entonces, a la hora de elegir tipos de letra para sus propios fines, hay algunas formas de abordarlo. Personalmente me gustan un poco las cosas abstractas. A mí me gusta escribir algunos adjetivos de lo que busco y luego encontrar tipos de letra que se parezcan a esas cosas. No está tan lejos de pensar en cómo podrías acercarte a un atuendo, o a una silla en tu habitación, o incluso estilos musicales. Entonces, si pensamos en esto como una silla, digamos que queremos algo moderno, podría ser muy mínimo. Podría no ser muy adorado de ninguna manera. Podría usar madera, y podría revelar mucha de esa madera. A lo mejor no hay mucho color. A lo mejor la forma es muy elegante. Al pensar en adjetivos como este, te ayuda a encontrar esos atributos físicos que podrían encarnar esas cosas. Entonces, si estás buscando algo que sea fuerte y poderoso, podrías encontrar formas de letra que sean realmente gruesas. Si estás buscando algo que tenga un poco de finura o un poco de elegancia, tal vez esas formas de letra sean delgadas o les tengan un poco de guión. Son de bajo flujo. Este ejercicio con adjetivos es muy similar. Si alguna vez has hecho un ejercicio de branding para tu empresa, encuentras palabras que podrían describir a esa empresa o si tienes la tarea de presentar a un amigo a alguien nuevo, ¿cómo podrías describirlas? Por lo que es una abreviatura fácil hacer una correlación uno a uno entre un adjetivo y una tipografía. Pero aquí es donde la tipografía se pone realmente interesante. También puedes usar ese mismo ejercicio para encontrar contrastes para yuxtaponar esos adjetivos usando la tipografía de una manera diferente. Una cosa en la que es fácil caer es encontrar tipografía que es una especie de lista que se siente un poco demasiado cerca de lo que es que estás tratando de emular. Si estás diseñando algo para una película de terror, posible que encuentres la tipografía que en realidad está goteando sangre o si estabas diseñando un logotipo para un patio de recreo, tal vez esto esté conformado por bloques de construcción para niños. Esas cosas sólo pueden decir realmente eso una cosa. Ready-mades sólo van a poder ser una cosa. Entonces, es más útil encontrar una tipografía que tenga algunas de esas cualidades, pero luego sacas a través del diseño esos adjetivos. Debido a que la tipografía es una especie de voz de tu diseño, quieres asegurarte de que tu diseño tenga su propia identidad única. Entonces, si estás usando una fuente de bloque de construcción, también lo harían todos los demás que estén haciendo un logotipo de patio infantil. Es importante poder sobresalir. Entonces, busque algunos de los otros atributos que podrían ser útiles para encarnar también. He reunido aquí algunas tipografías que evocan algunos de los adjetivos que estoy viendo. En primer lugar, tenemos algo que es un poco más literario. Este tipo de luce como si fueran leídos en casa en un libro o en una revista. Éstas se leería en párrafos largos. Muchos de estos tienen serifs y especie de piezas tipo libro antiguo parecidas. Dependiendo de lo que necesites, podría ser difícil elegir realmente entre una tipografía en este tipo de uso. El mejor modo de mirarlos es poner algún tipo en ellos y ver cómo se siente leer en ellos. Aquí te dejamos algunas que he marcado como elegantes. Muchas veces, esto suele significar formas de letra muy simples y ya sea algunas formas de letra de alto contraste o algunas formas de letra muy delgadas. Equiparamos esto con algo que suele ser elegante o tal vez un poco caro. También puedes lograr esto con algunas tipografías de script. Debido a esa clase de mirada fluida para ellos, sienten que son un poco más de alto precio. Si quieres evocar potencia o fuerza, podrías buscar algunas formas de letra muy densas. No sólo audaz, sino formas de letras que tienen espacios muy cerrados. Estos podrían incluir trazos gruesos o letras muy apretadas. Algunas serifs de estilo antiguo, especialmente las serifs de losas, lo hacen muy bien. También puedes mirar a algunas de las serifs sans más gruesas y pesadas, tanto en algunos de los góticos como en algunos de los nuevos sans serifs de estilo. Como cabría esperar, contrastar duro con algo suave o ligero a menudo puede significar simplemente usar un peso más ligero de la misma tipografía. Esto tiene algunas correlaciones con lo que llamaríamos elegante en que algunas de estas formas de letra son delgadas. Pero sólo ser suave también puede significar aireado. Entonces, busca formas de letra que tengan grandes espacios abiertos que se sientan como flotantes. Una forma de asegurarte de que no estás virando demasiado hacia un ya hecho es ver si esa tipografía se puede usar para otra cosa. Lo bonito aquí es que sí tienes cierta flexibilidad. No hay reglas reales ni elecciones correctas en la topografía. Simplemente hay opciones diferentes. Entonces, lo que es ligero y aireado para alguien también podría ser elegante para otra persona. Hay muchas maneras diferentes de llegar a la misma sensación. Entonces, cuando pienso en cómo me describiría a mí mismo, los adjetivos que conformarían mi diseño, pienso en cómo me considero como diseñador. Siento que soy una especie de cuello azul, no súper intelectual sino un poco libroso, más bien como un libro de tapa blanda en lugar de una edición especial de un libro. Entonces, no estoy puesto en un serif o un sans serif para empezar, pero quiero algo que se sienta un poco libroso pero siendo realmente una especie de denso y fuerte también. 7. Elige tus tipos de letras: Entonces, una vez que tenemos algunos adjetivos establecidos y tal vez incluso hemos mirado algunos tipos de letra o tenemos una idea general de lo que estamos buscando, ¿a dónde vamos después? He elaborado una lista de sitios web que me gustan cuando estoy buscando tipo. Algunas de estas son fundiciones, algunas de ellas son blogs y otras fuentes de noticias. Los he incluido en la sección de recursos de la clase. Typekit tiene un mecanismo de filtrado realmente práctico donde puedes venir y filtrar por clasificación, así como el uso previsto. Entonces, di que quiero un sans serif para párrafos, hago clic en esos botones, quiero asegurarme de que tal vez tenga una especie de peso muy normal, el ancho es normal, tal vez quiero un contraste muy bajo, y Me dan un montón de opciones realmente buenas que luego puedo echar un vistazo con más detalle. Ya sea que tengas una cuenta o no, esto es gratuito de usar al menos para navegar. Generalmente divido el tipo en dos categorías; Tipo para un Momento y Tipo para Vivir con. Type to Live With es el tipo de cosas en las que hay que leer mucho. Entonces, esto podría ser un artículo o mucho texto fluido que verías en un libro o una revista. Tipo para un Momento es una especie de titular. Esto podría ser un poco más expresivo y tiene un poco más de flexibilidad para tener formas de letra interesantes o cosas que no necesariamente aguantarían muchos textos pero son buenas para unas pocas palabras. Debido a que tienes mucha más flexibilidad con estas tipográficas por un momento, puedes ser un poco más expresivo con ellas. Podría usar una tipografía de script o algo que sea lo que llamaríamos tipografía de visualización. En la tipografía de visualización, normalmente solo utilizarías grandes y para una cantidad corta de texto. No querrías poner un párrafo en él, pero es bueno para un titular. Tienes la opción de usar un tipo de letra para tu diseño, pero muchas veces, es posible que quieras emparejarte con otra cosa. Esto es bastante común cuando se trabaja en la web o realmente cualquier tipo de diseño de publicación. Podríamos pasar mucho tiempo solos en el emparejamiento de tipografía, pero como algunas pautas generales, a menudo se quiere buscar contraste. Si un tipo de letra ya está haciendo una cosa por ti, probablemente no necesites elegir un tipo de letra que haga algo similar. Entonces, si se usa un sans serif, una manera fácil de contrastar que es elegir un serif. De igual manera, si estás eligiendo un serif, ve con un sans serif por otra cosa. También hay una especie de piezas de esas cartas que puedes recoger. Hay una naturaleza esquelética a la forma en que se ve una carta. A lo mejor es la redondez de la forma de letra, la apertura de un personaje, la altura de algo o el grosor de algo, y se puede hacer eco de eso en lo que se empareja. Algunos de los errores más grandes que veo más a menudo cuando se trata emparejamiento de tipos es elegir algo que tenga demasiados rasgos similares. Dos serifs juntos o dos sans serifs juntos que hacen cosas muy similares por lo general no son tan útiles. Lo que buscamos es construir una paleta realmente fuerte para que todo en esa paleta esté haciendo un trabajo diferente y apoyando su propio peso. Con el tiempo, probablemente vas a empezar a desarrollar tu propia paleta personal de tipos de letra que te gustan. No hay nada de malo en usar la misma tipografía una y otra vez. De hecho, en realidad es bastante gratificante encontrar nuevos usos y nuevas formas de usar ese tipo de letra. No sientas que tienes que probar algo nuevo cada vez. Probablemente tengo alrededor de 10 tipos de letra que uso a menudo cuando estoy iniciando un proyecto. A veces termino usando esos todo el camino hasta el final del proyecto, pero a veces simplemente se montan y evocan una sensación que busco desde el principio. Esta suele ser una taquigrafía útil porque te permite entrar en el diseño más rápido y no gastar todo el tiempo solo buscando un tipo de letra. Entonces, esos tipos de letra podrían evocar algo así como fuerza o simplemente ser realmente buenos para el texto. Ahora que tengo una bastante buena idea de lo que busco, estoy listo para empezar a jugar un poco con tipo para ver cómo va a funcionar con contenido que tengo. He agarrado una bio que quiero poner en mi Sitio Web y lo que normalmente me gusta hacer es reunir todo el contenido que sé que voy a estar usando y tipo de ponerlo todo frente a mí. Algo así como estaba reuniendo los ingredientes para cocinar algo. Entonces, sé que voy a tener algún tipo de titular que para mí va a ser mi nombre y mi ocupación y mi ubicación, y luego un párrafo corto que es una especie de bio para mí y lo que hago. De inmediato al bate, podemos decir que tipo de tenemos nuestro Tipo por un Momento y Tipo con el que Vivir. Tienes un párrafo que queremos que alguien lea, así que esto va a ser más como el texto de un artículo, y luego tenemos algo más que es más como un titular. Probablemente podríamos ser un poco más expresivos, este tipo probablemente será un poco más grande, y tal vez esto sea una especie de ancla visual de nuestra pieza. Entonces, empecemos simplemente asumiendo que esto será un poco más grande. Podemos hacerlo más grande y luego podemos empezar a probar algunos de los tipos de letra que encontramos antes. Tienes un par de opciones sobre cómo proceder. Podrías empezar con tu tipo de cuerpo y encontrar un tipo de letra va a ser realmente agradable para eso y luego trabajar en el titular después o puedes empezar con el titular y trabajar en el tipo de cuerpo siguiente. Para mi pieza, porque tenemos un tipo de titular tan grande, quiero dejar que eso sea más un punto focal. Entonces, voy a empezar por ahí. Algunas de las caras tipo que me gustan tienen pesos muy densos. Este es un serif y tiene algún contraste realmente agradable, así como algunas áreas de espaciado realmente densas. Se especie de atrapa en mucho del espacio en blanco entre las letras. Se puede ver cómo la E está muy cerrada y no hay mucho espacio dentro de las aberturas y letras como la D y la P y la H. Esta otra tipográfica es realmente agradable, también. Se trata de una especie muy, muy densa de blocky sans serif, siente que puede ser un tractor trailer o algo así. Ambos se ven realmente bonitos, pero creo que me estoy inclinando más hacia el serif. mí me gusta que traiga un poco de esa cualidad bookish de la que estaba hablando, pero tampoco es demasiado decorativa. Ahora que sé que voy a ir con este serif, veamos nuestro tipo de cuerpo. Entonces, una forma por la que podríamos ir es solo contrastar el serif. Podríamos ir con algún tipo de sans serif que se ve muy bien, digamos fuente sans. Es una tipografía que creo que se ve bastante bien. Es legible en tamaños pequeños, tiene un ritmo realmente agradable. cartas están realmente bien resueltas. Tiene todos los pesos y estilos que necesito y proporciona un contraste realmente agradable a nuestro serif para el titular. También podríamos ir en una dirección diferente. Podríamos probar algo que es un serif también, algo que tiene tal vez un sentimiento diferente a nuestro titular, algo que es un poco más descarado y tiene un poco más de la excentricidad a ella. Tiene algunas formas de letra que no necesariamente están perfectamente cuadradas y tienen un poco de carácter para ellos. Pero esto podría estar un poco demasiado cerca de nuestro titular, no sólo porque es un serif, sino porque realmente no proporciona esa mucha más variabilidad que si solo tuviéramos que usar nuestro serif desde el titular como cuerpo tipo dos. Creo que prefiero ir con algo más de contraste en nuestro tipo de cuerpo. El sans serif brinda contraste que busco, pero también cumple con todos mis requisitos técnicos. Ahora que hemos seleccionado algunas tipográficas, es hora de mirar cómo realmente queremos un tipografiado esto. Vamos a ver el espaciado de líneas y el tamaño de tipo, así como la alineación con los demás elementos de nuestra página, notablemente una foto y algunos enlaces adicionales fuera de nuestro sitio. 8. Diseño: tamaño y espaciado: Entonces, hoy en día, estamos enfocados principalmente en hacer una comp de diseño en lugar de una página web, pero el proceso que estamos usando es básicamente el mismo. Estamos procediendo de alguna manera tomando en consideración todas las cosas que necesitaríamos si estuviéramos diseñando un sitio web. Entonces, a pesar de que estoy haciendo esto en una aplicación de diseño de escritorio, estoy pensando en cómo tendría que verse esto en la web. En la sección de recursos, publicaré algunos enlaces de cómo puedes realmente conseguir esas fuentes en tu sitio web, ya sea que las estés auto hospedando tú mismo o usando un servicio como Typekit. Entonces, ahora que tenemos nuestras tipografías elegidas, realmente profundizamos en la tipografía misma. tipografía es más de la práctica de fijar el tipo y la combinación de todas esas decisiones que hemos tomado. Aquí es donde realmente se une el diseño. Entonces, tenemos nuestra tipografía titular y nuestra tipografía de cuerpo. Queremos empezar a pensar en cómo estos interactúan con los demás elementos de nuestra página. Entonces, sabemos que vamos a estar usando una foto, así que tenemos una gran foto mía que sabemos que va a estar en la página, y podríamos enmascarar esto en una forma más pequeña después. Pero podemos empezar a pensar en cómo va a funcionar realmente este diseño. He desarrollado una cuadrícula realmente simple para ayudarnos a dimensionar y alinear las cosas. Una tipografía titular puede ser grande porque no se va a leer por tanto tiempo, así que podemos hacer eso tan grande como queramos. Tenemos que asegurarnos de que la altura de la línea también nos dé suficiente aire, que el espaciado entre nuestras líneas no se sienta demasiado apretado y congestionado. En general, cuando hablamos de altura de línea para texto en ejecución, largas sean tus líneas, más altura de línea vas a necesitar entre ellas. Básicamente, porque es un poco más difícil para tu ojo terminar en una línea y volver al principio de la siguiente si están demasiado apretados. Para la longitud de la línea, queremos que caiga en algún lugar a lo largo de un espectro de unos 45 a 75 caracteres más o menos por línea. Esa no es una regla dura y rápida pero es una pauta bastante buena. Podemos espaciar esto un poco más. Tenemos unos términos aquí que sabemos que son o libros o cosas que tendrán que ser cursiva porque son publicaciones. Entonces, es una buena cosa elegimos la tipografía que tiene una cursiva bonita porque estamos usando eso bastante aquí. Entonces, tenemos una cuadrícula realmente simple configurada aquí, sabemos que nuestro tipo va a ser alrededor de ese tiempo, y también queremos tener unos cuantos enlaces a algunos de nuestros perfiles en otro lugar. Para mí, quería tener un enlace para contacto para enviarme un correo electrónico, así como mis páginas de Twitter y Dribbble. Ahora bien, no necesariamente necesitamos que nuestro párrafo y nuestro titular tengan el mismo ancho. De hecho, nuestro párrafo probablemente podría ser un poco más estrecho, sobre todo si subimos estos vínculos al lado de él. Esto crea un buen equilibrio. Tenemos una buena resolución y una boxiness a este layout que se siente bastante bien. Si queremos llevar esta imagen al diseño, tenemos algunas opciones. Podemos encajarlo dentro de este diseño en algún lugar, tal vez entre el titular y el párrafo, podemos sacarlo a un lado, o permitir que estos elementos se superpongan entre sí. Tengo algunas pautas que me gusta seguir cuando estoy diseñando. En general, casi siempre haré las cosas un poco más grandes si me temo que estén siendo demasiado pequeñas. No siento que realmente puedas ir demasiado grande en la web porque la legibilidad suele ser una preocupación dependiendo de los diferentes tamaños de pantalla. No siempre es algo difícil y rápido de seguir a la hora de diseñar, pero en general, estoy a favor de que las cosas sean más grandes en lugar de que sean demasiado pequeñas. También desea configurar alguna jerarquía a su información. Piensa en cómo quieres que alguien lea realmente esto. Tenemos nuestro titular, eso va a ser más grande y encima, así que es bastante obvio que van a empezar por ahí lo más probable. Más allá de eso, queremos que tal vez salten al párrafo y luego encuentren nuestra información secundaria después de eso. El modo en que hemos presentado esto, así como el tamaño de los elementos, determina cómo va ese flujo en realidad. El gran cosa viene primero, luego este bloque o un poco de contenido vendrá segundo, y luego nuestra lista más pequeña fuera del lado derecho vendrá última. El caso en el que estableces tu tipo es realmente importante. Algunas personas podrían poner un titular en todos los topes, que sin duda es una opción. Todas las gorras pueden ser gritos, no solo siente que podrías estar gritando en tu diseño, sino que reduce un poco la legibilidad. Estas formas de letras más grandes sienten que ocupan aproximadamente la misma cantidad de espacio, son un poco más difíciles de distinguir. En general, uso todos los gorros con moderación cuando podría ser sólo una palabra o podría mejorar el significado de algo. Entonces, estos enlaces hacia un lado, esto estaría bien. Podríamos poner estos en todas las gorras y siento que se verían bien, pero tal vez no nuestro titular. Si tu texto tiene algún carácter especial o puntuación como comillas y apóstrofes, quieres tener en cuenta que estás usando los correctos. Un error común es usar lo que se llama citas tontas. Estos suelen parecer comillas rectas y apóstrofos. Son un vestibulo remanente de la era de las máquinas de escribir cuando el espacio en un teclado era realmente valioso. Entonces, necesitan hacer la misma marca para abrir y cerrar comillas. Pero la buena tipografía usa citas inteligentes, estas rizadas. Esto encaja más en línea con el tono de la tipografía que estás usando y no sobresalgas como algún error. Siempre que sea posible, desea utilizar comillas inteligentes y apóstrofos. A menudo se dice que la música es realmente el espacio entre las notas, y la tipografía suele tratarse del espacio entre las letras. Cuando se trata de tu diseño, el espacio alrededor de los elementos a menudo puede ser tan importante como los propios elementos. Para darle al diseño un poco de espacio para respirar y al lector un poco de espacio para entender y comprender lo que hay delante de ellos, es bueno no empacar demasiado el diseño. No quieres ir de borde a borde con todos tus elementos o tener tu tipo a en su cara. Se quiere darles un poco de espacio para respirar y para encontrar su camino a través de las páginas mismas. Cuando me preocupa si algo no es del todo legible o si quiero asegurarme de que el tamaño de tipo que estoy usando sea correcto, muchas veces traigo a un amigo para que me dé una rápida comprobación de tripa para asegurarme de que sea legible y que las tipografías que estoy usando son legibles. Entonces, jugué un poco más con mi maquetación. Decidí hacer que la foto no sólo se siente en un círculo, sino que se superponga por el tipo. Creo que esto crea un poco de interés y un poco de punto focal y conecta un poco mejor los elementos. Mi titular se hizo un poco más pequeño y ahora está ocupando cerca de la mitad de nuestro diseño. El párrafo de abajo un poco más pequeño también, y nuestros enlaces hacia un lado ahora tienen iconos para ir con ellos, sólo por un poco más de interés visual. Debido a que estos elementos se superponen, necesito asegurarme de que haya suficiente contraste para que este tipo pueda leerse encima de mi foto. Entonces, tal vez lo que necesito hacer es hacer un color de fondo un poco más oscuro, la foto puede volver a mezclarse un poco, y luego mi tipo en la parte superior se puede revertir en blanco. El titular también, tal vez podamos darle un color a esto y hacerlo un poco más brillante en sí mismo. Estos enlaces pueden ser secundarios, tal vez también sean blancos, o tal vez solo una versión de cortesía de nuestra paleta de fondo. Esto nos da suficiente contraste para que el tipo se pueda leer encima de la imagen. La imagen es lo suficientemente grande como para que no tengamos que preocuparnos de que sea tan visible. Puede ser más de un bonito elemento de diseño sutil al fondo. Nuestro tipo sigue siendo grande y legible, y proporcionamos un poco de bonito contraste e interés con las opciones de color. Ahora que tenemos algo que está funcionando bien, podríamos jugar con algunas otras opciones de color. A lo mejor no queremos este azulado oscuro, pero vamos con algo un poco más brillante. Nuestro amarillo no lee tan bien en la parte superior de la pantalla, no hay tanto contraste. El blanco sigue siendo más bonito, bastante bueno. A lo mejor queremos ir con algo más cálido. Eso funciona bastante bien. El color salmón rojo-naranja tiene bastante buen contraste con nuestro titular. El blanco todavía se lee bastante bien y nuestros enlaces por aquí se están aguantando muy bien. Eso también me gusta. Entonces, antes, cuando estamos hablando de ready-mades ya tener diseño panado-in, aquí es de donde realmente viene el diseño. Es la disposición de los elementos en la página. Son las opciones de tipo de letra, nuestras opciones de color, y se puede ver incluso a través de estos diferentes colores que estamos eligiendo, estamos dando al diseño una sensación diferente. El color tiene su propia historia histórica de teoría y ethos en torno a su uso. Diferentes colores pueden significar cosas diferentes en diferentes culturas, y diferentes colores juntos también pueden significar cosas diferentes. Entonces, al elegir un color, también le estás dando al diseño algún tipo de sensación. Esto es lo que quieres buscar, en lugar de encontrar una tipografía que tenga el diseño ya horneado, porque realmente no puedes separarlo de eso. Terminó gustando este azulado uno de los mejores. Siento que tiene el contraste que busco, y me gusta mucho la forma en que los colores están trabajando juntos. Ahora que me di cuenta básicamente de cómo creo que debería ser el tamaño del escritorio, trabajo a través de cómo podrían verse algunos de los otros lienzos, también. Aquí tenemos una tableta y también un teléfono móvil. Si este fuera un sitio más grande o una publicación, podría haber empezado primero con la vista móvil porque muchas veces quieres comenzar con la versión más pequeña y la más simple y rápida, para luego mejorar progresivamente desde ahí. Pero como sabía que este iba a ser un sitio web bastante sencillo, no me importó empezar primero con la versión de escritorio. Creo que este proyecto realmente ilustra cómo la jerarquía de la información y el diseño realmente pueden desempeñar una parte importante de su proceso de diseño. No se trata solo de qué tipo de letra estás eligiendo, sino de cómo lo usas en tu diseño. Estas tipografías funcionan bien juntas porque no sólo proporcionan contraste, sino que ambas son muy claras y legibles y creo legibles. Espero que también explores algo de esto en tus proyectos. lo mejor tu titular es solo tu nombre, tal vez sea más largo, tal vez tengas mucho más de una biografía que quieres poner ahí fuera, tal vez no quieras usar una foto en absoluto. Estas son todas consideraciones que harán que tu sitio y tu diseño se sincronicen o no. 9. Reflexiones finales: Muchas gracias por tomar esta clase. Espero que veas cuánta tipografía realmente puede agregar a tu diseño y realmente hacer que lo que quieres decir sea mucho mejor. tipografía es una práctica que realmente recompensa mucha más investigación y profundizando en los detalles. Espero que a través de esta clase, hayas visto cómo algunas de esas piezas de diseño desde las formas de letra hasta la puntuación hasta el solo uso de tipografías realmente pueden hacer o romper tus diseños. Si buscas algo para abordar a continuación, quizá mira algunos diseños que te gustan que están fuera en el mundo. Vea qué tipos de letra están usando, qué tipos de letra están emparejando y algunas de las consideraciones de diseño que han hecho. Usa una extensión como ninja de fuente web, que he enlazado en los recursos, cursor sobre cualquier pieza de tipo que esté en la página y te dirá qué es. También puedes hacer clic en él y escribir lo que quieras en esa misma fuente. Esta es a menudo una manera realmente buena de meterse en el cerebro de un diseñador y también averiguar cómo hacer que tus diseños sean mejores. Me encantaría ver tus proyectos. Por favor subirlos a la galería de proyectos para que nos podamos dar retroalimentación. Gracias otra vez. Espero ver sus proyectos. 10. ¿Qué sigue?: manera.