> Manuales > Curso práctico de diseño web

Tratamos la tipografía digital de manera general. Vemos técnicas y tipos de fuentes tipográficas para tipos de resoluciones de pantalla e impresión y cómo administrar las fuentes en un ordenador.

En este artículo del Curso de Diseño Web seguimos abordando los conceptos y conocimientos generales que todo diseñador debe poseer sobre fuentes tipográficas. En esta ocasión vamos a tratar dos asuntos relacionados y de gran valor para no hacerse líos al usar fuentes.

Por un lado vamos a hablar sobre las características de las fuentes tipográficas tratadas en dos medios muy diferentes, como es la impresión en papel y la visualización en una pantalla. A continuación en este mismo artículo vamos a abordar cómo se realiza la administración de fuentes en un ordenador, aclarando algunos procedimientos del trabajo habitual con fuentes en nuestro sistema.

Tipografía digital

La aplicación de la informática a la impresión, al diseño gráfico y, posteriormente, al diseño web, ha revolucionado el mundo de la tipografía. Por una parte, la multitud de aplicaciones informáticas relacionadas con el diseño gráfico y editorial han hecho posible la creación de nuevas fuentes de forma cómoda y fácil. Por otra, ha sido necesario rediseñar muchas de las fuentes ya existentes para su correcta visualización y lectura en pantalla, haciendo que se ajusten a la rejilla de píxeles de la pantalla del monitor.

Tipo digital

El tipo digital permite interletrar y diseñar caracteres mejor y con mayor fidelidad que el tipo metálico, existiendo actualmente en el mercado la mayoría de las familias tipográficas adaptadas al trabajo en ordenador, y las modernas aplicaciones de autoedición y diseño permiten manejar fácilmente las diferentes fuentes y sus posibles variantes en tamaño, grosor e inclinación.

También se han superado los problemas de falta de calidad de periféricos de salida mediante la tecnología láser y la programación PostScript. Esta última, especialmente, ha supuesto un gran impulso para el campo tipográfico, al permitir contornos de letras perfectamente definidos, basados en funciones matemáticas.

Otro importante avance en la tipografía digital vino de la mano de la compañía Apple, que lanzó el sistema de fuentes TrueType, basado también en la definición matemática de las letras, lo que permite un perfecto escalado de las mismas, sin efectos de dientes de sierra, de forma similar a lo que ocurre en los gráficos vectoriales.

Tipo TrueType

Por lo que respecta a las fuentes disponibles en un ordenador, los sistemas operativos instalan por defecto un número variable de ellas. Posteriores instalaciones de aplicaciones de ofimática, autoedición y diseño instalan otras fuentes nuevas, de tal forma que resulta difícil saber en un momento dado qué fuentes están disponibles en un cierto ordenador.

Las principales familias tipográficas incluidas en los sistemas operativos Windows son Abadi MT Condensed Light, Arial, Arial Black, Book Antiqua, Calisto MT, Century Gothic, Comic Sans MS, Copperplate Gothic Bold, Courier New, Impact, Lucida Console, Lucida Handwriting Italic, Lucida Sans, Marlett, News Gothic MT. OCR A Extended, Symbol, Tahoma, Times New Roman, Verdana, Webdings, Westminster y Wingdings. A estas hay que añadir las instaladas por otras apicaciones de Microsoft, como Andale Mono, Georgia y Trebuchet MS.

Por su parte, entre las tipografías incluidas en el sistema operativo MacOS se encuentran Charcoal, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol y Times.

Además, existen infinidad de fuentes disponibles en todo tipo de soportes (disquete, CD, DVD, páginas web, etc.), así como aquellas no estándares creadas por autores puntuales, todas ellas fácilmente instalables en cualquier máquina.

Creación de tipos

El principal inconveniente de este desconocimiento es que no podemos saber a ciencia cierta si las fuentes que estamos usando en pantalla van a estar luego disponibles en la imprenta, en la impresora o en el ordenador del lector, por lo que es conveniente usar fuentes estándar o comprobar la compatibilidad de las fuentes usadas con los medios de impresión necesarios.

