Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

123

TIPOGRAFÍA EN PANTALLAIntroducción

HISTORIACuando los tipos móviles fueron creados a mediados del siglo XV, los diseños de las letras trataban de imitar a sus anteceso-res, es decir caracteres dibujados a mano, con toda la influencia caligráfica que ellos contenían.

Más tarde, cuando aparecieron lo que hoy llamamos tipografías serif, debe haber sido muy dificultoso tallar esos finos detalles en el metal. Aunque las letras esculpidas en piedra se benefician de las serifas para evitar que los trazos se abran, hay muy poca justificación lógica de porqué fueron llevados a los tipos metálicos, aunque las “Romanas” dominaron durante muchos siglos en mundo de la impresión. Aunque las primeras letras sans-serif aparecieron a comienzos el siglo XIX, no fue hasta la década de 1920 que comenzaron a tener aceptación gracias a la Bauhaus.

Hoy, casi todo el trabajo de tipografía se realiza con las computadoras, y muchas de las fuentes que vemos y utilizamos han sido diseñadas hace décadas o siglos, y si no, al menos basan sus diseños en aquellas tipografías. Es difícil imaginar que la Garamond fue diseñada en el siglo XVI, y que todavía goza de una vida y uso increíble.

Los primeros sistemas digitales utilizados para configurar textos no intentaron mostrar los caracteres reales de la tipografía elegida en la pantalla. Sencillamente utilizaban una fuente genérica para la edición del texto y luego la computadora contro-laba el dispositivo mecánico que realizaba realmente la puesta de la tipografía.

A mediados de la década de 1980 ocurrió algo revolucionario. Apple Computer introdujo una computadora relativamente económica que podía mostrar diferentes fuentes en su pantalla. Así nació el concepto de WYSIWYG, “lo que se ve es lo que se obtiene”.

En las primeras versiones del sistema operativo Mac y Lisa, solamente existía la fuente de pantalla y esa misma era impresa en papel. La mayoría de estas fuentes fueron diseñadas por Susan Kare, y todavía hoy gozan de excelente claridad y legibili-dad en la pantalla.

No fue hasta la aparición de la impresora de Apple LaserWriter -que incorporaba por primera vez en la historia una tecnolo-gía de Adobe, el PostScript- y el programa de edición Aldus PageMaker 1.0 que el concepto WYSIWYG fue tomado realmente en serio.

Pero hubo un problema que todavía persiste en estos días. Los monitores son dispositivos de relativa baja resolución. Si bien está perfectamente al alcance de las empresas fabricar monitores con mucha mayor resolución, el problema es que las computadoras necesitan procesadores mucho más potentes para manejar esa cantidad de información. Monitores que traba-jen a 300 pixels por pulgada podrían ser fabricados, pero esa resolución requiere computadoras 9 veces más potentes, y los precios de las mismas serían inalcanzables.

Entonces, por lo menos durante el futuro cercano, estamos limitados a esta visualización de baja resolución para la tipogra-fía en pantalla, que luego es impresa en alta resolución para lograr la calidad de imagen que esperamos.

En el diseño editorial, la computadora y la pantalla del monitor son simplemente medios transitorios para lograr el resultado final en papel, mediante un proceso de impresión. En el diseño de páginas web o cualquier material interactivo, la pantalla no es un medio transitorio, es “el” medio. Aquí ya no se trata de una visualización previa, sino que ya estamos diseñando para la pantalla específicamente.

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

123

TIPOGRAFÍA EN PANTALLAIntroducción

PUNTOS Y PIXELESUn punto es el elemento más pequeño que una pantalla puede mostrar. Le sigue el pixel. El término pixel proviene de pictu-re elements, e indica la unidad mínima de una imagen en la pantalla del computador.

Un pixel puede tener distintos niveles de brillo y diferentes colores, dependiendo de la cantidad de bits que contenga. Un bit se refiere a la unidad de información del sistema binario (binary digit, en inglés), donde un bit puede asumir 2 estados: apagado o prendido, blanco o negro. El término bitmap se refiere a la retícula o mapa de bits donde cada pixel asume un estado y una posición específica.

Bitmap de 1-bit. Bitmap de 8-bit (escala de grises). Bitmap de 24-bit (RGB).

RESOLUCIÓN DE PANTALLAAlgunos conceptos nacidos en la tipografía impresa se han heredado a la tipografía para pantalla, pero cambiado su nivel de importancia y en algunos casos su significado.

Tradicionalmente el tamaño de los tipos está dado por su tamaño en puntos, una unidad de medida derivada de la división por 72 de la altura de la pulgada inglesa. Es decir, un punto es 1/72 de pulgada. Desde su creación en el año 1984, los monitores de las compuratoras Macintosh tienen una relación de 1 punto = 1 pixel. Años después Microsoft creó una resolu-ción de 96 pixeles por pulgada. Es por esto que en las PC el tamaño de la tipografía es de un tercio más que en las Mac. Un cuerpo de 7 u 8 en PC está perfectamente bien definido, mientras que en Mac se necesita un mínimo de 9 pixels.

