Primero decir que las tipografías que podemos utilizar en Internet, lo mismo que los colores, tienen sus limitaciones. Estas limitaciones están impuestas por la necesidad de que los textos sean visibles, de la misma manera, en el mayor número de ordenadores, por ello existe la convención de utilizar sólo aquellos tipos de fuentes más comunes a todos los sistemas operativos.
Existen, de todas formas, algunos métodos que nos permiten saltarnos estas limitaciones:
- El primero consiste en utilizar imágenes sustituyendo el texto escrito, lo que se conoce como Sustitución de texto por Imágenes (FIR en inglés). Esto lo podemos ver en algunas páginas web más preocupadas por la estética que por el contenido. El problema es que los buscadores no indexan, todavía, las palabras que aparecen en las imágenes.
- La segunda forma es más ortodoxa y utiliza las definiciones en las hojas de estilos que permiten a los buscadores que descarguen estas fuentes no comunes de un archivo que proporcionamos, antes de presentarlas en pantalla. Esta técnica basada en la directiva css @font-face tiene el problema de que no es reconocida por todos los navegadores y que aparece y desaparece de las directivas de estándares de la web.
- La última y quizás más complicada es aportar un programa en JavaScript o PHP que vaya sustituyendo las fuentes normales por las específicas, cuando aparecen.
Aclarado este primer punto podríamos enumerar las fuentes de tipo común con las que normalmente vamos a trabajar:
- Familias genéricas, como la Serif (con rabitos – ejemplo la Times-), la Sans-Serif (sin rabitos -ejemplo la Arial-) o Monospace (todos los caractreres usan un mismo espacio), que siempre debemos consignar, para que el ordenador del usuario pueda, en el peor de los casos, elegir una fuente de sustitución.
- Las aportadas por el sistema operativo Windows: Abadi MT Condensed Light, Andale Mono, Arial, Arial Black, Book Antiqua, Calisto MT, Century Gothic, Comic Sans MS, Copperplate Gothic Bold, Courier New, Georgia, Impact, Lucida Console, Lucida Handwriting Italic, Lucida Sans, Marlett, News Gothic MT, OCR A Extended, Symbol, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Westminster, Wingdings.
- Las aportadas por el sistema operativo de los Mac: Charcoal, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol, Times.
- Por último, las más importante, las incorporadas en los navegadores y que realmente comprenden el porcentaje mayor de fuentes comunes, ya que aseguran su exacto visionado conocidas como «web-safe fonts«: Arial, Comic Sans MS, Courier New, Georgia, Impact, Lucida Console (Monaco), Palatino, Symbol, Tahoma (Geneva), Trebuchet MS, Verdana y Webdings.
Con esto habríamos definido la materia prima, ahora nos toca hablar de usos correctos y dar algunas pequeñas normas o apuntes.
El objetivo de la selección de una u otra tipografía y sus características de uso (tamaño, interlineado, interletrado, grososr, etc.) debe ser el conseguir la mayor legibilidad de los textos, para facilitar la mejor comprensión de los mismos. Dicho objetivo se logra con un correcto equilibrio entre la familia tipográfica elegida, el ancho de la columna de texto, el cuerpo tipográfico, la interlínea, el marginado del texto, el uso de colores para fondo/figura y el estilo de la tipografía (itálico, bold, versalita).
La forma de lectura en pantalla no es igual a la de los libros. El usuario escanea la pantalla en busca de aquellos elementos que llaman su atención. Lo que nos obliga a una composición que tenga en cuenta estos hábitos.
Esto nos obliga a organizar el contenido de una manera adecuada:
- Palabras clave destacadas (en forma de vínculos, o utilizando variables tipográficas, o cambios de color);
- Subtítulos significativos; útiles;
- Listas de ítems;
- Una idea por párrafo (los lectores generalmente saltan cualquier idea adicional si no son ‘capturados’ por las primeras palabras del párrafo);
- El estilo de ‘pirámide invertida’, empezando por la conclusión;
- La mitad o menos de palabras que las que normalmente se utilizan en textos impresos;
Por último podemos destacar varios aspectos en los que la tipografía web se diferencia del uso de la tipografía impresa:
- La orientación de las páginas es normalmente horizontal, en lugar de vertical;
- Generalmente no se ve al mismo tiempo la totalidad del material;
- El diseñador tiene mucho menor control de la tipografía y de la puesta en página que en el material impreso;
- En general, la resolución es menor, por lo que los detalles finos no están bien definidos;
- Por todo lo expuesto anteriormente, la velocidad de lectura es aproximadamente un 30% menor;
- Los lectores escanean en lugar de leer, por lo que la comprensión y retención se reduce a un 50%;
- El uso de hipertexto para relacionar contenidos, que no existe en el mundo impreso.
El buen uso de la tipografía depende del contraste visual entre fuentes y entre los bloques de texto y el blanco. El ojo es naturalmente atraído por los contrastes.
En cuanto al ancho de los párrafos podemos decir que el alcance ocular en lectura es de unos 8 cm, y es por eso que los párrafos (estándard) conservan estas proporciones. El uso de líneas más anchas requieren que el lector gire su cabeza ligeramente o fuerce los músculos del ojo para poder seguir las líneas. Esta ley rara vez se cumple en el diseño web, provocando una lectura más lenta. En este sentido sería conveniente el diseño de párrafos más estrechos y un interlineado algo superior al utilizado en impresión.
En cuanto a las famílias de fuentes a elegir, se constata que aquellas que son más legibles en medios impresos, no tienen porque ser necesariamente las más eficaces en pantalla. Dependerán mucho del tamaño y características utilizadas. Así no queda más opción que la realización de pruebas en cada caso específico.