Aliasing es un término que se utiliza para describir ese efecto no deseado, que se produce cuando la información visual es presentada a una resolución menor a la óptima.
        Seguramente recordarán a esos viejos filmes de cowboys donde los rayos de las ruedas en coches o carretas parecían girar hacia atrás. Bueno, eso se daba porque la resolución de 24 fotogramas por segundo, era insuficiente para capturar el movimiento real hacia adelante de las ruedas, y se creaba esa ilusión, porque en los fotogramas posteriores el rayo siguiente casi alcanzaba la posición del que estaba en el fotograma anterior.

El Anti-aliasing en los gráficos para computadoras, fue popularizado por Quantel en su sistema Paintbox, allá a principios de los años '80. Mucho de lo que hoy damos por sentado en programas como Adobe Photoshop costó en realidad cientos de miles de dólares en los primeros sistemas de gráficos y video.
       

Con esta relativamente ordinaria resolución en las pantallas de computadoras, los pixeles individuales (elementos gráficos) son meramente apariencias.
        Las líneas de pixeles que perfectamente encajan en la grilla de una pantalla, son unicamente aquellas que son horizontales, verticales o diagonales a 45°, y por ende no ocasionan problemas. Toda otra línea que no caiga en esos lugares específicos de la grilla se verá escalonada.
        Como vemos en esta vista ampliada, la línea cyan se ve irregular con la grilla y va cambiando cada dos o tres hileras de pixeles.
        Si la hilera siguiera un un patrón o pattern regular, por ejemplo, cada dos o tres pixeles, se vería acorde a una línea, la cual, aún escalonada, no nos presenta un "ruido visual", y por ello no resultaría cuestionable.
        La versión antialias de la derecha se ve suavizada en dicho escalonamiento.

Las vistas aumentadas al 1200% tienen una grilla de pixeles simulada, donde en realidad no aparecen líneas sino simplemente cuadrados perfectos.
 

Cuando se trata de tipos, cualquier borde que no encaje en la grilla natural de la pantalla, producirá dicho escalonado. Algunas fuentes, diseñadas para preservar esa grilla natural, se ven realmente bien en pantallas. Algunas diseñadas en vistas a la impresión en alta resolución, terminan viendose muy mal cuando se muestran en las pantallas, o al menos su estilo y formato se ve severamente comprometido.

Los pixeles tienen un tamaño fijo y no se pueden cortar en pedacitos, como si quisieramos construir castillos con bloques. Si realmente deseamos remover o suavizar estos escalonamientos que muchas veces nos resultan desagradables, deberemos usar tonos y colores.
        Introduciendo algunos pixeles de color entre medio, es decir, entre nuesto color al frente y el de fondo, logramos suavizar los bordes de las líneas.

Para suavizar un borde de un simple caracter negro sobre blanco, en la pantalla, un programa como Adobe Photoshop puede llegar a crear de 16 a 20 tonos intermedios de grises para cubrir esas irregularidades. Para una vista a distancia normal la tipografía se verá bien, suavizada en sus contornos.
        Pero no importa el color de fondo - podría ser un color pleno de tipo fotográfico por ejemplo - los pixeles intermedios entre tonos y colores se utilizan para darnos la sensación de suavidad.
        Esto, asumiendo que el medio donde se apreciará (pantalla) puede manejar esa gran cantidad de colores. En un dispositivo de 8-bit con solo 256 colores, todos los tonos intermedios se pierden y solo se mostrarán aquellos que sean los más cercanos a la paleta que el medio puede mostrar.

La imágen a la izquierda nos muestra cómo los pixeles individuales han sido 'posterizados' en un navegador que solo posee soporte para 8-bit. Así y todo, se pueden obtener resultados aceptables.
       

