Share
¿La tipografía es una de las habilidades más importantes que puede tener un diseñador? los veteranos de la industria pasan años perfeccionando su técnica y usted podría pasar años en una universidad estudiando el tema; Pero, ¿dónde es el mejor lugar para comenzar realmente? Hoy, en la última adición a nuestra serie Basix, presentamos tipografía para principiantes explicando una cosa simple: ¿Por qué la tipografía importa tanto en el diseño web?.
La tipografía es una disciplina antigua que puede explicarse más simplemente como el arte de organizar y diseñar la palabra escrita. Los primeros ejemplos de tipografía se remontan hasta 1800 a. C. con los antiguos griegos, pero la era moderna de la tipografía está ligada a mediados del siglo XV cuando se inventó la imprenta..
Mantendré corta la lección de historia aquí: la tipografía es importante por una razón: ¿porque es la forma principal en que los diseñadores pueden comunicarse con los lectores? Ya sea que el medio sea un libro, un anuncio impreso, una cartelera o un programa de televisión, la tipografía es importante porque es la encarnación del lenguaje visual..
El 96% de Internet se compone de información escrita o texto. Este texto se distribuye en grandes y pequeños fragmentos de información que se distribuyen en diferentes páginas con diferentes formatos..
El formato de toda esta información escrita en el diseño de un sitio web es lo que llamamos "tipografía web".
La tipografía es la parte más importante de un diseño web porque influye en la forma en que un sitio web se comunica con los lectores. ¿Los principales usos del texto en la web son los principales métodos de comunicación? por lo que es natural que la forma en que un diseñador web decida organizar el tipo en una página web sea crucial para la efectividad de ese sitio..
Vemos su uso en todas partes, ya que todos los sitios web confían en la tipografía para transmitir su mensaje a los lectores. Sin embargo, hay algunos diseñadores web que tienden a pasar por alto la importancia inevitable de la tipografía y se centran solo en la parte visual o gráfica del diseño web..
El uso de la tipografía para medios impresos como folletos, volantes, revistas, libros o medios al aire libre como carteles y carteles es diferente a usarlo para la pantalla de la computadora. En términos de tipografía, ¿la pantalla es un medio completamente diferente? y como con cualquier tipo de diseño, realmente necesita considerar el medio por el cual las personas verán su diseño. Considera las siguientes dos imágenes:
La imagen superior es un cartel para la banda, The Black Keys. La imagen inferior es su sitio web. Misma banda, enfoque diferente a la tipografía. ¿Por qué? Porque el medio (y por lo tanto el mensaje y la intención) para cada diseño es diferente. Uno es promover un concierto, el otro es un portal para todo tipo de información sobre la banda..
Cuando utiliza la tipografía en un diseño impreso para algo como un libro, el hecho de que se vea desde una distancia relativamente cercana le brinda la posibilidad de jugar con las fuentes bastante porque no perjudicará mucho la legibilidad. Si está utilizando la tipografía para medios de comunicación al aire libre como una valla publicitaria o un póster, sabe que el lector solo tiene una fracción de tiempo para ver la pizarra y consumir lo que se está comunicando, por lo que no se mete con el ajuste fino de la tipografía. Mucho. En su lugar, podría centrarse en la impresión inicial y en la legibilidad del tipo..
Sin embargo, con un sitio web hay objetivos totalmente diferentes en mente. El diseño de tipografía para computadoras y la web requiere que el diseñador divida mucha información en diferentes segmentos y subsegmentos (micro y macro tipografía). Además, una página web no es constante, ya que tiene que aparecer en diferentes navegadores, diferentes dispositivos de acceso a Internet y con diferentes resoluciones de pantalla. Por lo tanto, la tipografía web tiene que tratar un buen número de problemas en comparación con otros medios. Por lo tanto, al elegir la tipografía para su sitio web, un diseñador debe considerar la compatibilidad y legibilidad entre plataformas. Estas son solo algunas de las preocupaciones que un diseñador web debe tener en cuenta al acercarse a un sitio web..
Cuando se trata de diseño web, la tipografía no se limita a elegir una fuente y distribuirla; Es el Arte de dividir los paquetes de información. ¿De tal manera que el lector tenga una buena oportunidad de encontrar lo que le interesa? Aquí es donde la tipografía en la web se vuelve más como un diseño de información..
La tipografía en la web se trata tanto de organizar el tipo en diseños efectivos y significativos como de usar un gran tipo de letra..
Llamar la atención a un determinado bloque de texto, ayudar a los usuarios a encontrar el contenido que están buscando o ajustar una amplia variedad de contenido en una sola página se realiza mediante habilidades tipográficas.
La idea de diseñar tipo no solo es legible, sino también ser significativo Es parte de lo que confunde a mucha gente acerca de la tipografía web. Cualquiera puede escribir un párrafo de texto; ¿Menos personas pueden usar cosas como el espaciado de letras, el alto de línea y el tamaño de fuente para darle un sentido de carácter? pero los mejores diseñadores web pueden organizar el tipo en un diseño completo de manera que confiera sentido a los lectores y ayude a guiarlos en todo el sitio web.
Esto es lo que entendemos por tipografía como diseño de información..
A menudo es útil comenzar el sistema tipográfico para un diseño dividiéndolo en dos segmentos diferentes:
Al acercarse primero a la Macro-tipografía, puede ser fácil esbozar los elementos de "imagen más grande" del sistema de tipos en un diseño. ¿Dónde estará la navegación? ¿Cómo se diseñará el tipo en el sitio? ¿Una columna? ¿Dos? ¿Más? Todas las reglas estructurales generales deben definirse primero. En este punto, ¿puedes usar casi cualquier tipo de letra que quieras? Pero puede comenzar a familiarizarse con el tamaño y la escala de un diseño..
Una vez que haya resumido el "panorama general", es hora de acercarse a la microtipografía. Aquí es donde comenzarás a refinar realmente tu sistema tipográfico al definir los elementos estilísticos, como la fuente principal (y posiblemente la secundaria), el tamaño de los grandes titulares, el tamaño predeterminado de elementos como los títulos de la barra lateral, el texto del párrafo, color de enlace, etc..
Si recién estás comenzando como diseñador web, mirar todo lo salvaje y loco que sucede con la tipografía web puede ser desalentador. Es posible que tenga una serie de preguntas, como: ¿Dónde empezar? ¿Qué está bien y qué está mal? ¿Hay reglas que tengo que seguir? La buena noticia es que, en su esencia, la tipografía web tiene algunas reglas coherentes que debe conocer. A continuación se incluyen algunos consejos útiles que he recopilado para crear sistemas de tipos eficaces para la web:
La jerarquía de la tipografía es muy importante en un diseño web. Piense en todos los diferentes lugares en los que utiliza texto en un sitio web: la navegación, los titulares, los párrafos, los títulos de las imágenes, las barras laterales, etc. ¡Hay muchas posibilidades de que haya mucho texto! ¿Cómo vas a convertir todo esto en un sistema de tipo lógico? Al desarrollar una jerarquía de tipos.
Una jerarquía bien desarrollada le permite saber dónde comenzar a leer, cómo seguir leyendo y la diferencia entre la información más importante y menos importante en una página. Con una jerarquía de tipos efectiva, no necesita confiar más en la ubicación del texto para resaltar en qué quiere que pasen primero sus lectores.
Leer más sobre Entendiendo la Jerarquía
La falta de coherencia en la tipografía es uno de los errores más comunes y repetidos que los diseñadores web cometen en estos días. ¿Un diseñador de impresión a menudo diseñará meticulosamente todas y cada una de las letras de una página? Pero eso no es necesario con el diseño web..
En lugar de tratar de diseñar manualmente cada tipo de pieza en un sitio, diseñe con la idea de las Hojas de estilo en cascada (CSS) en mente. Utilice la bendición de CSS y configure la fuente, el tamaño, el color, el interlineado, la altura y otras características de su tipografía en todo el sitio web.
He mencionado esto anteriormente, pero permítanme enfatizar el punto: los grandes diseñadores web hacen más que simplemente colocar imágenes y pegar texto en un diseño web. Se requieren buenos hábitos profesionales para hacer un diseño de sitio web ganador; Uno de los mejores hábitos profesionales que debe tener un diseñador web es Lee el texto Antes de colocarlo en el diseño web. Si tiene acceso al contenido de texto que utilizará, evite pegarlo todo a ciegas. Al leer y leer el texto real, podrá establecer una mejor conexión entre el contenido y el diseño..
Además, cuando haya terminado de colocar el texto y otros elementos en el diseño, asegúrese de volver a revisarlo como práctica de corrección para evitar errores o cosas que queden fuera. Es sorprendente la frecuencia con la que los diseñadores se olvidan de diseñar cosas sencillas como las listas de viñetas porque se apresuraron en la fase de diseño.
Para un diseño web exitoso, un diseñador web debe prestar atención tanto a la macro como a la micro tipografía. Incluso los mejores diseños se pueden desmoronar si faltan cosas en el lado "micro" de las cosas. e incluso la mejor microtipografía no será útil para los lectores si no se presenta utilizando los principios de macro tipografía adecuados. Ambos son importantes!
Muchos diseñadores son especialmente buenos en uno u otro? así que tómate un tiempo para considerar cuál es tu traje más fuerte: ¿macro o micro? Luego, haz lo mejor para fortalecer tus habilidades (a través de la práctica y la atención a los detalles) en tu conjunto de habilidades más débiles..
Esto no hace falta decirlo para muchos diseñadores, pero el color del texto es otra cosa importante a considerar. Hay cientos de sitios web que dan por sentado este punto y utilizan colores de fuente que:
¿No es necesario que salpiques todo el arco iris a través de la página y no necesites usar algo horrible como un texto rojo sobre un fondo verde? simplemente use la teoría del color simple y sensible para elegir colores para sus fuentes que sean legibles e interesantes. Recuerde, los enlaces deben ser de color en la mayoría de los casos? le dice a la gente que pueden hacer clic en ellos!
Leer más sobre Web Design Color Theory.
Deje de usar Lorem Ipsum! No hay sustituto para el texto real al diseñar un sitio web. Si bien puede usar texto ficticio para tener una idea de cómo se verán las cosas en el diseño, tan pronto como se complete su diseño web, intente utilizar el texto real que usted o su cliente planean usar en el sitio web en vivo. . ¿Solo entonces podrá sincronizar el diseño con el texto y determinar el impacto de cómo se verá el sitio web en general? incluso pequeños descuidos en este proceso pueden llevar a puntos débiles en un diseño, así que tómate el tiempo de usar texto en vivo antes de llamar "completo" a un proyecto!
Lo maravilloso de la tipografía web es que hay una gran variedad de formas de abordarlo: cada diseñador tendrá su propio estilo para hacer las cosas, y realmente no hay una sola forma "correcta" de diseño en el estilo. web. Type tiene personalidad, igual que tú o el cliente para el que trabajas, así que no tengas miedo de jugar con tus propias variaciones creativas una vez que tengas la base del diseño de un sitio..
Leer más sobre Elegir la fuente correcta
El diseño web requiere que domines varias cosas para hacer un diseño realmente bueno, y la tipografía es definitivamente una de estas cosas. ¿Un diseñador web que realmente entienda la importancia de la tipografía podrá alcanzar el factor de éxito con mayor frecuencia? ¡y todo lo que realmente se necesita es practicar entrenar tu mente para ver la mejor manera posible de diseñar cualquier tipo de tipo! La tipografía no es ciencia espacial, pero requiere mucho trabajo descubrir la mejor manera de hacer las cosas para un proyecto determinado..
Tómese un tiempo todos los días para practicar: intente tomar un artículo que realmente le guste y vuelva a diseñarlo; Diseña tu propio currículum, portafolio, ¿lo que puedas encontrar? ¡Solo usa las ideas que puedas para practicar y te encontrarás mejorando en poco tiempo! Confía en mí, tan pronto como entiendas lo básico, se convertirá en un pedazo de pastel.!
Este artículo fue co-escrito por Arfa Mizra y Brandon Jones. Gracias por leer!
Accentsconagua