Miércoles, 19 Jul 2006
¿Crees que las fuentes están en los parques? ¿Que Sans Serif es una estación de esquí?
Ha llegado el momento de seguir un curso acelerado de tipografía online. Una imagen vale más que mil palabras, pero es raro ver algo en la red hecho sólo con imágenes. La mayor parte de los contenidos en internet están pensados para ser leídos, no mirados, y eso significa que los diseñadores tienen que prestar casi tanta atención al texto como a los gráficos.
Durante años, los estándares para la tipografía online eran como un chiste, pero hoy en día ya no se le puede echar la culpa a la tecnología. Con la segunda generación de CSS ya apenas sin problemas de compatibilidad, nunca ha sido tan fácil ajustar la apariencia de los contenidos de texto en los navegadores modernos. Lo que sigue teniendo sus complicaciones es saber lo que hay que poner en estas hojas de estilo para producir los efectos visuales que uno busca a fin de conseguir que su texto brille por sí mismo.
Un error que se comete con frecuencia cuando se trabaja con texto es que todo se reduce a elegir una tipografía que sea bonita y quede bien. Pero la realidad es muy distinta. Especialmente en la Web, donde los diseñadores trabajan con una gama mucho más reducida de tipografías compatibles en comparación con la imprenta o las aplicaciones de sobremesa.
En este caso, el acento se tiene que poner siempre sobre la optimización de la legibilidad dentro de la organización de la página, ajustando el ancho de columna, el interlineado e incluso el propio texto a fin de evitar que el usuario tenga que forzar la vista. Una tipografía efectiva en la Web debe, de hecho, comportarse como un árbitro de fútbol: cuando mejor hace su trabajo es cuando no se nota su presencia.
FUNDAMENTOS DE TIPOGRAFÍA
La principal queja en el momento de trabajar con texto en la Web, en comparación con el diseño para imprenta, es la selección relativamente limitada de fuentes que hay disponibles.
Puede que dispongas de una colección interminable de ellas, pero si los usuarios no tienen las mismas fuentes instaladas, simplemente no las verán. Por tanto, hay que hacer concesiones: al limitarte a las fuentes instaladas por defecto en los sistemas operativos —hallarás la lista completa en www.wpdfd.com— pierdes la oportunidad de dotar a tu sitio de una apariencia única, pero garantizas que los contenidos de texto se ven como esperas que se vean.
La búsqueda de la consistencia es el motivo por el cual las once ‘fuentes base’ creadas y distribuidas por Microsoft mantienen una posición dominante en la Web: tienes la seguridad de que estarán disponibles en los navegadores de la mayoría de usuarios. El otro motivo para favorecer una colección de fuentes base es que ya se diseñaron con la idea de que se vieran bien en pantalla, en contraposición con la mayoría de tipografías, que están optimizadas para tareas de impresión de alta calidad y no siempre se ven bien en un navegador. Quedarse con las fuentes basicas no es ser perezosos: lo que importa es como se utilicen.
Con estas restricciones, que fuentes tiene uno que elegir para su sitio? En buena medida, todo depende de la imagen que se quiera ofrecer y del tipo de contenidos que se presenten. Para el texto principal (la mayor parte de los contenidos), se trata simplemente de optar por una de las dos categorias tipograficas principales: serif y sans-serif. Las fuentes serif, como Times, tienen pequenas barras (lo que se denominan “serifs”) al final de los trazos que definen la forma de la letra, se perciben como mas tradicionales y mas serias y transmiten mas autoridad. Las fuentes sans-serif, como Arial, son mas modernas y “ligeras” de caracter; resultan mas “informales” comparadas con las sobrias serif. Aunque las fuentes serif se leen mejor en imprenta, los disenadores de web tienden a usar fuentes sans-serif en el texto principal, porque se escalan mejor y se ven mas equilibradas en pantalla. No es que esto sea un gran problema el texto principal, a menos que quieras que tu sitio tenga el aire un tanto “libresco” que se desprende del uso de fuentes serif.
Hay veces que un sitio necesita de un tratamiento especial; por ejemplo, si ninguna de las fuentes basicas encaja en tu sitio o si un cliente tiene una identidad de marca asociada a una tipografia popular. La mayoria de usuarios tienen una mas amplia seleccion de tipografias instaladas en sus ordenadores, como Palatino y Caslon (serif ) o Gill Sans y Futura (sans-serif ). Puedes utilizar estas fuentes (e incluso otras mucho menos comunes) siempre y cuando ofrezcas una alternativa para aquellos que no tienen acceso a ellas. Esto se puede hacer con la propiedad “font-family” en CSS, la cual te permite hacer una lista de alternativas para cada etiqueta, clase o capa en orden de preferencia. Lo mejor es siempre incluir tres o cuatro opciones, empezando por la tipografia ideal, seguida por una alternativa comun y una alternativa comodin mas generica, colocando las fuentes con espacios en los nombres entre comillas dobles; algo asi:
font-family: {o‡Gill Sanso}, Verdana, sansserif }
En este ejemplo, el navegador buscara primero Gill Sans y, si no la encuentra instalada, utilizara Verdana. Si esta tampoco esta, pasara a usar el valor por defecto, es decir la fuente sans-serif generica definida en las preferencias del navegador. La propiedad font-family tambien garantiza consistencia en diferentes plataformas cuando las fuentes utilizan diferentes sistemas de denominacion; especificar o‡Palatinoo} y o‡Book Antiquao} invocara a fuentes equivalentes en Mac OS X y versiones antiguas de Windows.
ORDENAR LOS MUEBLES
Una vez te hayas decidido por una fuente principal, entonces tendras que combinar los contenidos basicos con el resto del “mobiliario de la pagina”, incluidos los encabezados, los logos y los elementos de navegacion. En estos casos, la tipografia juega un papel muy importante en el momento de dirigir la mirada del usuario hacia aquello que es importante, ofreciendo pistas visuales gracias a la organizacion de los elementos de la pagina y, tambien, gracias a la seleccion de un tipo y un tamano de letra. Esto es particularmente importante para la pagina principal de un sitio o para un indice de categorias, especialmente si se ofrecen contenidos “partidos” e imagenes que apuntan a una serie de paginas vinculadas en vez de amplios bloques de texto. Si los usuarios estan buscando informacion en lugar de ir leyendo de arriba a abajo, utiliza un conjunto un tanto diferente de tamanos y tipos de letra por defecto, con encabezados bien visibles, que destaquen y que funcionen como enlaces.
Hay unas cuantas tecnicas bastante simples que pueden significar una mejora instantanea en la apariencia de un sitio. Si utilizas una fuente serif para el texto principal, es buena idea usar una fuente sans-serif para la navegacion y los contenidos adicionales. Asi se genera un contraste entre los articulos y el resto del texto y, como las fuentes sans-serif siguen siendo legibles en tamanos menores, la navegacion no resulta demasiado prominente en la organizacion global. Los encabezados en sans-serif tambien funcionan con texto en serif.
Por otra parte, si usas una fuente sans-serif para el texto principal, es mejor usar la misma fuente (o una similar) con un tamano menor para el resto de elementos. Este es el principio que se aplica en el sitio BBC News Online (news. bbc.co.uk), que juega con el tipo de letra y los colores de fondo para separar la navegacion de los contenidos principales.
En determinadas situaciones, como, por ejemplo, cuando un cliente posee una tipografía propia para los encabezados, puedes no tener más remedio que usar ‘texto-GIF’; es decir, crear archivos de imagen individuales que contengan texto y que colocarás después en la página. El inconveniente es que se reduce la accesibilidad: el contenido textual de los archivos de imagen no se puede buscar, es invisible para los lectores de pantalla y no será indexado por los motores de búsquedas. Hay maneras de salvar estos obstáculos, como usar el atributo ALT de la imagen para incorporar el texto, aunque la mejor solución es una técnica denominada Fahrner Image Replacement, que comporta la creación de una capa DIV y especificar tu imagen de encabezado como capa de fondo usando CSS.
EL TAMAÑO IMPORTA
Los diseñadores para imprenta tienen una gran ventaja sobre los de web cuando se trata de trabajar con texto, ya que poseen todo el control sobre el producto que va a parar a las manos del lector. Cuando se diseña para la Web, uno nunca está seguro de qué tipo de instalación pueden tener los potenciales usuarios y éste es un factor fundamental en el momento de crear las páginas. Hasta hace poco, la única manera de garantizar la consistencia entre diferentes navegadores y plataformas era usar píxels para especificar los tamaños de letra. Esto puede provocar problemas para la gente que usa diferentes resoluciones de pantalla de la tuya: una letra de 10 puntos se puede ver bien en tu monitor de 15 pulgadas, pero los usuarios con pantallas de alta resolución o con problemas de vista pueden necesitar una lupa para leerla. Aun peor, las versiones actuales de IE para Windows no permiten al usuario rescalar el texto cuyo tamaño se especificó en píxels.
Por tanto, en lugar de construir estructuras fijas, es importante intentar crear páginas capaces de funcionar con sistemas diferentes, usando porcentajes y ems para definir proporcionalmente los tamaños de letra.
Empieza definiendo la etiqueta de tamaño de la letra del texto principal en la CSS al 62,5%: así 1 em coincide con 10 píxels y resulta más sencillo convertir tamaños de letra basados en píxels para encabezados y párrafos a ems. Si los usuarios desean alterar el tamaño de la letra para acomodarlo a sus pantallas, toda la página se rescalará hacia arriba o hacia abajo con las proporciones correctas, dejando tu estructura básica totalmente intacta. El uso de ems en vez de píxels para otros elementos de diseño también facilita la construcción de estructuras ‘líquidas’ que se adaptan al tamaño y la resolución de la ventana del navegador.
EN COLUMNAS
En muchos sentidos, las páginas web no tienen nada de páginas. Hay buenos motivos por los cuales los libros y las revistas nunca usan el formato apaisado de la ventana de un navegador: intenta leer un artículo en formato ‘de impresión’ y verás qué fácil es perderse. Las líneas de texto muy largas obligan al lector a mover los ojos con más frecuencia, lo que dificulta hacer un seguimiento de lo que se ha leído.
Una vez tengas resuelto lo de los tamaños de letra, pueden mejorar la legibilidad limitando el texto principal a una columna más estrecha dentro de la página. Hay bastantes plantillas disponibles elaboradas a tal efecto, como la estructura a tres columnas con navegación a la izquierda y barra lateral a la derecha; o el diseño a una o dos columnas centradas con amplios márgenes a derecha e izquierda.
También puedes encontrar estructuras más complejas a múltiple columna en diferentes sitios, como la de tres columnas del International Herald Tribune (www.iht.com), diseñada para limitar el desplazamiento vertical dentro de una página orientada en apaisado.
El ancho ideal para una columna de texto depende de la tipografía que se utilice, pero, en general, se sitúa alrededor de los 70 caracteres por línea, incluidos los espacios y la puntuación, lo que equivale a 30ems si usas medidas proporcionales o, aproximadamente, 400 píxels en una estructura fija con una fuente de 14 puntos. Los bloques de texto deben tener el margen derecho sin justificar; el texto totalmente justificado puede quedar mejor, pero resulta más difícil de leer.
Al mismo tiempo que reduce el ancho de línea, debes ampliar el interlineado. Aunque el valor por defecto de 1,2 está bien para textos breves, en bloques más largos es mejor incrementarlo para que se vean mejor. El valor exacto depende de factores como el ancho de línea y de la fuente que se utilice. Lo mejor es empezar fijando un valor de 1.4 en la propiedad line-height de la CSS e ir incrementándolo en 0.1 hasta conseguir el valor adecuado. Pero atención, todas estas medidas dependen mucho del idioma utilizado pues la longitud de las palabras en castellano, catalán, euskera e inglés es muy diferente
ESCRIBIR PARA LA WEB
Durante años, los expertos en usabilidad se han dedicado a analizar cómo ‘leen’ los usuarios las páginas web, buscando información en vez de sumergirse por completo en ellas. Por tanto, incluso los mejores contenidos no serán apreciados en su totalidad si no están escritos de un modo que se ajuste a este proceso de lectura.
¿Cómo se escribe para la Web? Con un lenguaje simple, poco prolijo, evitando las jergas, con subtítulos comprensibles, listas ordenadas y negritas para resaltar elementos clave, y estructurando el contenido en unidades de sentido. El estilo de la ‘pirámide invertida’, propio del estilo periodístico, resulta bastante apropiado para la web: empiezas por las conclusiones, sigues con la información más importantes y luego vas añadiendo los detalles complementarios. Si en tu estructura es necesario el desplazamiento vertical, coloca los datos clave o los resúmenes ‘por encima del pliegue’, para que los usuarios no tengan que bajar a fin de llegar a los detalles más jugosos. Unos contenidos bien escritos, legibles y accesibles, harán más para atraer visitantes a tu sitio que muchos trucos de diseño de impacto.
Este es el placer del texto.
Construye una estructura flexible. Pasando sin problemas de una a más columnas
1. Descargar el JavaScript
Por ahora, las CSS no tratan directamente texto que fluya entre diferentes columnas, así que necesitaremos un poco de ayuda de un script multinavegador. Empieza por acudir a www.csscripting. com/css-multi-column/ y descarga el archivo .js; sitúalo en tu servidor.
2. Crear la página
Abre tu editor de HTML favorito y crea una nueva página; añade un enlace hacia el script para columnas múltiples dentro del elemento HEAD. Este script tiene que colocarse después de los enlaces a las hojas de estilo; no funcionará si los estilos están dentro de la página.
3. Añadir el bloque de texto
Añadimos un bloque de texto de prueba dentro de un DIV al que le pondremos un Id de tipo ‘text’. Así será más fácil llamar al script de columnas múltiples. Añadiremos también algunos estilos adicionales, modificando la familia tipográfica y el interlineado, que guardaremos en archivos CSS externos.
4. Formatear el texto en columnas
A continuación, vamos a tener que crear dos archivos CSS adicionales: uno para la estructura de columnas múltiples que asociaremos por defecto al archivo HTML, y otro para una estructura de una sola columna. Hemos usado las propiedades CSS adicionales que se activan desde el archivo en JavaScript.
5. Probarlo
El JavaScript de columnas múltiples no funciona en máquinas locales, así que tienes que colocar los archivos HTML y CSS en un servidor para hacer las pruebas. Cuando cargues la página, el script procesará las propiedades CSS personalizadas y el texto se distribuirá a lo largo de dos columnas simétricas.
6. Versión a una columna
Para generar una página ‘para imprimir’, guarda una copia de tu archivo en HTML y cambia el enlace con la hoja de estilo para que apunte hacia la versión a una sola columna que creaste antes. Si te sientes con fuerzas, usa JavaScript para cambiar de hoja de estilo entre las dos estructuras de una misma página.
Tipografia en Flash
Como ya hemos dicho, la mejor manera de asegurarse de que el texto de un sitio se vera bien en todos los navegadores y plataformas es trabajar con una gama limitada de fuentes. A veces, sin embargo, uno no tiene mas remedio que salir de ese esquema. Puede ser que un cliente necesite una tipografia unica por cuestiones de marca o simplemente quiera una tipografia en los encabezados poco comun en la mayoria de ordenadores. Una solucion es usar “texto-GIF”, pero eso puede provocar problemas de accesibilidad. Ahora, sin embargo, existe la posibilidad de anidar fuentes no estandar en las paginas de manera que estas apenas se degradan, usando una herramienta un tanto insolita: Flash. Esta tecnica se conoce con el nombre de sIFR (Scalable Inman Flash Replacement) y funciona llamando a una funcion en JavaScript que verifica si hay Flash y luego superpone capas validas en XHTML con pequenas peliculas que contienen el texto en cuestion con la fuente especifica.
Como dice su creador Mike Davidson, es un poco una solucion de emergencia que deberia reservarse para titulares y otros textos con funciones similares, porque requiere mayor ancho de banda y recursos de procesamiento. Pero como parche, es bastante bueno; incluso se puede copiar y pegar el texto que aparece en las peliculas sIFR. Para mas informacion y para descargarte los archivos necesarios para hacerlo funcionar en tus sitios, acude a www.mikeindustries.com/sifr/
Fuentes personalizadas accesibles
Hacer accesibles las fuentes no estándar en forma de imágenes de fondo
1. Añadir HTML válido a la página
Queremos cargar una imagen de una lista de la compra en la página, pero queremos que el texto sea accesible a los motores de búsqueda. Añade los contenidos en el código HTML dentro de una capa DIV con el ID “shoppinglist”, organizándolos con las etiquetasapropiadas.
2. Definir la imagen de fondo
Usa la técnica Fahrner Image Replacement para superponer al HTML. Fija el ID de la lista de la compra con la misma altura y anchura que la imagen y luego usa la propiedad ‘background’ para enlazar con la imagen. Fija la etiqueta dentro de este ID en ‘display: none’.
3. Combinar imagen y página
Carga ahora la página y la imagen de fondo. Al cargar, la imagen aparece como el fondo de la DIV, mientras que el texto queda oculto. Así se pueden hacer sustituciones de texto más sofisticadas que con el simple atributo ALT.
Fuente: mcediciones