Ahora bien, todo esto suena muy bien para una fuente en tamaño grande, y negritas por ejemplo. Pero a medida que la misma se hace más pequeña, el conflicto con la grilla natural de pixeles se convierte en algo mucho más grave.
        Los trazos horizontales y verticales de una fuente deben, idealmente, alinearse perfectamente con la grilla de pixeles. Cuando esto no ocurre, solo nos restan dos opciones.
        Mover los trazos para que queden alineados con la grilla - a expensas de la desproporción de los caracteres. A esto se le llama 'hinting' y usualmente se utiliza en dispositivos de alta resolución como ser imporesoras PostScript para mejorar la calidad de la imágen.
        O, podemos tratar de simular la posición verdadera de los trazos usando la misma ilusión con los tonos de fondo que usamos para suavizar los bordes. Para obtener una clara visión de una línea que se encuentra justo entre medio de dos pixeles, se pueden agregar tonos más claros de color en las hileras de pixeles adjacentes.

Aquí, en el ejemplo con Gill Sans Light, los trazos de los tamaños más pequeños deben ser más angostos que un pixel, lo cual es obviamente imposible, de esta forma los caracteres se tornan borrosos entre si. Resultado: texto ilegible.

El anti-alias en la imágen de Gill Sans Bold a 18 puntos es proporcionalmente menor si tenemos en cuenta el todo el conjunto de caracteres en sus formas, pero hace lo que debe hacer - suavizar esos bordes.
       

Tres hileras de Helvetica a 12 puntos con antialias nos muestran cómo los trazos se ajustan y al mismo tiempo se pierden en la grilla natural. El hecho que cada línea comience en una posición horizontal diferente significa que existe cierta relación entre dicha grilla y los trazos de cada fuente que difieren en los cada uno de los ejemplos. El primero y el tercer caso son casi iguales pero no exactamente idénticos.
        La versión aumentada now muestra lo que ocurre cuando un trazo pierde no encaja en la grilla. En la primera línea la letra 'l' se encuentra en el medio de dos pixeles pero en el segundo caso, está perfectamente formada.
       La inicial capital 'H' tiene un trazo que se ajusta bien en la grilla, y otro que no lo hace. De esta forma no hay manera que la capital 'H' se vea perfecta a este tamaño en puntos.
       Exactamente lo mismo ocurre con los trazos horizontales, pero en ésta instancia he tenido bastante suerte.
       Si tomamos los mejores caracteres de cada línea, y la mitad de la capital 'H' que si se ajusta a la grilla, las cortamos y pegamos, armando una composición única, lograríamos lo mejor de ambas. Aunque haciéndolo de ésta forma deberíamos incluir un 'hint' para los caracteres y ajustarlos según sus formas y espacios entre si (medio pixel).
       

Y aquí llegamos a un punto donde es casi imposible de describir las formas de la letra dentro de número determinado de pixeles, usando estas técnicas, aunque la calidad de la fuente se vea afectada mucho antes de llegar a estos extremos.
       Para los tamaños más pequeños en las fuentes, lo mejor es utilizar una buena fuente diseñada especialmente para la pantalla, que se apiade de la grilla de pixeles del monitor y que no esté en conflicto con éste.
        Para los textos en HTML, no tenemos mucho para elegir en ésta materia. Y solo difiere de un navegante a otro según su computadora. Donde tenemos un poco más de libertad es al elegir fuentes para incorporar en botones o gráficos.
       Tipos en tamaños de 14 pixeles en adelante, usualmente se les puede aplicar un anti-alias satisfactoriamente. Cerca de los 12 pixeles ya dependerá del peso y del diseño de la fuente en si. Menos que eso, ya se complica demasiado y lo mejor es elegir una fuente para pantalla sin anti-alias.

Los tipos de ejemplo para PC y Mac aquí expuestos son esos casos dudosos donde tenemos que elegir entre utilizarlos bien definidos (con 'crisp') pero pixelados, o decidirnos por uno más suavizado y borroso (con blur por el anti-alias).

Hay numerosas técnicas diferentes para producir anti-aliasing, y unas son mejores que otras. Prueben seteando el mismo texto en distintos programas, comparen los resultados y decidan por sí mismos cuál es más conveniente.
       

 
Joe Gillespsie

http://www.wpdfd.com/wpdtypo3.htm

Typography

Carina C. Kornowski