07_workshop_tipografia_web

Page 1

(English)

Conferencias

Exposiciones

Workshops

Reuniones

Informes

Tipografía en la web

Ejercicios

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.

Apuntes

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

Legibilidad [ Tipografía en la web ] Tipografías para pantalla “Tipografías pixeladas” CCS - Cascading Style Sheets Bibliografía


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.

La Times, que es una de las tipografías más populares y disponibles en varias plataformas, es excelente para impresión pero no tiene buena legibilidad en la pantalla. Su diseño original fue pensado para hacer entrar la mayor cantidad posible de caracteres en menor espacio y ser, además, legible. Es por eso que la versión para impresión tiene una altura de x media a pesar de ser angosta, con serifas pequeñas y afiladas. Los ascendentes y descendentes cortos la hacen muy económica, pues reducen la necesidad de una mayor interlínea y de esta manera entran más líneas de texto por página. El mayor problema de la versión ‘bitmap’ de la Times es que no traduce estas sutilezas. Un pixel es un pixel; y es la medida más pequeña posible, no existe ‘medio pixel’ y el antialias no ayuda en cuerpos chicos. Entonces, lo que era una serifa delicada, termina viéndose bastante grotesco, con un ruido visual innecesario, especialmente en fuentes económicas como la Times. La mayoría de las fuentes para pantalla no han sido diseñadas para ser legibles en pantalla, sino para ser representadas lo más fielmente posible a 72 pixeles por pulgada (ppi) en PageMaker o QuarkXPress.


Asimismo, las variables bold o itálica también resultan de algoritmos que agregan, en el primer caso, extra pixeles al contorno de las romanas. La combinación de una tipografía no diseñada para el medio digital y ‘engrosada’ mediante un cálculo algorítmico tiene un resultado poco feliz. Y no es sólo la forma de la tipografía lo que se altera, sino también la interletra. Las itálicas todavía son peores a la hora de coincidir con la grilla de pixeles, dando por resultado textos muy difíciles de leer, especialmente en cuerpos pequeños.

Para formar una minúscula o mayúscula se necesita un mínimo de 5 pixeles de alto y en el caso de ascendentes y descendentes, 9. Tipografías como la Verdana, Georgia, Trebuchet, han sido concebidas para el uso en pantalla y, por lo tanto, coinciden con la grilla de pixeles. Su forma, en distintos cuerpos, así como su interletrado, están optimizadas para este medio haciéndolas sumamente legibles y recomendables.

Además de las dificultades mencionadas anteriormente, se suma el hecho que en las Macintosh los monitores tienen una resolución de 72 pixeles por pulgada (ppi), lo que hace que cada pixel sea equivalente a un punto de pica (pt); mientras que en las PC compatibles standard, la misma es de 96 ppi. Es por esto que en las últimas el tamaño de la tipografía es de un tercio más que en las Mac; dicho de otro modo, un cuerpo 9 en una PC es equivalente a un 12 en la Mac. Un cuerpo 7 u 8 en PC está perfectamente bien definido, mientras que en la Mac se necesita un cuerpo mínimo de 9 pixeles. De todos modos, cada vez más las tipografías están siendo optimizadas para su lectura en pantalla y muchas son puestas a disposición en


forma gratuita como el Microsoft Fontpack. Otras fundidoras ofrecen versiones optimizadas como el Adobe Webtype, pero no cualquier usuario accederá a pagar cerca de U$S 50 por un producto que ni siquiera entiende claramente para qué le sirve. Las fuentes para pantalla tienen en común algunas características como formas más abiertas, ojos más grandes, letras más anchas, mayor altura de x e interletra más generosa. Encajan perfectamente en la grilla de pixeles sin distorsionarse y no poseen problemas de espaciado como por ejemplo la Geneva o la MS Sans Serif. Algunas de ellas utilizan serifas pero con una finalidad distante de la histórica: distinguir caracteres que de otro modo podrían confundirse, como por ejemplo, las letras “j”, “i”, “l”.

La interletra más generosa de la Verdana o de la Giorgia, por ejemplo, en contraste con la Times New Roman o la Helvetica, hace que las letras no se peguen entre sí, o no den, cada tanto, huecos indeseados en el texto. Estos cambios bruscos de ritmo le dan trabajo al ojo y hacen que el lector se disperse. De todos modos, aunque las tipografías con serif suelen ser consideradas de mayor legibilidad, hay personas que vienen del ámbito tecnológico que consideran que las sans serif son más legibles. El ojo lee mejor lo que está más acostumbrado a ver. Derechos de reproducción de este artículo: Copyright © (bi)gital» 2001 | http://bigital.com/

Copyright © tipoGráfica 2001 | http://tipoGrafica.com/

Desarrollado por


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.