Una excepción a esta regla es el caso de que los textos sean guardados como fichero gráfico (formatos TIFF, GIF, JPG, PNG, SVG, SWF, etc.), ya que en este caso la impresora o monitor interpretarán el texto de forma adecuada, aunque generalmente con peor calidad.

Fuentes tipográficas: impresión y pantalla

Las fuentes tipográficas diseñadas para sistemas de impresión tradicionales están pensadas para ser reproducidas en alta resoluciones y generalmente se visualizan mal en las pantallas de los ordenadores, sobre todo en pequeños tamaños, ya que las formas de los caracteres no han sido concebidas para ser reproducidas en una pantalla de baja resolución.


Este factor ha hecho necesaria la creación de fuentes específicas para ser visualiadas en el monitor de un ordenador, diseñadas para ser fácilmente legibles en condiciones de baja resolución. Se trata de fuentes como Verdana, Tahoma (sans serif) y Georgia (serif).


Mientras que las fuentes de impresión se tornan indefinidas e ilegibles al ser sometidas a antialiasing para suavizar el escalonado de los trazos, en las tipografías concebidas para su visualización en pantalla cada trazo y cada punto encaja exactamente en la trama de pixeles que compone la misma.


Su diseño evita, en lo posible, las curvas, tendiendo a las líneas verticales u horizontales, lo que hace que aparezcan nítidas y definidas en cuerpos pequeños.

Pixelización y antialiasing

Las fuentes diseñadas para pantalla presentan la desventaja de que, al estar diseñadas para un tamaño determinado, no es posible redimensionarlas de forma correcta, apareciendo los trazos verticales y horizontales que las componen distorsionados.

Una solución posible sería redimensionarlas exactamente con un múltiplo de su tamaño natural, ya que coincidiría nuevamente con la rejilla de píxeles de la pantalla, pero entonces se ven pixeladas, con efectos de dientes de sierra.


Esta efecto indeseado se puede eviar mediante la técnica del antialiasing, consistente en un difuminado de los bordes de los caracteres, creando unos píxeles intermedios entre el color del carácter y el del fondo, para que el cambio entre ambos no sea tan brusco, con lo que se consigue que se los márgenes se vean suaves y no en forma de dientes de sierra.


El antialiasing, también conocido como antialias, es un mecanismo muy utilizado en el tratamiento de imágenes de mapas de bits, disponiendo casi todos los programas gráficos de filtros específicos para su aplicación.


Por lo que respecta a los textos, los sistemas operativos suelen ofrecer opciones de configuración del antialiasing para evitar su escalado en pantalla. En los sistemas Windows, por ejemplo, se accede a esta funcionalidad desde Inicio > Panel de control > Pantalla > Apariencia, donde suele haber un checkbox para habilitar el antialiasing.

Como la aplicación de este método de visualización de textos es configurable por el usuario, nunca podremos estar seguros de su activación, por lo que no sabemos de antemano cómo se verán las fuentes en el monitor de cada usuario. Como alternativa, podemos convertir los textos en imágenes, siempre que sean de corta extensión (titulares cortos, cabeceros, etc.), ya que entonces sí que podremos aplicarles el antialiasing y estar seguros de su visualización final.

Hinting

Otra técnica aplicable a las fuentes destinadas a pantalla es el denominado proceso de hinting, indispensable para cualquier fuente que intente funcionar en cuerpos pequeños y en dispositivos de baja resolución.


Es un método para definir exactamente qué pixeles se encienden para crear el mejor dibujo posible de un caracter de tamaño pequeño a baja resolución. Como el mapa de bits que dibuja cada signo en la pantalla se genera a partir de un dibujo de línea o “outline”, a menudo es necesario modificar este contorno para que la combinación deseada de pixeles se encienda. Un “hint” es una instrucción matemática que se agrega a una fuente tipográfica con el fin de modificar el dibujo de los caracteres en determinados cuerpos.

Administración de fuentes en un ordenador

