En toda composición debe haber un orden jerárquico entre los elementos para poder guiar la vista de los espectadores y para darles pistas sobre aquellos que son más importantes que el resto. En diseño web, estos elementos usualmente llamarán la atención de los visitantes y estimularán cierta acción, ya sea inscribirse a un servicio o seguir navegando en el sitio.
La jerarquía visual no sólo se aplica a las imágenes, sino también al texto. Esta jerarquía tipográfica se puede considerar como una sub-jerarquía ya que forma parte de la jerarquía visual y, como su nombre indica, se refiere al orden de importancia de los bloques de texto.
En este artículo listamos los elementos que debes tomar en cuenta para poder establecer una jerarquía tipográfica adecuada en tus diseños.
El espacio total
El espacio con el que cuentas para tu composición es un factor determinante para poder establecer un puntaje adecuado para tus fuentes. Deberás tener en cuenta los espacios donde no incluirás texto, es decir, dónde sólo colocarás imágenes o iconos.
Para hacer de esta una tarea más sencilla puedes dibujarlos en tu boceto como bloques. Añade algún símbolo a aquellos cuadrados o rectángulos que son imágenes y aquellos que son bloques de texto para que puedas diferenciarlos y verificar qué tanto espacio real tienes para tus textos. Deberás considerar también los espacios en blanco, particularmente los micro-espacios.
El tamaño del cuerpo de texto
Si bien el título es el primer texto que los visitantes notarán al ingresar a tu sitio web, probablemente la información más relevante para ellos se encuentra en el cuerpo de texto que conforma un gran porcentaje del contenido del sitio web. Por ello, es recomendable determinar la fuente que usarás, el puntaje y el interlineado.
Una vez que hayas delimitado el cuerpo de texto, podrás elegir el puntaje y fuente para los otros elementos como el título, subtítulo, citas, leyendas, etc. Las decisiones que hagas para estos elementos dependerán del cuerpo de texto. Como ya debes saber, el tamaño de cada texto va aumentando según su importancia. Los títulos serán el elemento de texto más notorio del sitio, le seguirán los subtítulos, la navegación, el cuerpo de texto y por el último, el footer.
De manera usual, los elementos más importantes van al inicio de la página. Por eso, el título siempre es el bloque de texto más visible en cualquier página web y el footer se coloca al final.
Los patrones de lectura
Uno de los patrones más comunes de lectura en la web sigue el contorno de una “Z” o una “F”. Esta es uno de los factores más relevantes que podemos tener en cuenta al diseñar, ya que de manera natural la vista de tus visitantes se posará en las esquinas superiores. No es casualidad, entonces, que en muchos diseños se coloque el logo en la esquina superior izquierda. Como la vista del usuario tiende a posarse en estas zonas, es un lugar propicio para el logo. De esta manera, el visitante asocia la marca con el mensaje que deseas transmitir y que se encontrará visible no bien
Emplea este conocimiento sobre los patrones de lectura de los visitantes para colocar los bloques de texto de manera que sea más conveniente a la lectura visual.
Los pesos visuales
Si bien el tamaño de los bloques de texto determinan qué tan notable será ese elemento en la pantalla de los usuarios, no es el único factor importante. Los pesos visuales de cada elemento también tienen un impacto en la lectura visual y en la composición en general. Por esta razón, al elegir las fuentes para tu texto debes tener en cuenta el peso visual de cada una de ellas pues hará que éstas luzcan más grandes. Así que, como ves, es de gran importancia considerar los pesos visuales.
Te listamos una serie de características que tienen impacto en el peso visual de las fuentes:
- Fuentes con bastones gruesos
- Fuentes que poseen alguna decoración adicional
- Fuentes anchas
- Fuentes que emplean mayúsculas siempre
- Fuentes en negrita
Todos estas particularidades de las fuentes que elijas incrementarán su peso visual.
El número de variaciones de la fuente
Algunas familias de fuentes incluyen muchas variaciones. Entre las más comunes encontramos “Negrita” y “Cursiva”, pero existen muchos otras. La fuente Helvetica Neue, por ejemplo, tiene 51 variaciones, lo que abre muchas posibilidades para los diseñadores pues mantienen la unidad de la composición, pero le pueden agregar diversidad al incluir una variación de la fuente.
Las variaciones de fuentes en el diseño web se usan a menudo para destacar cierta frase o palabra. Esta simple técnica puede ayudar a reforzar el mensaje, por lo que es bastante común ver cómo se aplica en diversos sitios web. De manera que, si se añade una variación a cierta palabra de cierta forma ésta tendrá mayor importancia y esto es algo que debe considerarse al establecer una jerarquía tipográfica.
Por supuesto, no sólo las variaciones que posea determinada fuente pueden ayudarte a destacar palabras, sino que también puedes hacerlo mediante el color o usando una animación sencilla en dicha palabra.
En conclusión…
Establecer jerarquía tipográfica en un proyecto web puede ser una tarea compleja y existen diversos factores que debes tener en cuenta. En base a éstos puedes desarrollar estrategias efectivas para determinar una correcta jerarquía tipográfica. Si tomas estos factores en cuenta, estamos seguros de que podrías facilitar el proceso. Asimismo, te recomendamos documentar este proceso, especialmente en la fase selección de puntajes pues podrías encontrar cierto patrón al trabajar con porcentajes. Estos patrones podrían serte de utilidad en próximos proyectos que tengan cierta similitud.
