Texto en HTML (XII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

TIPOGRAFÍA.-

El uso de las tipos de letra (fuentes) en las páginas web, al igual que en las aplicaciones multimedia y en todas aquellas basadas en los ordenadores, deriva del uso que de las mismas se ha dado desde hace ya mucho tiempo en la imprenta. El estudio de las diferentes familias de fuentes, de sus tamaños y de su combinación para crear textos recibe el nombre de Tipografía.

Los tipos eran las piezas prismáticas de metal, con una letra grabada en relieve en uno de sus extremos, que se usaban en las imprentas para configurar los textos a imprimir, y por extensión pasó a llamarse así a cada una de las variedades de la letra de imprenta.

Partes de una letra: Las principales partes de una letra en Tipografía son las siguientes:

Fuentes de impresión y fuentes de pantalla: con el paso del tiempo fué necesario adaptar los los distintos tipos de letra de imprenta a las necesidades especiales de los ordenadores y sistemas multimedia, con lo que surgieron las denominadas fuentes de pantalla, que son una optimización de las letras de cada familia para adpatarlas a las unidades de medida de los monitores. Así, se pasó de trabajar con puntos tipográficos a trabajar con pixels, que son la unidad más pequeñas que se puede considerar como ente independiente en la pantalla de un monitor, optimizando la configuración de las letras para adaptarse a la rejilla definida en la pantalla de estos periféricos.

Además de modificar en lo posible la forma de trabajo de las familias de fuentes ya existentes, se han ido creando otras específicamente para trabajar en pantallas, como es el caso de las familias Verdana y Georgia, entre otras, en las que las alturas de cuerpo y espaciado han sido optimizadas para su buena legibilidad en pantalla.

A pesar de este proceso de adaptación siguen todavía habiendo herencias de los tipos de imprenta que son incompatibles con el nuevo sistema de trabajo, como ocurre con las fuentes en itálica, ya que las letras en este estilo muestran una inclinación que está totalmente en desacuerdo con la estructura reticular de la rejilla del monitor.

Tipos de fuentes: a la hora de estudiar las fuentes la primera grán distinción que nos encontramos es entre aquellas fuentes de tipo Serif y las de tipo Sans Serif. Las fuentes Serif (Times New Roman, p.e.) se caracterizan porque sus letras poseen un determinado adorno o prolongación en sus extremos, llamados serifs, mientras que las Sans Serif (Arial p.e.) carecen de estos adornos, siendo sus extremos lisos:

Serif

Sans Serif

Las letras tipo Serif provienen de las usadas primero por los romanos y griegos, tipos que fueron luego adoptados por los Renacentistas y pasadas a su uso en la imprenta, creándose diversas fuentes que reciben el nombre de Antien o viejas (Old). Estas fuentes poseen letras bastante enrevesadas, con profusión de adornos en su cuerpo y en sus extremos (basta pensar en las letras góticas), pero que confieren a las mismas un espíritu humanista.  

Las variaciones en cursiva de este tipo de fuentes conseguían unos textos elegantes, imitación de la escritura manual en la que la mano del escritor escribe inclinada sobre el papel.

Posteriormente hubo que ir puliendo un poco el exceso de adornos, sobre todo con vistas a la legibilidad  de los textos en documentos que requerían letras de pequeño tamaño. Se refinaron los adornos, eliminando el excesivo recargo, y se consiguieron fuentes límpias, bonitas, que se siguen usando profusamente en la actualidad (tal vez la fuente más universal sea la Times Roman).

Está demostrado que este tipo de fuentes mejoran la legibilidad, ya que ayudan a la vista a seguir el texto, siempre que no sean de tamaño muy pequeño (memor de 8 puntos) o muy grande, pués entonces se hacen más difíciles de leer.

Las fuentes de tipo Sans Serif (sin Serif) son mucho más modernas, la mayoría de ellas surgieron a partir de la primera mitad del siglo XX. Se eliminaron en ellas los adornos de las Serif, persiguiendo obtener unos tipos limpios y claros, que no recargaran en exceso la vista de los lectores, obteniéndose contornos de letra perfectamente geométricos. No fueros estos tipos muy aceptados en sus inicios, sobre todo debido a la costumbre de tantos años usando Serif, y no fué hasta la aparición de las modernas tendencias del arte y el diseño, sobre todo con el movimiento artístico del alemán Bauhaus (las cosas son sólo hermosas cuándo cumplen un objetivo práctico), que se empezaros a usar en publicidad y folletos.

Un texto escrito con fuente Sans Serif debe leerse letra por letra, lo que provoca cansancio en el caso de textos largos. El uso de este tipo de fuentes está recomendado en el caso de tamaños pequeños (menores de 8 puntos) o muy grandes, por lo que son idóneas para los títulos y los pies de página.

En los últimos tiempos se ha producido un proceso de convergencia entre ambos tipos de fuentes. Las Serif se han ido puliendo, eliminando de ellas el adorno excesivo y ampuloso, mientras que las Sans Serif han ido humanizándose, eliminando el exceso de geometría cuadriculada. La tendencia actual es unir ambos tipos en un documento, aprovechando lo de bueno que tiene cada una de ellas.

En general las fuentes de tipo Sans Serif son idóneas para logotipos, títulos, publicidad y cabeceros, mientras que las Serif son más expresivas para construir el cuerpo del documento, más humanas.

Si queremos usar textos en cursiva debemos procurar hacerlo con tipos Serif, ya que las Sans Serif, por su diseño geométrico, no se prestan bien a este tipo de estilo.

Tamaños idóneos: el tamaño adecuado de una letra para trabajar en la pantalla de un ordenador varía entre unos límites inferiores y otros superiores, dependiendo del tipo de letra (mayúscula y minúscula) y de la familia a la que pertenece.

Por ejemplo, las letras en mayúsculas presisan para su correcta visualización sólo un mínimo de entre 5 y 7 pixels de altura, mientras que si deseamos combinar mayúsculas y minúsculas necesitaremos un mínimo de nueve, ya que estas últimas necesitan disponer de más espacio, porque algunas de ellas llevan prolongaciones de altura, generalmente por su parte inferior como es el caso de la letra g.

Si estamos trabajando con letras en negrita necesitaremos aún más tamaño de fuente si queremos mantener la legibilidad, puesto que este efecto de acentuación de la letra se consigue añadiendo a la misma pixels adicionales a su contorno, y de esta forma, si mantenemos el espacio mínimo de las letras regulares, el efecto en las negritas será de un desagradable emborronamiento. Ejemplo:

texto en negrita

En cuanto a los tamaños máximos aconsejables, es un hecho bien patente que al ir aumentando este las letras, al estar formadas en realidad por la unión de muchos puntos, empiezan a perder la continuidad en sus trazos en aquellas zonas de las mismas con forma curva, y si el tamaño aumenta hasta un cierto nivel se produce un efecto de escalonado muy desagradable, que hay que evitar a toda costa. Ejemplo:

texto en negrita

Como estos efectos varían con el tipo de fuente empleado, el mejor consejero será siempre la experimentación con fuentes y tamaños hasta conseguir el efecto deseado, siempre que sea posible. Si no podemos conseguir un texto del tamaño deseado que se visualice bien, podemos recurrir al uso de imágenes que representen estos textos, ya que en ellas el control es mayor; pero sólo es aconsejable para textos pequeños, como elementos de un menú o logotipos, ya que la presencia de imágenes puede demorar en exceso la carga de la página.

Diferencias entre equipos informáticos: no todos los ordenadores y sistemas operativos trabajan con las mismas fuentes por defecto, ni interpretan los tipos de igual manera. 

En la pantalla de un Macintosh hay una correlación directa entre la altura de un pixel y la de un punto tipográfico, por lo que una fuente de tamaño 9 pixels es exactamente igual que una de tamaño 9 puntos. Esto es debido a que en este sistema, a resoluciones normales de trabajo, una pulgada definida en pantalla mide realmente una pulgada (72 pixels), y un punto tipográfico es 1/72 de pulgada, por lo que en este caso punto y pixel coinciden.

En el caso de los PCs esto no ocurre, y en estos una pulgada medida con un metro es inferior a la obtenida en pantalla (96 pixels), por lo que correspondencia entre pixels y puntos se pierde, y resulta ser una letra de tamaño 14 pixels (primer caso del ejemplo siguiente) menor que una de 14 puntos (segundo caso).

ejemplo

ejemplo

La diferencia de tamaños de fuente entre Macs y PCs se puede fijar aproximadamente en 3/4, por lo que un tamaño de 9 puntos en PCs equivale a unos 12 puntos en Macs. En general, tipos del mismo tamaño en puntos se ven más pequeños en Macs que en PCs.

Otra diferencia notable entre ambos equipos es que las fuentes que vienen instaladas por defecto en ambos son diferentes, por lo que si diseñamos una página para un PC y no tenemos en cuenta a los usuarios de Macs, es probable que estos no la vean correctamente. Las fuentes mínimas instaladas en ambos equipos equivalentes entre sí son las siguientes:

Una comparativa entre los tamaños y tipos de fuente en ambos sistemas la tenéis en la siguiente imagen:

Para diseñar para ambos equipos, deberemos especificar en la etiqueta FONT FACE una serie de fuentes diferentes, separadas una de otra por una coma, empezando por las más exóticas que deseemos, haciendo constar tanto la fuente de Mac como la de PC, siguiendo por las comunes de la lista anterior y acabando con fuentes genéricas, como Serif o Sans Serif. Y lo mismo si usamos CSS, en la etiqueta de estilo font-family.

Internet Explorer instala un juego de fuentes sobre los Macs que tienen equivalentes directos en PCs, pero si usamos esta propiedad los usuarios de Nestcape no podrán apreciar estas fuentes.

También podemos a veces intentar usar fuentes que se hayan instalado de modo estándar por algún programa de uso común en todos los equipos, como por ejemplo Microsoft Word, pero siempre tendremos la duda de cuáles usuarios lo tienen en realidad instalado.

Estudio de algunas fuentes: vamos por último a pararnos un poco en el estudio de algunas de las familias de fuentes más usadas en el diseño para la web. En los ejemplos que siguen sólo debes fiarte de lo que ves si tienes el ordenador o navegador propio de cada fuente en concreto. Entre ellas destacan:

• Times New Roman: (Windows) es una fuente del tipo Serif, análoga a la que se puede ver en la mayoría de periódicos y revistas, y es aceptáblemente buena para presentación en pantalla, a pesar de que fué diseñada para trabajar sobre papel, aunque resulta demasiado clásica.
  
  

  Ejemplo de Times New Roman

• Arial: (Windows) de tipo Sans Serif, con forma aerodinámica. En tamaños pequeños puede resultar dificil su lectura en pantalla, y si hay mucho texto de este tipo puede resultar aburrido.

  Ejemplo de fuente Arial

• Times: (Mac) similar a la Times New Roman, aunque menos apta para presentación en pantalla. Carece de versión en cursiva, por lo que si le pedimos al ordenador esta fuente con ese estilo, símplemente lo que hace es inclinarla, con resultados no muy buenos.

  Ejemplo de fuente Times

• Verdana: (I. Explorer) es una fuente diseñada para su visión en pantalla, por lo que da unos resultados óptimos en el diseño web. Es el tipo de fuente que estoy usando para escribir esto. Es de tipo Sans Serif, y si no la tienes instalada por defecto en tu ordenador al instalar Internet Explorer la tendrás automáticamente, por lo que si diseñas en esta fuente la podrán apreciar todos los usuarios de este navegador, sea con PC o con Mac.

  Ejemplo de fuente Verdana

• Comic Sans MS: es una fuente alegre y desenfadada, de tipo Sans Serif, muy indicada para sitios de caracter jóven, aunque en otro tipo de páginas puede resultar poco seria y profesional.

  Ejemplo de fuente Comic Sans MS

• Georgia: es de tipo Serif, y ha sido diseñada también para trabajar en la pantalla del ordenador, por lo que da buenos resultados y es de lectura cómoda. Posée además una versión muy buena de cursiva, muy atractiva. Como contrapartida tiene que no es una fuente estandar (aunque sí gratuita), por lo que muchos navegantes no podrán apreciarla si la usamos en nuestras páginas.

  Ejemplo de fuente Georgia