Como hemos visto, todo sistema operativo instala un conjunto de fuentes por defecto, número que se ve aumentado con posteriores instalaciones de diferente software, especialemente aplicaciones de autoedición, de ofimática, de diseño gráfico y de diseño web.

Generalmente, cada una de estas fuentes es almacenada como fichero individual en una carpeta destinada a almacenar todas las fuentes del sistema. Por ejemplo, Windows lo hace en una carpeta denominada Fonts, que cuelga directamente de la carpeta principal de instalación del sistema, Windows.


Aunque ciertas aplicaciones pueden instalar determinadas fuentes para su uso exclusivo, en la carpeta Fonts encontraremos todas las fuentes que estarán luego disponibles para los diferentes programas de edición y gráficos. Si accedemos a dicha carpeta, veremos los ficheros de las fuentes disponibles en nuestra máquina y los nombres comunes de cada una de ellas.


Windows puede manejar diferentes tipos de fuentes. Unas son de resolución fija, entre ellas las fuentes de pantalla y las de impresora. Este tipo de fuentes, en especial las primeras, no las utilizaremos casi nunca en las aplicaciones. Son las que emplean los programas para sus propios menús y resto de interfaz gráfica.

Si deseamos ver cómo se presentan dichas fuentes, basta hacer doble click sobre su fichero, con lo que se abrirá el visualizador de fuentes de Windows, mostrándonos la frase "El veloz murciélago hindú comía feliz cardillo...12340567890" a diferentes tamaños de letra. La elección de esta frase se debe a que en ella se encuentran la mayoría de los caracteres del alfabeto, con lo que podemos hacernos una buena idea del aspecto de la fuente.


Los tipos de letra que casi siempre emplearemos con nuestras aplicaciones, tanto en el ordenador como para imprimir, son las fuentes escalables. Existen dos tipos principales de fuentes escalables: fuentes TrueType y fuentes Postscript Type 1.


Truetype (TT) y Postscript Tipo 1 (PS1) son fuentes de contorno multiplataforma y en ambas sus formas están definidas por medio de líneas y curvas. Su representación es independiente de la resolución del dispositivo de salida y por lo tanto pueden ser escaladas a cualquier tamaño sin ninguna perdida de calidad.


Las fuentes PS1 tienen su origen en el lenguaje de descripción de página Postscript de Adobe, mientras que la tecnología TrueType fue desarrollada por la empresa Apple. La principal diferencia entre estas tecnologías consiste en la forma matemática que utilizan para describir las curvas de los caracteres, ya que mientras PS1 utiliza curvas Bézier, con nodos y puntos de control que definen las forma, TT se basa en unas funciones propias, denominadas "splines". Otra diferencia es que las fuentes TT disponen de todos los datos en un solo fichero (de extensión .TTF), mientras que las PS1 requieren dos ficheros separados (uno .PFB y otro .PFM ), uno que contiene la definición del contorno de la fuente para la impresora y otro que contiene los datos métricos.
La principal ventaja de las fuentes TT sobre las PS1 está en el hecho que las TT permite mejores procesos de "hinting", que incluyen controles diagonales y movimientos específico de puntos para aumentar la legibilidad.

Aparte de las fuentes instaladas directamente por el sistema operativo y por applicaciones posteriores, existen en el mercado multitud de fuentes adicionales, unas gratuitas y otras de pago, que podemos utilizar en nustras aplicaciones gráficas y de edición. Para haceros una idea, basta acudir a Google e introducir en la caja de búsqueda las palabras "download fonts", búsqueda que nos producirá aproximadamente 1.400.000 resultados.

Una vez descargada una fuente en nuestra máquina, para que puedan ser utilizadas es necesario cargarlas en memoria, existiendo tres formas básicas para ello:

Cargar temporalmente el fichero de la fuente en memoria.
Instalar de forma permanente la fuente.
Incrustar (embedding) la fuente dentro de un documento.
Cargar una fuente en la memoria es una forma de poner a disposición de las aplicaciones dicha fuente durante un intervalo de tiempo limitado (hasta que se descargue de nuevo de la memoria, o hasta que se apague el sistema). Es una forma muy conveniente de emplear fuentes que sólo pretendemos usar para un proyecto concreto, o para un gráfico.

