Elementos de tipografía que todos deben comprender

El diseño de tipo puede ser intimidante para muchos, con términos como inicio, línea base, interletraje, ascendente, cola y muchos más ... La buena noticia es que hay ocho elementos básicos de diseño tipográfico universal: tipo de letra, jerarquía, contraste, consistencia, alineación , espacio en blanco y color. Incluso una comprensión básica de cada uno de estos elementos puede revolucionar cualquier proyecto de diseño.

Los principios tipográficos no son solo filosofías estéticas arbitrarias que algunos estudiantes de diseño pretenciosos inventaron, son técnicas para ayudarlo a presentar sus ideas a los espectadores y aprovechar al máximo cada palabra. Los principios, que abordan cada uno de estos elementos, giran en torno a una idea central: la buena comunicación. Una buena tipografía es imprescindible para cualquier situación en la que desee transmitir una idea a otra persona a través de texto, como un sitio web, una publicación de blog, un anuncio de revista, una interfaz, una cartelera o un boletín informativo.

Tipo de letra

Hay tres tipos básicos de tipografías: serif, sans-serif y decorativas.

Categorías de tipo de letra.

Observe los pequeños adornos al final de las líneas en la fuente serif, encerrados en un círculo rojo. Esos en realidad se llaman "serif", de ahí el nombre de la categoría de fuente. "Sans" significa "sin", razón por la cual todas las fuentes sin serif se llaman "sans-serif". Las fuentes decorativas son tales que realmente no se ajustan estrictamente a ninguna de esas categorías, y a menudo son fuentes elaboradas y creativas que se utilizan para los títulos .

Es mejor usar un máximo de tres fuentes en un proyecto de diseño dado, y dos a menudo son aún mejores. Mantiene su diseño ordenado y simple. Intente emparejar fuentes serif con fuentes sans-serif, como colocar el texto del cuerpo principal en una fuente serif y poner el título en una fuente sans-serif, o viceversa. Use fuentes decorativas mínimamente, y casi nunca para el texto del cuerpo principal, ya que a menudo tienen una legibilidad baja y la mayoría de las veces no se ven bien.

Emparejamientos de fuentes.

Con Gravit Designer, puede elegir fácilmente excelentes combinaciones de fuentes seleccionando la capa de texto que desea modificar (1), eligiendo la pestaña "Apariencia" (2) y desplazándose por "Fuentes web" o "Fuentes del sistema", que son las fuentes que ya están en su computadora (3). Recomiendo buscar fuentes web para evitar las fuentes pegajosas y usadas en exceso que vienen con la mayoría de las computadoras. Preste mucha atención a las vistas previas de fuentes (4) e identifique si son decorativas, serif o sans-serif. La fuente que he seleccionado a continuación, "Adamina", es una fuente serif y se ve muy bien con el título en negrita sans-serif.

Elegir fuentes en Gravit Designer

Jerarquía

Una de las funciones principales de la jerarquía es ayudar a mantener sus ideas organizadas, para que los espectadores siempre puedan identificar qué categoría de información están leyendo. Un ejemplo típico sería un sitio web, donde el título del sitio está en la parte superior de la página en un encabezado grande, mientras que las páginas de navegación principales dentro del sitio web se enumeran debajo del encabezado en una fuente más pequeña. Esta es una señal visual, que ayuda a los lectores a identificar el contexto del texto sin tener que pensarlo conscientemente. Observe que en el sitio web a continuación, todo el texto tiene el mismo tamaño, fuente, peso y color, con poca distinción. Todo el texto aparece igual y nada sobresale ... ¡este es un mal diseño!

Un diseño, que carece de jerarquía.

En la siguiente imagen, la fuente, el tamaño, el color y el formato de cada nivel jerárquico se han modificado para que sean únicos y se diferencien de las otras categorías. Tenga en cuenta que el título de la página web, el menú de navegación y los encabezados de contenido principal y el texto del cuerpo tienen estilos consistentes, exclusivos de sus respectivas categorías.

diseño con buena jerarquía [ilustraciones del sitio web complementadas con la galería de pegatinas de Gravit Designer]

La jerarquía también ayuda a hacer que su texto sea "escalable". En la edad de 140 tweets de caracteres y TL; DR (demasiado largo; no leyó), los escritores y diseñadores deben ahora, más que nunca, tratar de ser concisos y proporcionar a los lectores La capacidad de consumir grandes cantidades de información rápidamente. Una de las mejores formas de hacerlo es emplear la jerarquía para hacer que su texto sea escalable.

Por ejemplo, si alguien está leyendo un folleto para su negocio de panadería pero solo está interesado en pastelitos, debe proporcionarles una forma rápida de encontrar esa información. En lugar de hacer que el espectador lea los bloques de texto del cuerpo, organice los tipos de productos horneados con encabezados en negrita para permitir que el espectador encuentre rápidamente el área de información relevante antes de tener que mirar más de cerca.

Contraste

El contraste hace que el texto sea interesante y puede ayudarlo a comunicar qué ideas desea enfatizar. El tamaño, la tipografía, el peso, el color y el estilo variables pueden dar a sus diseños un gran impacto y organizar sus ideas. A continuación, puede ver cómo el contraste lo ayuda a darle a su texto una apariencia interesante, llamativa y aún más significativa. A continuación, la palabra "Pequeño" es negra, alineada a la derecha, liviana, en un tipo de letra serif en cursiva con mayor espacio entre las letras. "Grande" es rojo, pesado, en un tipo de letra sans-serif regular, y es aproximadamente 10 veces más grande que la palabra "Pequeño".

