10
Dic 2013

Tipografía web:
elegir la fuente correcta

El principal motivo por el que un usuario accede a un sitio web, es porque necesita obtener información. Si el texto que le presentamos es difícil de leer es poco probable que este continúe navegando el contenido para buscar otros temas de interés. Uno de los principales factores que pueden afectar la legibilidad de nuestro contenido está ligado a la fuente que apliquemos. Durante esta publicación hablaremos sobre los aspectos a considerar para elegir la fuente correcta, que sea de fácil lectura y además que nos permita comunicar adecuadamente.

tipos

Dentro del proceso de lectura, lo primero que hacemos es identificar las letras por su forma, parte importante de poder diferenciar una letra de otra esta en los trazos que la componen, el espacio dentro de ellas y la separación entre cada letra. Si se altera alguno de estos elementos, la legibilidad se verá afectada.

nomenclatura

En la imagen anterior, observamos un señalamiento, los trazos de cada letra son claros y la separación de las letras permiten diferenciar cada elemento de otro. ¿Pero qué sucede con el paso del tiempo con el señalamiento? Posiblemente algunos elementos se desgasten por causas naturales, haciendo que algunas partes desaparezcan u otras vayan adelgazando sus dimensiones. Esto dificulta la lectura y que no pueda transmitir correctamente la información.

Lo anterior podemos aplicarlo al contenido digital, las pantallas de dispositivos y los monitores de computadoras poseen diferentes resoluciones, dependiendo de la resolución la cantidad de píxeles disponibles en cierta área puede ser mayor o menor. Supongamos que contamos con un monitor que permite 72 pixeles por pulgada y otro con 96 píxeles por pulgada, una fuente de 14px aparentará ser más pequeño en el segundo, además cada pantalla contará con un espacio de 14 por 14 píxeles para desplegar cada letra, por lo cual trazos demasiado delgados no serán visibles y el efecto será similar al señalamiento dañado.

Anatomía de caracteres.

Para poder entender correctamente como se ven afectados los caracteres por la resolución de una pantalla, debemos conocer los elementos de trazo de las letras y la separación que existe entre ellos, así como de su alineación.

alineaciones En la anterior imagen podemos identificar los siguientes elementos.

  • Alineación superior: el límite superior para los ascendentes de las letras (mas adelante se hablará al respecto).
  • Altura de mayúsculas: límite superior de las letras altas.
  • Altura x / Línea media: límite superior de las letras bajas, sin tomar en cuenta los ascendentes y descendentes.
  • Línea base: la línea desde donde se considera la altura de las letras.
  • Alineación inferior: el límite inferior para los descendentes de las letras.

Las letras que tienen una buena “altura x”  y cuentan con ascendentes y descendentes con trazos bien definidos poseen una mejor legibilidad. Un ascendente es la porción de la letra que va desde el la línea media hacia la alineación superior. Y los descendentes son las porciones que van desde la línea base hasta la alineación inferior.

ascedentesArriba podemos comparar los ascendentes y descendentes de Times New Roman y Georgia. Mientras que la primera posee trazos más finos, la segunda cuenta con trazos ligeramente más gruesos. Si redujeramos el tamaño de ambas letras, llegaría un punto donde las letras de Times serían difíciles de distinguir, mientras Georgia seguiría siendo legible.

Debemos tomar en cuento lo anterior al diseñar nuestro sitio ya que es normal utilizar distintos tamaños de texto para crear una jerarquía visual en el contenido. Si la fuente seleccionada posee demasiados trazos finos, haremos difícil  la lectura del contenido. Nuestra fuente debe tener trazos claros y gruesos para que cada letra se distinga de las demás y que al reducir su tamaño continúe siendo distinguible.

Comunicación a nivel emocional

Además de ser legible, lo siguiente a tomar en cuenta es si la tipografía seleccionada transmite personalidad y que vaya acorde al mensaje que queremos transmitir. Por ejemplo, las fuentes “serif” poseen patines y remates complejos, mientras fuentes “sans serif” evitan el uso de estos recursos y son más sencillas.

verdana-georgiaDebido a los usos que se les han dado a cada tipo de letra durante el transcurso de la historia, se considera que las fuentes de tipo “serif” son ideales para transmitir una imagen más tradicional, mientras que las de tipo “san serif” son usadas para diseños modernos. Esto debemos considerarlo al seleccionar nuestra fuente, pues si la idea que expresa el contenido contrasta con la emoción que transmite la letra, visualmente el mensaje perderá coherencia.

emocionA pesar de ser solo letras, dependiendo del estilo que tengan, nos transmiten una emoción que acompaña el significado de la palabra. Letras tradicionales no son adecuadas para transmitir mensajes alegres; por otra parte, si el contenido necesita tener fuerza  y atraer la atención, quizás letras modernas o manuscritas sean más adecuadas para ello.

Recordemos, el contenido debe ser legible y transmitir adecuadamente una idea, he ahí la importancia de elegir la fuente correcta para ello. Mientras tengamos en cuenta estos dos aspectos, acertaremos en seleccionar adecuadamente una fuente. Lo anterior aplica en el diseño en general, debemos solucionar problemas y no generar más sacrificando la legibilidad por el aspecto estético. ¿Ustedes qué otras consideraciones toman al momento de seleccionar fuentes? Nos encantaría leerlos.

Por: Arturo Tadeo / Diseño web

Deja un comentario

DOTTO