Pixel Fonts - Fuentes Pixeladas

Las fuentes que son diseñadas para impresión a alta resolución, usualmente no se ven bien en las pantallas, al ser utilizadas en tamaños pequeños. Y cuanto más pequeña, peor se visualizarán.

Las formas de los caracteres que no cuadran dentro de la grilla natural de la pantalla se verán mal simplemente porque las formas se muestran dentro de la baja resolución de las pantallas. Si las sometemos al anti-aliasing para deshacernos del escalonado típico, y las suavizamos, se ven borrosas y casi no se distinguen en tamaños pequeños.
        Pixel fonts como MINI 7, Tenacity, MiniVista y MiniSerif son diseñadas especialmente para resoluciones de pantalla y cada trazo o punto se ubica exactamente dentro de esa grilla como si se tratara de un mozaico. Y es por esa razón que se ven bien demarcadas y nítidas aún en tamaños muy pequeños. Sus formas evitan las curvas prefiriendo el uso de las líneas horizontales y verticales.
        Por otra parte, las fuentes pixeladas tienen un tamaño fijo, y no son realmente escalables. Utilizandolas a otros tamaños que no sean los naturales, veremos rápidamente la distorsión. A un tamaño multiple del tamaño natural, estas fuentes se ajustan a la grilla de pantalla nuevamente, pero en ciertos casos pueden verse algo gordas o pixeladas también: Lo cual depende del efecto que estemos buscando.

Existe una considerable confusión sobre lo que es resolución en pantalla y tamaños de fuentes. Tradicionalmente, las fuentes tenían sus tamaños especificados en 'puntos'. Un punto es una medida tipográfica que equivale a 1/72 de una pulgada cuadrada.
        Desde la introducción, en 1984 de las computadoras Macintosh las pantallas, han tenido una relación de 1 punto = 1 pixel, lo que es muy simple de entender. Las Mac siempre han tenido una alta resolución de pantalla como para poder mostrar los tipos y las imágenes a 72 pixeles por pulgada.
        Las computadoras para oficina (PCs) acostumbraron a tener menor resolución de pantalla, pero con pixeles más grandes. Originariamente se usaban junto a impresoras de matriz de puntos o de abanicos, donde la diferencia entre lo que se veía en pantalla y lo que quedaba impreso era poca. Cuando aparecen las impresoras laser jet y laser ink, las PCs todavía tenían, relativamente una baja resolución en pantalla. Y antes de arruinar los ojos de sus operadores, Microsoft logró que la resolución de pantalla por defecto, en Windows, sea de 96 pixeles por pulgada. Efectivamente un 33% más grande que el tamaño actual de impresión. Como no pudieron achicar los pixeles, hicieron que las pulgadas sean más grandes.
        En estos días, Mac y PC comparten las mismas resoluciones en monitores y en (casi) todos los programas WYSIWYG. Pero todavía persiste el tema de los 'puntos' en Mac que corresponden a 1/72 de pulgada y en una PC solo corresponden a 1/54 - un tercio más grandes.
       

La buena noticia es que para los gráficos destinados a la Web, no nos importan las medidas en puntos. Las pantallas de las computadoras, independientemente de su tipo, tienen cierto número de pixeles, tanto en alto como en ancho. Generalmente si tenemos un monitor de 15", la resolución será de 800 x 600 pixeles. Si se trata de uno de 17", será de 1024 x 768 y cuanto más grande sea el monitor, admitirá pixeles más grandes y con mayor profundidad. Si dividimos el ancho por el alto de nuestra pantalla en pulgadas, por su ancho en pixeles, obtendremos un valor que corresponde a los famosos PPI: Pixels Per Inch. Hay que recordar que las medidas de las pantallas se toman por la diagonal del área visible del tubo. En un monitor de 17" tenemos una imágen de algo así como 12" de ancho.

Los valores en PPI no cambian mucho de un usuario a otro, y el promedio está entre los 80-85 PPI (800/9.5 o 1024/12) para una lectura confortable en un monitor de buena calidad.

A pesar que los tamaños de las fuentes siguen siendo especificados en puntos, lo que realmente nos interesa es el alto en pixeles, lo cual no tiene mucha relación con el mismo tamaño en puntos, cuando hablamos de medidas para pantallas.
        Cuando se trata de usar fuentes pixeladas, el tamaño se mide en pixeles y no en puntos. Si por ej. usamos una fuente pixelada y la utilizamos en un documento, al cual seteamos en 72 PPI, los puntos y los pixeles se verán iguales. Pero si tratamos de setear la resolución a 96 PPI, ya encontramos los problemas, porque muy pocos programas nos permitirán ingresar un tamaño en puntos con decimales (7,5 puntos) para obtener 10 pixeles.