¡Mucho contraste y, por lo tanto, impacto!Sin contraste = aburrido!

Claramente, los elementos de contraste hacen que el primer diseño se destaque mucho más que el segundo diseño, donde ambas palabras tienen el mismo estilo.

Consistencia

La consistencia es un principio clave para toda tipografía. Las fuentes consistentes son especialmente importantes, ya que usar demasiadas puede dar lugar a un aspecto confuso y desordenado, por lo que siempre use el mismo estilo de fuente para la misma información. Decida una jerarquía de estilos y cúmplala. Aunque puede tener muchos niveles de jerarquía, debe mantener un tema general para el diseño.

La página "Capítulo uno" a continuación tiene un diseño agradable con solo dos caras de fuente, dos colores y tres tamaños de fuente. Aunque solo se utilizan dos caras de fuente, la jerarquía se logra mediante el uso de tamaño y color. Todo el texto está alineado a la izquierda, excepto el número de página, que proporciona líneas limpias y consistentes. Sin embargo, en la página "Capítulo dos", hay cuatro caras de fuente diferentes, cuatro colores, cuatro tamaños de fuente, y cada elemento tiene una alineación diferente; todo esto crea un diseño desordenado y poco atractivo.

Alineación

La alineación se refiere a la "línea" hacia la que se orienta el texto. Se puede aplicar a todo un cuerpo de texto, palabras individuales o incluso imágenes. La alineación debe ser lo más consistente posible y cada elemento de su diseño está destinado a alinearse de alguna manera con uno de los otros elementos, para crear tamaños y distancias iguales entre los objetos. Por ejemplo, es posible que desee que el logotipo se alinee en tamaño con su encabezado, y que el texto de su cuerpo se alinee con los mismos márgenes en los que se encuentra el encabezado.

La herramienta de regla de Gravit Design es la mejor manera de realizar un seguimiento de la alineación de imágenes, formas, líneas y texto. Seleccione Ver> Mostrar reglas en el menú superior para abrir la herramienta de regla y arrastre las guías desde las reglas que aparecen a la izquierda y la parte superior de su documento. Para cambiar la unidad de medida que se muestra en la regla, seleccione Documento> Unidad en las pestañas en el lado derecho de la pantalla (sin ningún elemento seleccionado en el lienzo). También puede activar una cuadrícula a la derecha a continuación para ayudarlo.

usando reglas para alinear objetos

Muchos diseñadores aficionados cometen el error de usar en exceso la alineación central ... es tentador, pero puede ser complicado y tener un aspecto desequilibrado. La alineación a la izquierda suele ser la mejor opción, y la alineación a la derecha también puede ser interesante. Sin embargo, evite usar la alineación correcta para el texto del cuerpo.

¡mira cuánto mejor es la alineación izquierda que el centro!

Espacio en blanco

El espacio en blanco se refiere al espacio vacío alrededor de objetos o texto, y puede tomar la forma de márgenes, relleno o simplemente un área despejada. Crea una experiencia visual agradable e incluso puede llamar la atención sobre el texto. En el primer cuadro a continuación, el texto está apretado contra el cuadro delimitador, lo que dificulta su lectura. En el segundo cuadro, el texto tiene espacio para respirar y el diseño incluso se ve más elegante.

A menudo pensamos que los colores llamativos y las fuentes en negrita son la única forma de llamar la atención sobre el texto, pero sorprendentemente, el espacio en blanco puede ser la mejor manera de atraer al espectador, ya que indica que lo que esté dentro del gran campo de espacio vacío debe ser importante .

Color

El color realmente puede ayudar a establecer el ambiente para su diseño, y hacerlo bien puede hacer que su texto se destaque. Hay tres componentes principales del color:

  1. Hue - el tono de color
Ajuste de tono en Gravit Designer

2. Saturación: qué tan brillante es el color

Ajuste de saturación en Gravit Designer

3. Valor: claridad u oscuridad del color.

Ajuste de valor en Gravit Designer

Recuerde contrastar el tono, la saturación y el valor de manera que su texto sea fácil de leer. Una buena manera de saber si sus colores tienen suficiente contraste es ver su diseño en escala de grises y si no se ve bien, es posible que necesite ajustar los valores. Observe cómo el texto de la derecha se vuelve casi invisible en escala de grises, mientras que la imagen de la izquierda todavía se ve genial:

Una situación en la que el contraste no es suficiente es con texto claro sobre un fondo oscuro ... incluso si el contraste parece alto, simplemente no es tan fácil de leer como el texto oscuro sobre un fondo claro, especialmente con texto pequeño, así que use eso estilo con moderación!

Al realizar cualquier diseño, hacerse estas tres preguntas lo ayudará a recordar las pautas y principios antes mencionados:

  • ¿Mi texto es legible?
  • ¿Es coherente mi estilo?
  • ¿Mi estilo usa contraste?

Espero que esto haya sido una introducción útil al uso de elementos tipográficos básicos. ¡Comenta a continuación qué elemento crees que es el más importante o el que más se pasa por alto, y cuéntanos cualquier consejo o principio que quieras compartir!

Sitio web | Facebook | Twitter | Foro