La gran diferencia es que Apple instala el concepto WYSIWYG, del inglés What You See Is What You Get, que significa “lo que ves es lo que obtenés”. Lo que se muestra en la pantalla resultará impreso. Hoy en día, Macintosh y PC tienen los mismos monitores de alta resolución y tienen la posibilidad de variar el tamaño de los puntos para aumentar o bajar la re-solución de visualización. Esta característica de los monitores se llama Multi-Scan; hoy no existe monitor que no tenga esta función, pero hace unos años cada monitor sólo podría trabajar a una resolución determinada en fábrica.

En este escenario, la determinación de tamaños se altera. Si en el impreso un tipo de lectura estándar oscila entre los 8y 12 puntos, en pantalla estos cuerpos corren el riesgo de deformar la visualización de los caracteres. El trabajo con tipo-grafía en pantalla tiene sus problemas propios, sumando a la existencia de diferentes plataformas y distintos monitores nos encontramos que nunca es posible saber exactamente cómo un mismo sitio web será visto por los diferentes usuarios.

Comparación de tamaños percibidos en PC y Mac.

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

123

TIPOGRAFÍA EN PANTALLAIntroducción

LEGIBILIDADConvencionalmente se asume que las tipografías con serif poseen ciertas carac-terísticas que las hacen más apropiadas para la impresión de textos extensos. El serif -según algunos- colaboraría en el reconocimiento de los caracteres y a que el ojo siga con mayor naturalidad la línea de texto.

En pantalla, el exceso de rasgos en los caracteres difi culta su interpretación bit-map, por lo que corren el riesgo de deformarse con mayor facilidad, en este senti-do, las san serif en general son mejor visualizadas. Las fuentes de 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 perfecta-mente en la grilla de pixels sin distorsionarse y no poseen problemas de espa-ciado, como por ejemplo la Geneva o la MS Sans Serif. Algunas de ellas utilizan serifas pero con una fi nalidad distante de la convencional: 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 la Georgia, por ejemplo, en contraste con la Times New Roman o la Helvética, hace que las letras no se peguen entre sí o no den, cada tanto, huecos indeseados en el texto. Estos cambios bruscos en el ritmo le dan trabajo al ojo y hacen que el lector se disperse. Esto no signifi ca que no se puedan utilizar tipografías con serif en la pantalla, sólo que la existencia o no de estos rasgos dependerá de su correcto diseño para ser interpretadas por un bitmap.

Las diferencias más importantes entre la tipografía impresa y la tipografía en la web pueden enumerarse de la siguiente manera:

• La resolución de un monitor es muy inferior a una impresión en papel.• La pantalla es un dispositivo emisor de luz, esto cansa los ojos más rápidamente. En el medio impreso, el contraste de la tinta con el papel se percibe mediante luz refl ejada.• La orientación de las ventanas de los navegadores es generalmente horizontal, en lugar de la páginas tradicionales con disposición vertical.• Las líneas de texto suelen ser más largas en la web (hasta el doble), difi cultando la lectura y comprensión.• Generalmente no se visualiza la totalidad del contenido en forma simultánea. El usuario debe estar pendiente de las barras de scroll y botones.• Existe menos control sobre la tipografía y la puesta en página. Ésta es diná- mica, es decir que varía para cada usuario, dependiendo de la plataforma, el navegador y su confi guración, el monitor, etc.• Los sistemas operativos cada día incorporan más herramientas de fácil acceso. Es común que el usuario distraiga su atención con otras aplicaciones (e-mail, chat, etc) y con varios websites abiertos en forma simultánea.• Los lectores escanean en lugar de leer, la comprensión se reduce al 50%.• La velocidad de lectura es 25% menor en pantalla.

RENDIMIENTOA diferencia del medio impreso, la economía de espacio que ocupa una tipografía en textos para pantalla es menos relevante que su correcta visualización. En un impreso es posible mantener una lectura cómoda con tipos condensados y con un ajuste estrecho entre letras y tiene su justifi cación en el ahorro de material que esto signifi ca (menos papel, tinta, tiempo, etc). Para pantalla, la mantención de una regularidad de espaciado y su visualización son elementos importantes, y el rendimiento espacial de una tipografía no tiene relación directa con los costos de su aplicación.

Comparación de texto a 10 puntos confi gurado en Times New Roman y en Verdana. Nótese el cambio aparente de tamaño y la regularidad en la textura de la última.

1 I i J jAlgunas tipografías diseñadas para pantalla utilizan serifas como recurso para distinguir caracteres similares.En el ejemplo: Verdana y Trebuchet.