Diseño web: Nueve consejos para una mejor jerarquía tipográfica

Todo proyecto de diseño web requiere un sistema y jerarquía para elementos de texto. Solo piensa en pequeñas piezas de texto que se usan en todo un diseño web: cuerpo de texto, elementos de navegación, información legal, descripciones, etcétera.

Pero, ¿cómo creas una jerarquía donde cada elemento de texto fluya con los de su alrededor? En el siguiente artículo, Staff Creativa te llevará paso a paso a través de la construcción de un sistema de jerarquía tipográfica que puede ser usado para casi cualquier proyecto de diseño web.

1. Comienza con un cuerpo de texto cómodo

Aunque quieras empezar con un encabezado cool, el lugar donde debes empezar es en el medio. Primero establece una fuente cómoda, con un tamaño y espaciado adecuado para el cuerpo de texto.

Este debe tener sentido porque este texto conforma la mayor parte del texto del diseño web. Ya sea que crees una página web o un panfleto, el concepto es el mismo. La legibilidad ideal para el cuerpo de texto es de 50 a 60 caracteres por línea (o columna), de acuerdo con Baymard Institute. Esta guía (en inglés) te ayudará a mantener una escala de texto que sea legible y que, a la vez, funcione con diferentes tipos de fuentes.

2. Crea una escala

Una vez que sepas cómo lucirá tu texto, puedes establecer una escala para todos los elementos de texto en el diseño web. Puede ser muy fácil pasar desapercibido ciertos bloques de texto, así que haz una lista de diferentes usos para el texto en tus proyectos:

• Cuerpo de texto
• Encabezados
• Subencabezados
• Descripciones
• Citas
• Elementos de navegación
• Información de pie de página
• Información legal o descargo de responsabilidad

Ahora crea una escala que determine las fuentes, tamaños y usos de cada uno de estos elementos. Existen ciertas formas de crear esta escala, pero el porcentaje de tamaño puede ser un buen punto de inicio. También puedes establecer una escala basado en la matemática detrás del asunto.

Aquí tienes una escala sencilla para empezar:

• Tamaño de cuerpo de texto
• Los encabezados son 220 % más grandes que el cuerpo de texto
• Los subencabezados son 150 % más grandes que el cuerpo de texto
• Los elementos de navegación son 80 % más grandes que el cuerpo de texto
• El pie de página/información legal

3. Piensa de más grande a más pequeño, de arriba abajo

Esta regla es bastante sencilla: el texto más grande e importante debe estar en la parte superior y el tamaño debe reducirse mientras se desplaza hacia la parte inferior de la pantalla.

Eso no quiere decir que no puedas romper esta regla de vez en cuando con algo de sutileza, pero esta norma siempre debe ser el punto de inicio para desarrollar jerarquía tipográfica… ¿Quién va a ir al final de una página web para ver un encabezado y luego regresar la inicio para leer el cuerpo del texto?

4. Crea normas para el espacio

El espacio entre y alrededor de las letras es igual que el tamaño de las mismas. El tamaño del canvas también es muy importante. Los canvas más grandes son legibles con un espaciado más estrecho a comparación que en los canvas más pequeños. (Por eso muchos proyectos tienen especificaciones menos definidas para dispositivos como teléfonos celulares y más estrictas para computadoras de escritorio).

Al igual que el tamaño de las fuentes, las reglas de espaciado deben establecerse con anticipación para la infraestructura de diseño web completa. Un espaciado consistente y limpio es una de las pequeñas cosas que puede crear el arruinar un diseño web.

5. Establece reglas para fuentes en negrita y el cursiva

Aunque las letras en negrita y en cursiva no son diferentes diferentes tipos de elementos, su uso es importante. (Solo imagina cómo se vería un diseño web si cada palabra esté en negrita).

Esto hace que las guías de uso de palabras en negrita y en cursiva sean importantes. En lugar de mirar un tamaño o espaciado, la consideración es más contextual. Las especificaciones de uso pueden establecer que solo algunas palabras o frases pueden estar en negrita o en cursiva. Es un error común usarlas con exageración. Cuando dudes, no las uses.

6. Crea una «Z»

El patrón de lectura común tiene la forma de una «Z». Ya sea que estés diseñando para un lenguaje que se lea de izquierda a derecha o de derecha a izquierda (voltea la Z), los usuarios leerán de una esquina hacia la línea hasta el final y luego regresarán a la esquina inicial en un patrón repetitivo.

Este es el flujo natural al ubicar elementos de texto en la pantalla. Esta forma en Z es la razón por qué muchas marcas colocan su diseño de logo en la esquina superior izquierda. Es el primer lugar donde la mirada se posa al leer.

7. Considera el peso visual

El tamaño no es el único factor cuando se trata de cuán grande luce un elemento de texto en la pantalla. El peso visual es igual de importante y puede impactar la forma en que se crea una escala tipográfica.

Las fuentes lucen más grandes cuando:

• Dentro de su peso están incluidos los brochazos gruesos
• Son anchas
• Son fuentes innovadoras
• Su altura de la x es mayor
• Por lo general, todas son mayúsculas

Las fuentes lucen más pequeñas cuando:

• Son condensadas
• Son delgados o tienen brochazos delgados
• Tienen poco contraste con el fondo
• Se usan en minúscula

8. Crea acentos

Existen ciertas palabras que deberás resaltar y se saldrán de la escala tipográfica normal. Añadir un acento a las letras puede hacerlas resaltar sin tener que ajustar el tamaño actual o la fuente.

Los acentos comunes incluyen:

• Colores
• Subrayados
• Resaltados
• Textos con formas
• Animaciones sencillas
• Cambios en formas de otras fuentes del mismo tamaño

9. Usa la «prueba de la vista»

Finalmente, cada regla tiene su excepción (o dos). Es aquí donde entra la «prueba de la vista». Solo mira la escala en la pantalla. ¿Cómo luce el texto y qué sensación te da? ¿Existe un flujo lógico? ¿Es fácil de leer?

Si se siente apagado de cierto modo, considera hacer algunos ajustes en la escala. Dependiendo de la fuente que uses y otros elementos del diseño web —desde imágenes a contrastes— la escala requerirá ajustes de tu parte. Este solo es el punto de inicio cuando no estés seguro de lo que desees hacer.

También pide una segunda vista. Crea uno o dos versiones con diferentes jerarquías para ver qué versión tiene la mejor respuesta. El diseño web es un arte visual que hace que la prueba de la vista sea una imprecisa, pero confiable opción.

Conclusión

Una vez que establezcas una jerarquía tipográfica para un proyecto de diseño web, lo mejor que puedes hacer es documentarlo. Establece la escala con CSS para páginas web.

Para diseños a gran escala o branding, coloca la escala y especificaciones en escrito en una guía de estilo. Crear una jerarquía de fuentes requiere un poco de trabajo para el front y back end, pero hace que la culminación de un proyecto sea más rápido, fácil y no hace falta mencionar que más consistente.

Traducido y adaptado de Design Shack. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.