Cada proyecto web que lleves a cabo requiere de un sistema de jerarquía visual. Cuando este sistema se aplica a los textos se le conoce como jerarquía tipográfica y se refiere a la selección de fuentes y cambios de formato que se aplican a todos los textos, de manera que exista una correcta lectura. Es decir, el usuario debe saber cuál es el texto más importante y ese será el que llame su atención en la primera visita al sitio. En este artículo te indicamos una serie de pasos para mejorar la jerarquía tipográfica en un sitio web
Empieza con el cuerpo de texto
Aunque de manera usual, el título suele ser el texto que más llama la atención en una página de inicio, deberías empezar estableciendo el puntaje de la fuente en el cuerpo de texto. Se inicia de esta manera porque el cuerpo de texto forma el mayor porcentaje de texto de todo el sitio. De esta forma no sólo seleccionas el puntaje ideal para tu texto, sino también el número de caracteres por línea. El número ideal de caracteres por línea suele estar entre los 50 y 60 caracteres, dependiendo del tipo de fuente que emplees. Toma en cuenta este valor cuando decidas el puntaje de la fuente para optimizar la legibilidad de tus textos.
Una vez que hayas decidido cuál es el puntaje de la fuente para el cuerpo de texto, puedes comenzar a pensar en los otros estilos que emplearás en el sitio como los títulos, subtítulos, leyendas, citas, elementos de navegación, footer, etc. Todos estos elementos tiene un estilo específico, ya se trate de la tipografía, el tamaño y el formato. Decidir sobre estos aspectos es importante para determinar la jerarquía tipográfica. Puedes usar una lista e ir anotando los elementos mencionados según el orden de importancia. Este pequeño ejercicio te ayudará a decidir el estilo para cada texto que conforme el sitio.
Ten en cuenta los espacios
Sabes que los espacios en blanco juegan un gran papel para la organización y legibilidad del sitio. Lo mismo sucede con la tipografía, debes asegurarte de verificar los espacios que existen alrededor de la letra. Dentro de los programas editores pueden modificarse ciertos valores de espaciado que pueden modificarse como el kerning, interlineado, sangría y la alineación. En CSS también existe una manera de modificar estos valores. Así que no temas modificar estos valores en el diseño. Claro, lo ideal es encontrar una tipografía que funcione perfectamente sin modificar el kerning automático, ya sea disminuyéndolo o aumentándolo.
Considerar el espacio es esencial no sólo para poder crear una jerarquía visual, sino también para optimizar la legibilidad y organizar mejor el espacio. De esta forma, no sólo debes considerar el espacio que existe entre cada letra y línea de texto, sino también el espacio total con el que cuentas para la composición. Por supuesto, este espacio varía según el dispositivo para el cuál estés diseñando.
Considera los pesos visuales
El tamaño no es el único factor que entra en juego cuando se trata de determinar qué tan grande se ve cierto elemento en la pantalla. Para poder lograr una mejor jerarquía visual en tu tipografía deberías considerar los siguientes factores:
- Posee bastones gruesos
- Posee adornos
- Tienen un alto kerning automático
- Tiene altura X mayor (en comparación otras fuentes)
- Posee solo mayúsculas
En general, las fuentes lucen más grandes cuando posee bastones gruesos. Por eso, las fuentes para título suelen tener esta característica. Ya que el título es una frase corta y tiende a usar un mayor espacio en la composición no hay problema si se utilizan fuentes de bastones gruesos o si se coloca todo en mayúsculas. Por otro lado, para cuerpo de texto esta no es realmente una buena idea. Es mejor optar por fuentes que contengan tanto mayúsculas como minúsculas, que sean de bastones delgados o en estilo condensado.
Crea acentos
Si deseas destacar alguna palabra en específico, existen diversas formas de lograrlo. Algunas de las técnicas comunes para hacerlo son las siguientes:
- Uso de un color distinto
- Subrayado de la palabra en cuestión
- Encerrar la palabra en un recuadro u otra forma
- Animar la palabra
- Cambiar el estilo de la palabra, por ejemplo, usando cursivas
- Utilizar otra fuente
- Colocarla en mayor tamaño
- Si el texto se encuentra en minúsculas, usar mayúsculas para dicha palabra
Incluso si no puedes usar otra fuente debido a la limitación que te has impuesto, puedes crear acento y destacar palabras usando alguna de las otras técnicas mencionados. Como se trata de que la palabra tenga cierto impacto, estas técnicas deberían ser empleadas con moderación. Si utilizas acentos en muchas partes del texto, ya no existirá un contraste adecuado.
Revisa cómo luce la versión final del texto
Para asegurarte que has logrado una correcta jerarquía tipográfica, la mejor opción es revisar los resultados de tus decisiones. Prueba tu composición en los dispositivos para los que estás diseñando y analiza si existen problemas de legibilidad y si la lectura es fluida. Si existe algún detalle que no te convence del todo, entonces realiza los ajustes necesarios. Puedes tener toda la teoría necesaria y aplicarla a la perfección, pero nada puede vencer el hecho de probar cómo lucen las tipografías en vivo y en directo.
También es una buena idea pedirle a otras personas que hagan este ejercicio. Ya que llevas tiempo trabajando con una fuente puede que te hayas acostumbrado a ciertas características propias que tal vez dificultan la legibilidad. Así que para asegurarse es mejor que otra persona que no ha intervenido en el proyecto vea la composición y a partir de ahí analices si existe algún tipo de problema que debe ser solucionado.
En conclusión…
La jerarquía tipográfica es otro tipo de jerarquía visual en donde se aplican ciertas reglas similares. Pero aparte de considerar los colores y la relación de los elementos con otros, debes tener en cuenta las características propias de las fuentes para poder lograr una buena jerarquía tipográfica. Debes poner en práctica todo lo que sabes sobre selección de fuentes, uso adecuado de espacios en blanco y creación de composiciones visuales. Puede ser algo complicado en los primero proyectos, pero conforme vayas experimentando en diversos proyectos tendrás mayor facilidad para trabajar con fuentes.