Para mantener las cosas simples, supongamos que la resolución de nuestro documento es de 72 PPI. No hay diferencias cuando se trata de navegadores y lo que éstos nos muestren, pero si nos simplificará la tarea cuando tengamos que especificar un tamaño para nuestra tipografía. Entonces lo ideal es no utilizar pulgadas, centrímetros, puntos o cualquier otro sistema de medidas, habituales en el mundo real: ajústense a los pixeles!

La mayoría de los programas que se utilizan para crear gráficos destinados a la web se pueden setear para trabajar en pixeles y con una resolución de 72 PPI.
Programas como Adobe Photoshop y Macromedia Fireworks nos dan variadas opciones para suavizar las fuentes, pero cuando usamos pixel fonts, deberemos desactivar por completo todo tipo de anti-alias.
        Hay que tratar de alinear el texto a la izquierda, sin tracking ni kerning. Pero si podemos agregar leading, tanto como se desee. Utilizar un alineamiento al centro, no es aconsejable porque se pueden producir desniveles causado por ciertos errores de redondeos. Si necesitamos centrar el esquema de la página, es mejor hacer los ajustes en forma manual si hay algunas lagunas o solapamiento entre letras.

Otros programas no funcionan en pixeles absolutos pero si utilizan gráficos vectoriales, el más conocido: Macromedia Flash.

Pixel fonts y Flash

Macromedia Flash es muy eficiente cuando se habla de ancho de banda porque utiliza vectores en lugar de mapas de bits. Los vectores también tienen la ventaja de ser independientes de la resolución, ya que se escalan a cualquier tamñano, y por ende, el concepto de pixeles acá resulta irrelevante.

Utilizar fuentes pixeladas a tamaños exactos como por ejemplo la serie MINI, en un medio en que los pixeles no influyen, involucra ciertos compromisos.

Primeramente, Flash suaviza por defecto toda tipografía, lo cual está muy bien para la mayoría de las fuentes y las formas vectoriales. Pero las fuentes pixeladas de tamaños pequeños se tornan borrosas e ilegibles. Para evitar esto, lo mejor es publicar la película Flash en modo ‘Low Quality’. Desafortunadamente, esto afecta a todo el material incluído en la película: formas, fuentes, etc, y lo que se debe ver sin irregularidades, aparecerá con desagradables bordes de serrucho. Aún con niveles múltiples, no es posible tener más de un tipo de calidad al momento de reproducir la película.

El segundo problema es que si dejamos que Flash escale la película a otro porcentaje que no sea el normal 100% en pixeles, la relación pixel-a-pixel que seteamos al crear las cajas de texto, se destruye. Esto significa que no podemos escalar al 150% por ejemplo, ya que no podemos tener un pixel y "medio".

Aún al 100%, Flash nos permite ubicar los objetos en posiciones x,y fraccionales. Cualquier fuente pixelada, que no quede bien alineada dentro de la grilla natural de pixeles, se verá mal: el espaciado quedará forzado al pixel más cercano.

Entonces, para éste tipo de fuentes, lo mejor es publicar en ‘Low Quality’ o calidad baja, ajustar la visualización al 100% exacto y asegurarse que todos los textos se ubiquen en una posición x,y exacta y sin decimales, en la pantalla (por medio del Panel de Propiedades).

Si tenemos gráficos de ‘High Quality’ o alta calidad en pantalla, al mismo tiempo que estas fuentes, y los primeros se ven borrosos, la solución es crear el texto, en un pequeño archivo GIF de dos colores a lo sumo, e importarlos dentro del documento Flash. Tal vez obtengamos una película un poco más "pesada" que si usáramos vectores, pero no mucho más. Desde la biblioteca, en Propiedades, podemos especificar que el archivo GIF no se suavice (destildar la opción: Allow smoothing/ Permitir suavizado). Las restricciones al momento de escalar en las posiciones x,y se mantienen, ya que las imágenes de mapas de bits de baja resolución no se escalar.

En un mundo ideal, podríamos publicar en alta calidad y eso sería todo. Pero desafortunadamente hay un error en Flash (bug) que a veces, modifica el tamaño de los GIFs importados, en apenas unos pocos pixeles. Esto puede distorsionar toda una palabra o frase. La documentación sobre este error se puede encontrar en una nota técnica de Macromedia que sugiere utilizar lo que se llama 'break apart' o convertir a curvas (se incluyen otras técnicas también) para evitar que una imágen se muestre a otro tamaño que no sea el real. Según dichas notas el error se presenta desde la versión 3 y no hay nada que hacer al respecto!

   

• Usar fuentes pixeladas solo en los tamaños en que fueron diseñadas o múltiplos exactos.
   
• Asegurarse que no tengamos activado ningún tipo de anti-alias.
   
• Evitar el alineamiento al centro cuando se especifiquen las cajas de texto.
   
• No usar tracking ni kerning - usar el espaciado apropiado en pixeles, en las fuentes Extras.
   

 
Joe Gillespsie

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

Typography

Carina C. Kornowski