jueves, 8 de marzo de 2012

Recomendaciones para el uso tipográfico en diseño web

Gracias a la implementación en casi todos los navegadores modernos de la regla @font-face podemos hacer uso de muchas tipografías para nuestros diseños web. De la misma manera que en el “medio off” la tipografía juega un papel muy importante, en nuestros diseños web ocurre lo mismo y por ello hay que seguir unas recomendaciones para su elección y aplicación.

La tipografía en diseño tiene un doble papel, por un lado establece un compromiso entre su presencia gráfica con relación a otros elementos visuales y por otro lado sus necesidades de legibilidad.




Las funciones que la tipografía desempeña en el diseño implica que los diseñadores debemos pensar que tipo de personalidad es apropiado para una correcta legibilidad (en papel o pantalla) para poder comunicar nuestro mensaje. El tipo de letra que se emplea puede ayudar o entorpecer la transmisión de la información puesto que cada una de ellas provoca diferentes sensaciones en el usuario.

Hoy en día no podemos hablar de estándares para visualizar tipografías en pantalla, actualmente hay diferentes dispositivos, plataformas y diversas resoluciones de pantalla que hacen difícil seguir unos criterios exactos para un uso correcto, pero si unas recomendaciones que ayudan a conseguir nuestro propósito.

Aunque las reglas básicas de tipografía son las mismas en papel que en pantalla, en el diseño web hay características especiales. Por ejemplo, la legibilidad que ha de proporcionar una tipografía en papel no es posible en web a causa de las características del pixel del monitor

Como diseñadores web controlamos la tipografía mucho menos en pantalla que en papel, generalmente la resolución es menor por la cual cosa los detalles finos no están bien definidos.

Por todo ello, la velocidad de lectura es aproximadamente un 30% menor que en papel. El usuario hace una rápida barrida en vez de leer, por lo que entonces la compresión y la retención se reducen al 50%. De la misma manera, el scroll horizontal y vertical dificultan la fluidez de lectura.

Un buen uso de la tipografía depende del contraste visual entre letras y bloques de texto con el blanco, y es natural ya que el ojo se siente atraído por el contraste. Nos fijamos primero en el conjunto de la web, luego pasa el reconocimiento de las diferentes partes y, finalmente, llegamos al detalle de las palabras.

De esta manera las recomendaciones para el uso tipográfico en un diseño web lo podemos dividir en dos partes: la legibilidad y la amenidad

“La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, el interlineado y otros factores tienen una influencia decisiva en la función del tipo.”Lewis Blackwell (1998)

Los aspectos que pueden influir en la legibilidad de un texto:
  • El diseño del tipo: las familias que consiguen mayor diferenciación entre caracteres parecen ser más legibles. Si el diseño de letras es muy homogéneo dificulta la lectura. 
  • Serif o Sans-serif: actualmente hay cierto consenso en que las tipografías con remates consiguen una mayor diferenciación entre letras y, en consecuencia, una mayor legibilidad, y suelen usarse en textos continuos.
  • Caja alta o baja: la caja alta tiene una alineación horizontal homogénea que uniformiza las letras. La caja baja, con caracteres más individualizados, ofrece menor dificultad de lectura.
  • El estilo o peso: La negrita y la itálica son resultantes de algoritmos que añaden píxels extras al contorno de las romanas. Un peso medio es más legible que una fuente fina o negrita (aunque la negrita dentro de un texto normal llame la atención por su peso). Las fuentes cursivas pierden legibilidad por su inclinación, es recomendable no utilizarlas en textos largos.
  • Anchura de la fuente: una fuente demasiado ancha o demasiado condensada pierde en legibilidad. Se suele usar el modo condensado para informaciones secundarias que tienen que ocupar poco espacio.
  • El soporte: las propiedades del soporte influyen en la legibilidad. La baja resolución de las pantallas de televisión y de ordenador paradójicamente baja la legibilidad de las tipografías con remate.



Los aspectos que influyen en la amenidad de lectura:
  • Espaciado entre letras y palabras: un espaciado reducido puede percibirse como un amontonamiento de letras; si es demasiado amplio, puede fragmentar el texto.
  • Tamaño del tipo: hoy en día podemos encontrar tipos diseñadas especialmente para la pantalla , estas están pensadas para adecuarse a la matriz creada por los píxels y cada letra está pensada y optimizada en función de la pantalla. Normalmente las tipografías están diseñadas en medidas específicas (8, 9, 10, 12) y si se utilizan en un cuerpo para el cual no están pensadas (11, 13…) se generan mediante un cálculo que aproxima visualmente a la medida solicitada, pero perdiendo todo el detalle y la definición del diseño original. Es evidente que influye en la lectura, aunque hay que valorarlo conjuntamente con el tipo de soporte y la familia tipográfica escogida.
  • Ancho de columna: gracias a la tendencia en el mercado del uso de pantallas panorámicas, la mayoría de webs tienen el doble de anchura del alcance adecuada al ojo, por la cual cosa exige un esfuerzo extra para leer los textos. Se recomienda limitar el uso de columnas, aún así si se utilizan es preferible crear párrafos con una anchura más estrecha que en el papel. Un tamaño estándar podría ser entre 12 y 15 palabras por columna. Una columna muy estrecha fragmenta el texto; en una demasiado ancha el lector encuentra con dificultad la línea siguiente.
  • Interlineado: si es demasiado estrecho obtenemos un abarrotamiento de texto con difícil lectura. Si es demasiado ancho, interrumpe continuamente la lectura, que obliga a atravesar continuamente espacios blancos. Se recomienda incrementar la interlinea un 150% más que en papel, especialmente en tipografías Sans-serif que no poseen la guía horizontal que forman los remates y que ayudan al ojo a seguir el flujo del texto
  • Alineación: la alineación a la izquierda y la justificada son las más legibles, aunque es preferible la primera. Para textos cortos se puede usar la centrada o la alineada a la derecha. La justificada dificulta la amenidad de lectura si provoca demasiado espaciado entre palabras o un espaciado muy variable.Contraste de color: la utilización de colores demasiado parecidos entre el texto y el fondo dificultarán la amenidad de lectura. Hay que buscar un contraste fuerte: colores claros con oscuros, colores muy saturados con poco saturados.

Publicado por David León a las 16:28
Etiquetas: , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)