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.
¿Por qué?
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 pixeles que compone la misma.
Su morfología evita, en lo posible, las curvas, y se compone de líneas verticales u horizontales. Aun en cuerpos pequeños se las ve nítidas y definidas. Sin embargo, la desventaja de estas fuentes es que están fijas en un tamaño, y que no es posible redimensionarlas. Deben ser utilizadas en el cuerpo para la cual fueron creadas, de lo contrario los trazos verticales y horizontales que las componen se distorsionan. Utilizándolas exactamente con el múltiplo de su tamaño natural, coinciden nuevamente con la grilla de pixeles, pero se ven, justamente, pixeladas, y puede tener un efecto negativo salvo que sea lo que se está buscando.
Resolución de pantalla multiplataforma
Por lo general suele haber una gran confusión sobre resolución de pantalla y cuerpos tipográficos. Tradicionalmente, los tamaños de las fuentes están dados en puntos, una fracción del cícero, medida utilizada para tipos de plomo. Desde su creación en el año 1984, los monitores de las computadoras Macintosh tienen una relación de 1 punto = 1 pixel. Estos monitores tienen, desde siempre, una resolución standard relativamente buena, que puede reproducir tipografía e imágenes a 72 ppi (pixeles por pulgada). Las pantallas de los PC compatibles, generalmente, tenían una resolución menor, con pixeles más grandes. Utilizaban impresoras de matriz de punto cuya impresión no guardaba una relación cercana con lo que uno veía en pantalla. Cuando salieron las impresoras láser y las de chorro de tinta, los PCs todavía contaban con monitores de resolución relativamente baja. Microsoft creo una resolución de 96 pixeles por pulgada, exactamente 33% más grande que la impresión obtenida con dichas impresoras. No pudieron hacer los pixeles más pequeños, entonces aumentaron las pulgadas. Hoy en día Macintosh y PC compatibles tienen los mismos monitores de alta resolución y la mayoría de los usuarios utiliza programas WYSIWYG (en inglés «what you see is what you get», equivalente a «lo que ve es lo que obtiene») con interfaces gráficas, pero todavía la diferencia entre la resolución de Macintosh de 1/72 de pulgada con la de 1/54 de pulgada de las PCs hace que en las últimas todo se vea un tercio más grande. Lo bueno es que, en la web, no nos preocupan los tamaños en puntos. Las pantallas de computadoras, de cualquier tipo, son un determinado número de pixels horizontales y verticales. Generalmente, un monitor 15 pulgadas tiene una resolución de 800 x 600 pixeles; uno de 17, otorga un poco más de pantalla utilizando 1024 x 768 pixeles, y monitores más grandes aún permiten tener, consecuentemente, más resolución. Diviendo el ancho de la pantalla en pulgadas por el ancho de la misma en pixeles, se optiene la cantidad de pixeles por pulgada (PPI). Nótese que la medida de los monitores está especificada por la diagonal del área visible del tubo. Un monitor de 17 pulgadas tiene un ancho aproximado de 12 pulgadas. Los valores en PPI no cambian demasiado de un usuario a otro, y el valor promedio es de 80-85 PPI para una lectura confortable en un monitor de buena calidad. A pesar de que los cuerpos tipográficos están indicados en puntos, lo que realmente nos interesa es la altura en pixeles, que generalmente no tiene una relación cercana al cuerpo en puntos que vemos en pantalla. Cuando tratamos con «tipografías pixeladas», el cuerpo de la misma está indicado en pixeles, no en puntos. Si se inserta una de estas fuentes en un documento compuesto a 72 PPI, el tamaño será igual en pixeles que en puntos; en cambio si se las inserta en una resolución de 96 PPI, pueden experimentarse inconvenientes ya que pocos programas permiten ingresar una medida en puntos con fracciones, como por ejemplo poner 5,25 puntos para obtener el equivalente de 7 pixeles. Para hacer las cosas más simples, es conveniente mantener la resolución de los documentos a 72 PPI, y trabajar exclusivamente en pixeles.
Programas
La mayoría de los programas que se utilizan para diseño web pueden ser adaptados para trabajar en pixeles y a una resolución de 72 PPI. Programas como Adobe Photoshop y Macromedia Fireworks presentan la opción de antialias para la tipografía; que no debe estar seleccionada en el caso de utilizar tipografías pixeladas. Las mismas dan buen resultado si son utilizadas alineadas a la izquierda, y con el interletrado normal. El interlineado puede corregirse sin problemas. Si se quisiera utilizar texto centrado, hay que realizar un ajuste manual de los espacios debido a que el centrado standard presenta desajustes. Algunos programas trabajan de forma vectorial, como el caso de Macromedia Flash o Adobe Illustrator.
¿Cómo?
La manera de realizar una «pixel font» es muy parecida a la creación de una fuente normal. Josep Patau, que, además de su participación en unostiposduros, mantiene un sitio de experimentación y creación web que os recomiendo (www.astramat.com), ha diseñado el tipo Pixelade y nos enseña en la página siguiente paso a paso como lo creó.
En un principio se utilizo un programa de filosofía «bitmap» para crear un esbozo de las fuentes a tamaño real, en este caso se utilizo el programa Fireworws de Macromedia. En este documento figuran las líneas base, ascendente y descendente, para una correcta arquitectura y visualización de los caracteres.
Esta es la parte más importante del proceso, en ella debemos realizar todas los test y correcciones que sean necesarios, ya que será la base sobre la que realizaremos los siguientes pasos. El siguiente paso será redibujar los caracteres en un programa de formato vectorial como Freehand o illustrator, este trámite es necesario para posteriormente transcribir los datos en dicho formato, ya que es el utilizado por los archivos digitales de tipografía.
Incluimos una plantilla en freehand que os ayudara a la creación de vuestra tipografía, viene configurado en puntos, aplicando una vista al 100%, podemos visualizar fielmente el resultado.
No olvides unir los objetos y simplificar el trazado si en la realización de las fuentes se utiliza la herramienta de rectángulo y se solapan los diversos objetos que forman el carácter.
El siguiente paso consiste en transportar la información vectorial a un programa de creación de fuentes, para este fin hemos utilizado el popular Fontographer de Macromedia, que nos permite la exportación a diversas plataformas como PC, Macintosh, Next o Sun, a continuación detallaremos brevemente los pasos a seguir, partiendo de la tipografía Pixelade como punto de referencia.
Lo primero será crear un nuevo documento para definir las medidas y proporciones de la tipografía. Para acceder a estos parámetros elegimos «Modify» en el menú principal y la subopción «Font Info», aparecerá un cuadro con la siguiente información:
En esta ventana también podemos definir aspectos importantes, como el nombre de la fuente, así como la información del autor de la misma. Ya tenemos el documento configurado para poder insertar dentro de la rejilla de la ventana principal, los diversos caracteres que conforman la tipografía, partiremos de la letra «a» para efectuar el caso práctico. Para localizar la casilla, pulsa la letra correspondiente en el teclado, y «enter» a continuación si desea abrir la ventana correspondiente al carácter.
Una vez llegado a este punto, debemos traspasar la información del programa vectorial a Fontographer. Este paso puede resultar muy sencillo, o de lo contrario muy laborioso, depende de con que programas tengamos, sin ser cuestión de tener las ultimas versiones, si no las adecuadas. El autor eligió la facilidad que le otorga la compatibilidad entre Fontographer y la Versión7 de Freehand, para copiar y pegar objetos desde una aplicación a otra.
En una primera parte hablaremos de los pasos a seguir, eligiendo dicha opción. Lo primero será situar en la rejilla de la plantilla del documento de Freehand el carácter elegido, en este caso la «a», como no llega a ningunos de los dos extremos de la rejilla, dibujaremos dos cuadrados en los extremos de la línea ascendente y descendente, tal como muestra el gráfico.
A continuación seleccionaremos los tres objetos de la aplicación Freehand y los copiaremos en el portapapeles para pegarlos posteriormente dentro de la ventana correspondiente al carácter «a» de Fontographer.
El siguiente gráfico visualiza el resultado de dicha acción, puede observarse, que la aplicación pega el objeto memorizado en el portapapeles restingiendolo por la altura, y que la base del carácter coincide perfectamente con la línea base de la tipografía, consiguiendo así una exacta posición dentro del espacio.
Ya solo queda borrar los dos cuadrados para poder dejar el carácter perfectamente situado, y con su representación final en pantalla.
Queda aun por ajustar el espacio que define el interletraje, para acceder a estos parámetros, acude a la opción «Metrics» y elija el submenú «Set Width..», aparecerá una ventana con la siguiente información:
El valor que aparece 400, corresponde a la anchura del carácter con pixeles en un valor de 100/1, para dar 1 pixel de interlineado deberíamos sumarle 100 puntos, para 2 pixeles 200 y así consecutivamente. En el caso que nos ocupa, nos interesa dar 1 pixel como valor de interletraje, así que fijaremos el Whith a 500 puntos, tras el cual podremos observar el espacio señalizado con amarillo del gráfico, que corresponde al espacio destinado al interletraje.
Este es el proceso que deberíamos seguir hasta completar nuestra tipografía, al rellenar todas las casillas correspondientes de la rejilla de caracteres, ya tendremos nuestra tipografía a punto de ser exportada, no sin antes realizar unas comprobaciones para asegurarnos una correcta visualización de los caracteres en pantalla:
1. Seleccione todos los caracteres de la rejilla, y acuda a la opción «element» de la barra de menú, a continuación elige el submenu «Selection Info», se abrirá una ventana, fija allí como 100 el valor del parámetro «Tint».
2. selecciona todos los caracteres de la rejilla, y acuda a la opción «element» de la barra de menú, a continuación elija el submenu «Correct Path Direction».
3. selecciona todos los caracteres de la rejilla, y acuda a la opción «element» en la barra de menú, a continuación elija el submenu «Remove Overlap».
Si no dispones de la Version7 de Freehand para poder copiar y pegar en Fontographer, deberás exportar los caracteres individualmente en documentos «EPS» para su posterior importación en las ventanas de caracteres. Un detalle importante, es que al contrario que en la acción pegar, donde el objeto se restringe al cuerpo de la letra (ascendente+descendente), al importar se ajusta únicamente a la ascendente, así en este caso deberemos tener precaución de exportar los caracteres con el cuadro de posición si es necesario, a una altura de 10 pixeles en la plantilla de Freehand.
En este punto, ya tenemos a punto nuestra tipografía para su exportación para generar los archivos, hay que acudir a la opción «File» de la barra de menús, y elegir la subopción «Generate Font Files», aparecerá una ventana con la siguiente información:
Ha llegado el gran momento, es la hora de instalar las tipografías en el sistema, para posteriormente realizar los «Test» sobre párrafos de texto y ver el comportamiento de la letra, revisa todos los caracteres y utiliza textos diversos para observar su comportamiento en pantalla (interletraje, pixeles añadidos, etc.), una vez depuradas todas la anomalías que pueden surgir en el proceso, ya tendremos a punto el Tipo para su uso.
Todo este proceso de creación de fuentes, sirve también para la creación de las tipografías digitales clásicas, destinadas a dispositivos de preimpresión.
Bajar Pixelade para PC
Bajar Pixelade para Mac