Para realizar este proceso, podemos en primer lugar acceder con el explorador de Windows a la carpeta que contenga los ficheros de las fuentes (no es necesario que sea la carpeta Fonts del sistema en este caso), haciendo doble click sobre el fichero de fuente que queremos cargar en memoria, con lo que aparecerá la ventana del visualizador con la fuente cargada.

Si ahora minimizamos la ventana, podremos utilizar la fuente en cuestión en casi cualquier aplicación mientras no cerremos la ventana de vista previa de la fuente (esto la mantiene cargada en memoria) o hasta que apaguemos el sistema. Una alternativa conveniente es usar la pequeña utilidad gratuita FontLoader, que se puede descargar de Moon Software (http://www.moonsoftware.com/fxplorer.asp). Su funcionamiento es muy simple, bastando hacer clic con el botón derecho sobre un fichero de fuentes truetype y seleccionar una de las opciones disponibles (instalar / desinstalar / cargar / descargar). Un hecho a tener en cuenta es que algunos programas, como Illustrator y Freehand no admiten fuentes cargadas temporalmente siendo necesario instalar la fuente antes de ejecutar el programa.


Si deseamos que una fuente y que esté a disposición de los programas de forma permanente necesitaremos instalar dicha fuente en el sistema. Para ello, basta ir a Inicio > Panel de Control > Fuentes y en el menú Archivo seleccionar la opción Instalar nueva fuente, eligiendo el fichero de la fuente a instalar en el pequeño navegador que aparece. Soluciones alternativas son arrastrar el fichero de la fuente dentro de la carpeta Windows\Fonts o utilizar una programa de gestión de fuentes, como FontLoader.

La desinstalación es semejante, bastando elegir la opción correspondiente a desinstalar. Cuidado con esta operación, si el programa pide confirmación para eliminar el archivo de fuente del disco; asegurémonos de tener otra copia disponible en otra carpeta o en un disquette o cd-rom. De otra manera, la perdemos irreversiblemente.

Como norma general, nunca deberíamos instalar más allá de un centenar o unos pocos centenares de fuentes en el ordenador, ya que se cargan en memoria al arrancar el sistema operativo, ralentizando el sistema y la ejecución de programas.

Si necesitamos trabajar con numerosas fuentes, lo mejor es crearnos una carpeta exclusivamente destinada a almacenarlas, en la que crearemos diferentes subcarpetas que nos ayuden a clasificar las fuentes de acuerdo a algún sistema válido para nuestros propositos (Type1 y TrueType, serif y sans serif, modernas, ornamentales, de comics, de ofimática, etc.).

Cuando necesitemos utilizar alguna de ellas, la cargamos en memoria. Si estamos trabajando con Ilustrator, instalamos las fuentes necesarias, abrimos la aplicación y trabajamos con ellas. Una vez finalizado el trabajo, cerramos Ilustrator y desinstalamos las fuentes.

Finalmente, podemos incrustar la fuente dentro de un documento. Con esta última opción, en realidad, no dispondremos de la fuente para nuestro propio trabajo, ya que lo que se incrusta es una representación de la fuente para verla en pantalla y / o imprimirla, no el fichero de ésta. Los documentos PDF suelen incluir fuentes incrustadas de esta forma, y también puede hacerse con otros programas, como por ejemplo el mismo Microsoft Word.

Antes de finalizar el tema, conviene mcionar un programa indispensable para trabajar con Type 1. Nos estamos refiriendo a Adobe Type Manager, cuya versión Light (gratuita) podemos descargar desde la dirección http://www.adobe.com/products/atmlight/. Los programas que permiten organizar este tipo de fuentes, tales como Fontlister, Typograf, Font navigator, etc, no pueden hacerlo por sí solos, Adobe Type Manager se ha de instalar primero.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual