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, títulos, etc.
Pero, ¿cómo crea esa jerarquía para que cada elemento de texto fluya sin problemas hacia el siguiente? Hoy, lo llevaremos paso a paso a través de la construcción de un sistema de jerarquía tipográfica que puede usarse para casi cualquier proyecto de diseño. (Y estamos combinando los consejos con bellos ejemplos de excelentes tipografías para ayudarlo a reunir un poco de inspiración).
1. Comience con Copia de cuerpo cómodo
Si bien es posible que desee comenzar con un tratamiento de titular fresco, el lugar para comenzar es en realidad en el medio. Establezca primero una fuente, tamaño y espacio cómodos para la copia del cuerpo principal.
Esto debería tener sentido porque 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. De acuerdo con el Instituto Baymard, la legibilidad ideal para la copia del cuerpo es entre 50 y 60 caracteres por línea (o columna). Esta guía lo ayudará a establecer una escala para el texto que sea legible y que tenga en cuenta los diferentes tipos de letra (como regular frente a condensado frente a slab).
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 de bloque
- Elementos de navegacion
- Información de pie de página
- Copia legal o renuncias
Ahora cree una escala que dicte el tipo de letra, el rango de tamaño y el uso de cada uno de estos elementos. (Y cópielo 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 línea de base o visualmente.
Aquí hay una escala simple para comenzar:
- Tamaño de la copia del cuerpo
- Los titulares son tamaño de copia del cuerpo veces 220%
- Los subtítulos son cuerpo copia tamaño multiplicado por 150%
- Los elementos de navegación son cuerpo copia tamaño veces 80%
- El pie de página / copia legal es el tamaño del cuerpo multiplicado por 80%
3. Piense de mayor a menor, de arriba a abajo
Esta regla es bastante simple: el texto más grande y más 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 una jerarquía tipográfica. (¿Quién realmente va a desplazarse hasta el final de una página web para el titular 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 alrededor de él. Los factores para determinar el espacio incluyen el inicio (o altura de la línea), sangrías (o no), envolturas y canales y alineación.
Considere proporciones de espaciado que reflejen la escala utilizada para ajustar 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 estrecho que los lienzos pequeños. (Es por eso que muchos proyectos tienen especificaciones de espaciado mucho más flexibles para dispositivos como teléfonos móviles y reglas más estrictas para los equipos de escritorio).
Al igual que con los tamaños de letra, las reglas de espaciado deben establecerse de antemano para todo el marco de diseño. El espaciado uniforme y limpio es una de las pequeñas cosas que pueden hacer o deshacer un diseño.
5. Establecer reglas para negrita y cursiva
Mientras que negrita y cursiva no son diferentes tipos de elementos o tamaños, el uso es importante. (Solo imagina cómo se verá el diseño si cada palabra es negrita.)
Esto hace que las directrices 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 tantas 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 un? Z?
El patrón de lectura común tiene la forma de una Z. Ya sea que esté diseñando para un idioma que se lee de izquierda a derecha o de derecha a izquierda (voltear 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 de inicio y al otro lado de la línea en un patrón de repetición.
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 spot donde aterriza el ojo al leer.
7. Considera el peso visual
El tamaño no es el único factor cuando se trata del tamaño del elemento de texto en la pantalla. El peso visual es igual de importante y puede afectar la forma en que creas una escala tipográfica.
Los tipos de letra se verán más grandes cuando:
- Incluyen pesas de trazo grueso
- Incluyen florituras o adornos.
- Son anchos
- Son tipografías base novedosas.
- Tienen x-alturas más altas.
- Se utilizan como todas las tapas.
Los tipos de letra se verán más pequeños cuando:
- Estan condensados
- Incluyen anchos de trazo ligeros o finos.
- Hay poco contraste con el fondo.
- Se utilizan con letras minúsculas.
8. Crear acentos
Hay ciertas palabras que querrá resaltar que caen 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 el tipo de letra.
Los acentos comunes incluyen:
- Color
- Subrayar
- Realce
- Texto en un botón o forma
- Animación simple
- Cambio en caso de otro tipo de 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 el mayor impacto y para elementos clave en el diseño.
9. Utilice el? Test de ojos?
Finalmente, cada regla tiene una excepción (o dos). Ahí es donde el? Examen ocular? entra. Solo mira la escala en la pantalla. ¿Cómo se ve y siente el texto? ¿Hay un flujo lógico? ¿Es facil de leer?
Si se siente apagado de alguna manera, considere hacer ajustes a la escala. Dependiendo de la tipografía que use y otros elementos en el diseño, desde las imágenes hasta el color y el 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, haciendo la? Prueba ocular? 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 a gran escala o marcas, escriba la escala y las especificaciones en una guía de estilo. Crear 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, más fácil y, por no mencionar, más consistente, a medida que avanza con los proyectos posteriores.