28 de abril de 2007

Tipografía en la web

El diseño digital tiene sus problemas propios, a los que se suma el hecho que existen diferentes plataformas y distintos monitores, y nunca es posible saber exactamente cómo un mismo website será visto por los diferentes usuarios.

La tipografía en la web es un tema nuevo, y si bien pueden aplicarse muchas reglas del medio impreso, existe un número importante de características propias del medio digital que deberán considerarse para redefinir pautas. En este momento, estas últimas están siendo creadas con el sistema de prueba-error. Las diferencias más importantes pueden enumerarse de la siguiente manera:

  • La orientación de las páginas es normalmente horizontal, en lugar de vertical;
  • Generalmente no se ve al mismo tiempo la totalidad del material;
  • El diseñador tiene mucho menor control de la tipografía y de la puesta en página que en el material impreso;
  • En general, la resolución es menor, por lo que los detalles finos no están bien definidos;
  • Por todo lo expuesto anteriormente, la velocidad de lectura es aproximadamente un 30% menor;
  • Los lectores escanean en lugar de leer, por lo que la comprensión y retención se reduce a un 50%;
  • Se suman las barras de scroll como problema/obstáculo;
  • El hipertexto es más fácil.

En un principio, era sumamente complicado tener un control de la tipografía y el creador de un website tenía muy poco control sobre cómo el usuario lo vería verdaderamente.

Desde la creación de las Cascading Style Sheets (CSS) –algo así como Páginas de Estilo–, una característica disponible en la mayoría de los browsers de la actualidad, es posible controlar varios aspectos de la tipografía y del formato de la página en general.

El buen uso de la tipografía depende del contraste visual entre fuentes y entre los bloques de texto y el blanco. El ojo es naturalmente atraído por los contrastes.

El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras; no en reconocer cada letra para luego juntarlas y formar la palabra. El ojo escudriña la parte posterior de las letras en el momento de leer y es por ello que las palabras compuestas todas en mayúsculas tienen menor legibilidad.

El ojo ve primero el conjunto de la puesta en página y el contraste que la misma presenta, para pasar en segundo plano al reconocimiento de las partes y por último, llegar al detalle de las palabras.

El uso de textos en pantalla viola las convenciones sobre las reglas básicas creadas para las piezas impresas. Las líneas de los bloques de texto son, en general, mucho más largas que lo necesario para una lectura relajada. En libros o revistas, por ejemplo, a una distancia del papel normal, el alcance ocular a lo ancho es de unos 8 cm, y es por eso que los párrafos (standard) conservan estas proporciones. El uso de líneas más anchas requieren que el lector gire su cabeza ligeramente o fuerce los músculos del ojo para poder seguir las líneas. Desgraciadamente, gran parte de las páginas en la web tienen el doble de ancho del alcance normal del ojo, por lo que se requiere de un esfuerzo extra para leer estos textos. Además, si la línea es demasiado ancha, como al ojo le cuesta ir de un extremo al otro, provoca que esa línea sea salteada o leída dos veces.

Como dijéramos anteriormente, con el uso de CSS es posible controlar varios aspectos de la puesta en página y, por lo tanto, hacer párrafos de líneas más cortas e incrementar la interlínea, que al ser utilizada generosamente (un 150% más que en impresión) mejora notablemente la legibilidad. Esto especialmente en tipografías sans serif, que no cuentan con la guía horizontal que forman las serifas, y que ayudan al ojo a seguir el flujo de texto.

La elección de la tipografía a utilizar es de suma importancia en el diseño digital, como lo es, por supuesto, en las piezas de diseño impreso.

Hay tipografías diseñadas especialmente para la pantalla y otras producidas por un cálculo basado en una descripción por software de la fuente. Las fuentes para pantalla están pensadas para calzar en la grilla de pixeles y cada caracter está pensado y optimizado en función a ésta. Las tipografías están diseñadas para ser usadas en tamaños específicos, como cuerpo 8, 9, 10, 12, 14, etc. Si se las utiliza en un cuerpo para el que no han sido pensadas, como por ejemplo cuerpo 11 ó 13, van a ser generadas mediante un cálculo que aproxima visualmente al tamaño solicitado, pero que pierde todas las sutilezas de diseño original.
Copyright © (bi)gital» 2001 | http://bigital.com/

2 comentarios:

Anónimo dijo...

bueno un par de apuntes.

Al diseñar una pagina web, hazlo para un tamaño de ventana pequeño (no siempre se usa la ventana de navegacion maximizada).
Ademas con los "nuevos" navegadores se ha sustituido la funcion de ampliar el tamaño de letras (como hace el firefox) a ampliar toda la pantalla (opera e ie). Por lo tanto si ven pequeña la pagina, directamente la ampliaran hasta el tamaño que crean mas oportuno.

Sobre los habitos de lectura de los usuarios, es un error comparar la web con un periodico, en un periodico se donde estan las secciones que me interesan, y puedo centrarme en su lectura. (el periodico es limitado).
El caso de paginas web es diferente, Ante la imposibilidad de leerlo todo, los usuarios tienen que hacer una preseleccion para localizar si la pagina o articulo trata sobre un tema interesante para el usuario. (es imprescindible una criba inicial para escoger en que se quiere profundizar en su lectura).

Una vez que los usuarios deciden leer a fondo un articulo, el tamaño de letra, diseño o contraste tiene menos importancia. Si el articulo/pagina es buena, lo leeran como sea.

Contraste: es habitual leer seleccionando el texto con el raton.

Tipografia: depende de las que tenga el usuario instaladas en su computadora.

Forzar los ojos al leer?: eso dependera del tamaño de pantalla, el zoom que tengan puesto y la distancia que esten de la pantalla.

Un saludo.

Anónimo dijo...

Este artículo presenta las tipografías más usadas en diseño web así como una breve reseña histórica de algunas de ellas y datos sobre cuáles son las que están instaladas en los sistemas operativos más populares.