9 consejos para mejorar la jerarquía tipográfica
Cada proyecto requiere un sistema y una jerarquía para los elementos de texto. Solo piense en todos los pequeños fragmentos de texto que se utilizan en todo el diseño: titulares, copia del cuerpo, elementos de navegación, información legal, subtítulos, etc.
Pero, ¿cómo se crea esa jerarquía para que cada elemento de texto fluya sin problemas al siguiente? Hoy, lo guiaremos paso a paso a través de la construcción de un sistema de jerarquía de tipografía que se puede usar para casi cualquier proyecto de diseño. (Y estamos combinando los consejos con hermosos ejemplos de gran tipografía para ayudarlo a reunir un poco de inspiración).
Explore los elementos de Envato
1. Comience con una copia cómoda del cuerpo
Si bien es posible que desee comenzar con un tratamiento de titular genial, el lugar para comenzar es en realidad en el medio. Establezca primero un tipo de letra, un tamaño y un espacio cómodos para la copia del cuerpo principal.
Esto debería tener sentido porque esta es la mayor parte del texto en el diseño. Ya sea que esté creando un sitio web o un folleto, este concepto es el mismo. La legibilidad ideal para la copia del cuerpo es de entre 50 y 60 caracteres por línea (o columna), según el Instituto Baymard. Esta guía lo ayudará a establecer una escala para el texto que sea legible y que tenga en cuenta los diferentes tipos de tipografías (como la normal, la condensada y la losa).
2. Construye una escala
Una vez que sepa cómo se verá la copia del cuerpo, puede establecer una escala a su alrededor para todos los demás elementos de texto en el diseño. Puede ser fácil pasar por alto ciertos bloques de texto; haga una lista de cada uso diferente para el texto en su proyecto.
- Copia de cuerpo
- Titulares
- Subtítulos
- Subtítulos
- Cotizaciones en bloque
- Elementos de navegación
- Información de pie de página
- Copia legal o descargos de responsabilidad
Ahora cree una escala que dicte la tipografía, el rango de tamaño y el uso de cada uno de estos elementos. (Y compílelo en su CSS para sitios web o archivos de estilos para documentos de trabajo). Hay varias formas de crear la escala, pero el porcentaje de tamaño puede ser un buen punto de partida. También puede establecer una escala basada en las matemáticas detrás de una cuadrícula de referencia o visualmente.
Aquí hay una escala simple para comenzar:
- Tamaño de copia del cuerpo
- Los titulares tienen un tamaño de copia del cuerpo multiplicado por 220%
- Los subtítulos son tamaño de copia del cuerpo multiplicado por 150%
- Los elementos de navegación son tamaño de copia del cuerpo multiplicado por 80%
- El pie de página / copia legal es el tamaño del cuerpo multiplicado por 80%
3. Piensa más grande a más pequeño, de arriba a abajo
Esta regla es bastante simple: el texto más grande e importante debe estar en la parte superior y los tamaños deben disminuir a medida que lee la página o la pantalla.
Eso no quiere decir que no se pueda romper esta regla de vez en cuando con cierta delicadeza de diseño, pero siempre debe ser el punto de partida para desarrollar la jerarquía tipográfica. (¿Quién realmente va a desplazarse hasta el final de una página web para el título y luego volver a la parte superior para comenzar a leer?)
4. Establecer reglas para el espacio
Tan importante como el tamaño de las letras es el espacio entre y a su alrededor. Los factores para determinar el espacio incluyen el inicio (o la altura de la línea), las sangrías (o no), las envolturas y las canaletas y la alineación.
Considere espaciar proporciones que reflejen la escala utilizada para cambiar el tamaño del texto. El tamaño del lienzo también es bastante importante aquí también. Los lienzos más grandes se pueden leer con un espacio más ajustado que los lienzos pequeños. (Es por eso que muchos proyectos tienen especificaciones de espacio mucho más flexibles para dispositivos como teléfonos móviles y reglas más estrictas para computadoras de escritorio).
Al igual que con los tamaños de tipo de letra, las reglas de espacio deben establecerse de antemano para todo el marco de diseño. El espaciado constante y limpio es una de las pequeñas cosas que pueden hacer o deshacer un diseño.
5. Establecer reglas para negrita y cursiva
Si bien la negrita y la cursiva no son elementos de tipo o tamaños diferentes, el uso es importante. (Solo imagínese cómo se verá el diseño si todas las demás palabras están en negrita).
Esto hace que las pautas para negrita y cursiva sean especialmente importantes. Sin embargo, en lugar de mirar el tamaño o el espacio, la consideración es mucho más contextual. Las especificaciones de uso pueden indicar que solo algunas palabras o frases (o palabras o frases específicas) pueden recibir este tratamiento. Es un error común el uso excesivo de negrita y cursiva; cuando dudes, no lo uses.
6. Crear una "Z"
El patrón de lectura común tiene la forma de una Z. Ya sea que esté diseñando para un lenguaje que lea de izquierda a derecha o de derecha a izquierda (voltee la Z), los usuarios leerán desde una esquina a través de la línea hasta el final y luego volverán a la esquina inicial y cruzando la línea en un patrón repetitivo.
Utilice este flujo natural al colocar elementos de texto en la pantalla. Esta forma de Z es la razón por la cual la mayoría de las marcas colocan su logotipo en la esquina superior izquierda. Es el primer lugar donde el ojo aterriza cuando lee.
7. Considere el peso visual
El tamaño no es el único factor cuando se trata de qué tan grande se ve un elemento de texto en la pantalla. El peso visual es igual de importante y puede afectar la forma en que crea una escala tipográfica.
Las tipografías se verán más grandes cuando:
- Incluyen pesos de trazos gruesos
- Incluyen adornos o adornos
- Son anchas
- Son tipos de letra base novedosos
- Tienen alturas x más altas
- Se usan como mayúsculas
Los tipos de letra se verán más pequeños cuando:
- Estan condensados
- Incluyen trazos ligeros o delgados
- Hay poco contraste con el fondo.
- Se usan con letras minúsculas
8. Crear acentos
Hay ciertas palabras que querrás resaltar que quedan un poco fuera de la escala tipográfica normal. Agregar un acento a las letras puede hacer que se destaque sin tener que ajustar el tamaño real o la tipografía.
Los acentos comunes incluyen:
- Color
- Subrayar
- Realce
- Texto en un botón o forma
- Animación simple
- Cambiar en caso de otro tipo del mismo tamaño
Lo bueno de cualquier acento dentro de una jerarquía de tipos es que capta la atención de inmediato. Estos elementos deben usarse con moderación para obtener el mayor impacto y para elementos clave en el diseño.
9. Use la "Prueba del ojo"
Finalmente, cada regla tiene una excepción (o dos). Ahí es donde entra la "prueba de la vista". Solo mire la escala en la pantalla. ¿Cómo se ve y se siente el texto? ¿Hay un flujo lógico? ¿Es facil de leer?
Si se siente mal de alguna manera, considere hacer ajustes a la escala. Dependiendo del tipo de letra que use y otros elementos en el diseño, desde imágenes hasta color y contraste, la escala requerirá un ajuste de su parte. Es solo un punto de partida cuando no estás seguro de lo que quieres hacer.
Y pide otros ojos también. Cree una o dos versiones con diferentes jerarquías para ver qué versión obtiene la mejor respuesta. El diseño es un arte visual, lo que hace que la "prueba ocular" sea una opción imprecisa pero bastante confiable.
Conclusión
Una vez que establezca una jerarquía tipográfica para un proyecto, lo mejor que puede hacer es documentarlo. Establezca la escala con CSS para sitios web o cree archivos de estilos cuando trabaje en proyectos impresos.
Para diseños o marcas de mayor escala, escriba la escala y las especificaciones por escrito en una guía de estilo. La creación de una jerarquía de tipos requiere un poco de trabajo en el back-end, pero hace que la finalización del proyecto sea más rápida, fácil y, por no mencionar, más coherente, a medida que avanza con proyectos posteriores.
