Universidad Champagnat. Facultad de Informática. Licenciatura en Diseño Asistido. Mención en Diseño Editorial. Tecnología Editorial II: Medios Audiovisuales Profesores: Horacio Duek - Gonzalo Antón
TIPOGRAFÍA EN PANTALLA Anti-Aliasing
Al igual que el avance y mejoramiento en los sistemas de impresión, calidad de las tintas, papel, etc. tuvo su incidencia en las diferentes creaciones tipográficas a lo largo del tiempo, la irrupción del medio digital trajo consigo la aparición de nuevas tipografías adaptadas especialmente para ser usadas en dispositivos de baja resolución. El destino de estas tipografías ya no es el papel, sino las pantallas de ordenador. Las fuentes tipográficas diseñadas para sistemas de impresión tradicionales están pensadas para ser reproducidas en alta resoluciones y generalmente lucen mal en cuerpos pequeños en las pantallas de las computadoras. La mayoría de las mismas empiezan a experimentar serios problemas de legibilidad en cuerpos inferiores a 10 puntos, ya que las formas de los caracteres no han sido concebidas para ser reproducidas en una pantalla de baja resolución. Al ser sometidas al antialiasing para suavizar el escalonado de los trazos, se torna indefinida e ilegible en tamaño pequeño. En las tipografías concebidas para resoluciones de pantalla cada trazo y cada punto encaja exactamente en la trama de pixels.
Fig. A
Para poder entender el porqué de las tipografías pixeladas o pixel-fonts, es necesario dejar en claro el concepto del anti-aliasing, sus ventajas y sus problemas. El término aliasing es utilizado para describir los indeseados efectos producidos cuando la información visual es presentada en una resolución más baja que lo óptimo. Anti-aliasing en el mundo de la informática fue popularizado por la empresa Quantel con sus sistemas PaintBox a comienzos de los 80’s. Muchas de las funciones que hoy nos parecen básicas en PhotoShop, fueron desarrolladas en estos sistemas que costaban cientos de miles de dólares.
Fig. B
La figura A a la derecha muestra un caracter a resolución completa tal como se usa en la reproducción convencional. La fuente de perfil escalable permite su impresión a cualquier ampliación elegida. La información es de resolución independiente, ya que los trazos se definen con curvas del tipo Bézier. En la figura B, el suavizado del anti-aliasing promedia la densidad de los pixels que bordean el contorno del caracter. Los colores o grises intermedios suavizan la apariencia en la pantalla. La figura C muestra el efecto de suavizado con mayor detalle, aquí se pueden apreciar los grises intermedios que se generan. En cuerpo grandes, esto realmente ayuda a mejorar la calidad de la tipografía en la pantalla, pero en cuerpos pequeños suele tener el efecto contrario.
Fig. C
Por último, en la figura D, se muestra la descripción de un bitmap de un caracter. Estas fuentes, diseñadas especialmente para la pantalla, pueden lograr buena legibilidad en cuerpos muy pequeños. La gran desventaja es que estas fuentes tipografías no han sido pensadas para ser impresas y sólo funcionan a un tamaño específico para cual fueron diseñadas.
Fig. D
1 2 3
Universidad Champagnat. Facultad de Informática. Licenciatura en Diseño Asistido. Mención en Diseño Editorial. Tecnología Editorial II: Medios Audiovisuales Profesores: Horacio Duek - Gonzalo Antón
TIPOGRAFÍA EN PANTALLA Anti-Aliasing
Con la relativa baja resolución de los monitores, es bastante fácil reconocer cada pixel en la pantalla. Las líneas que encajan perfectamente en la grilla de la pantalla, ya sea porque son horizontales o verticales, o bien por tener una inclinación de 45º, no causan problemas. Pero las líneas que tienen cualquier otro ángulo de inclinación tiene que ser promediadas porque entran en conflicto con esta grilla y se ven escalonadas. Como se muestra en el ejemplo, la línea roja no responde a ángulos de 0º, 45º o 90º, entonces tiene que ir alternando su visualización en la grilla en hileras de 2 o 3 pixels. Si estas hileras forman una trama regular –por ejemplo siempre 2 o siempre 3 pixels seguidos- el resultado es relativamente bueno, si bien se percibe su escalonado, no es tan notorio. Pero cuando es irregular, como en el ejemplo, un proceso de anti-aliasing suaviza este escalonado mejorando su apariencia. La imagen ampliada a 1200% y la grilla han sido simulados, en realidad, no hay líneas que dividan la grilla, sino simplemente cuadrados. Cuando se trata de tipografía, cualquier borde que no coincida en este grilla natural de la pantalla, producirá escalones o serruchos. Las tipografías diseñadas para la pantalla sí coinciden con este grilla y se ven bien. Pero las fuentes destinadas al medio impreso pueden verse realmente mal en la computadora. Los pixels tienen un tamaño fijo y no pueden sub-dividirse, si uno quiere suavizar estos indeseados escalones, solo se puede lograr usando variaciones de tono. Incorporando pixels de distintos niveles de color o gris, se pueden suavizar los contornos de manera efectiva. Para suavizar un contorno de un caracter negro sobre fondo blanco, una aplicación como Photoshop creará entre 16 y 20 tonos intermedios de gris para colocar entre estos escalones, y a una distancia normal, el caracter se verá bien suavizado. Este proceso funciona muy bien para tipografías a grandes tamaños y sobre todo con trazos anchos o versiones bold. A medida que la letra se hace más pequeña, el conflicto con la grilla natural de la pantalla se hace mucho más severo. Los trazos horizontales y verticales de una tipografía deberían, idealmente, alinearse perfectamente con la grilla de pixels. Pero cuando esto no ocurre, se pueden hacer dos cosas: • Mover los trazos de los caracteres, modificando las proporciones del diseño original. Este proceso se llama hinting. • O bien se puede similar la posición de los trazos usando la misma técnica de ilusión de tonos, usada para suavizar contornos. Para lograr la impresión de que una línea de 1 pixel de ancho, que está entre 2 pixels de la grilla, se pueden agregar tonos más claros del mismo color en las líneas adyacentes.
1 2 3
Universidad Champagnat. Facultad de Informática. Licenciatura en Diseño Asistido. Mención en Diseño Editorial. Tecnología Editorial II: Medios Audiovisuales Profesores: Horacio Duek - Gonzalo Antón
TIPOGRAFÍA EN PANTALLA Anti-Aliasing
En el ejemplo de Gill Sans Light a la derecha, los trazos de los cuerpos más pequeños deberían ser menores a 1 pixel, cosa que obviamente no puede ser, entonces los caracteres se vuelven difusos, como si tuviesen aplicado un efecto de blur, resultando en un texto con muy mala legibilidad. El anti-aliasing en los 18 puntos de Gill Sans Bold es proporcionalmente mucho menor al trazo y la forma de todo el carácter, y aquí cumple su función de suavizar los bordes logrando una visualización de mejor calidad. Las 3 líneas de Helvetica a 12 puntos con anti-alias muestran como algunos trazos coinciden con la grilla de pixels y otros no lo hacen. El hecho de que cada línea comienza en una posición horizontal diferente significa que la relación entre la grilla y el trazo difiere en cada caso particular. La primera y la tercera línea de Helvetica son casi iguales, pero no idénticas. La imagen ampliada muestra lo que ocurre cuando un trazo no coincide con la grilla natural. En la primera línea, la letra “l” cae en la mitad de 2 pixels, pero en la segunda línea del ejemplo, la letra coincide perfectamente con la grilla, y queda perfectamente formada. La inicial “H” tiene uno de los trazos verticales que coincide y otro que no, haciendo que bajo ninguna posición la totalidad de la “H” sea bien representada. Con paciencia uno podría seleccionar los mejores caracteres e incluso parte de cada uno de ellos y componer una línea de texto perfecta. Esto sería como hacer un hinting manual, pero en términos prácticos es casi imposible por el tiempo que demandaría. Aquí se llega al punto donde es casi imposible describir la forma de una letra determinada por un número de pixels utilizando estas técnicas, pero la calidad de la tipografía sufre drásticamente mucho antes de llegar a este punto. Para cuerpos pequeños, es más apropiado usar tipografías para pantalla bien diseñadas. Tipografías para pantalla significa que han sido diseñadas píxel por píxel pensando en la grilla natural del monitor, y no intentando adaptar un diseño a esta grilla. Para texto en HTML, no existen muchas opciones de fuentes a elegir, aunque por suerte en los últimos años este set se ha ido ampliando y masificando. Las tipografías varían de computadora en computadora, pero existen algunas que con seguridad se encuentran en los sistemas de los usuarios. En la elección de fuentes para botones, gráficos o animaciones los diseñadores tienen mucha más libertad. A cuerpos de 14 pixels o más se les puede aplicar anti-aliasing con bastante éxito. En altura de 12 pixels, depende mucho del espesor de los trazos y el diseño propio de cada tipografía. Por debajo de los 12 pixels, es casi seguro que la elección debería limitarse a una tipografía de pantalla sin anti-aliasing. Los ejemplo de tipografías de PC y Mac mostrados aquí, son casos donde se tiene que elegir entre una letra nítida pero pixelada o escalonada, o bien una letra suavizada, pero más borrosa, con mucho menos nitidez. Existen varias técnicas para generar distintos tipos de anti-aliasing, algunas más apropiadas que otras según la ocasión. Las últimas versiones de Adobe Photoshop ofrecen 4 técnicas: crisp, sharp, strong y smooth, pero es posible que en futuras versiones se incorporen nuevas técnicas más avanzadas y eficientes.
1 2 3