Disposición de textos en una página web

Para acabar con el tema de tipografías, tratamos la disposición correcta de textos en las páginas web.

A la hora de manejar textos en las páginas web son válidas todas las condideraciones vistas para el diseño gráfico general, pero adaptadas a un medio que impone fuertes limitaciones.

En primer lugar, leer de la pantalla de una computadora es cansado para los ojos y un 25% más lento que la lectura en papel. Como consecuencia, los usuarios tienden a minimizar el número de palabras que leen, por lo que la comprensión y retención se reduce aproximadamente a un 50%.

Además, la web es un medio interactivo, y los usuarios tienden a navegar más que a leer, por lo que hay que tener especial cuidado en ofrecerles contenidos de calidad, perfectamente estructurados e interesantes, que consigan atraer su atención y mantenerla durante la lectura.

Una buena disposición de textos en una página web es la siguiente:

• Un titular que describa de forma clara el tema tratado.
• Un pequeño resumen de la información ofrecida.
• Una serie de palabras clave destacadas (en forma de vínculos, utilizando variables tipográficas o cambios de color).
• Segementación de los contenidos en unidades más pequeñas, reforzadas con índices y listas con items.
• Subtítulos significativos, útiles.
• Una idea por párrafo.
• La mitad o menos de palabras que las que normalmente se utilizan en textos impresos.

La inclusión de gráficos de calidad, buen nivel de escritura y vínculos a otras páginas o websites que den idea de dónde provienen las fuentes o cuáles son las relaciones con otros medios, son elementos que aportan credibilida a los contenidos, lo que hará que los visitantes estén más dispuestos a leer los textos de la página.

En cuanto al medio en sí, existen notables diferencias entre una página web y cualquier otro formato de presentación. La orientación de las páginas horizontal, generalmente no se ve al mismo tiempo la totalidad del material, se tiene mucho menor control de la tipografía que en el material impreso y la resolución es menor, por lo que los detalles finos no están bien definidos.

Por lo que respecta a la tipografía, cada sistema operativo dispone de un conjunto de fuentes básico para presentar en pantalla los contenidos textuales, siendo diferente el grupo de fuentes que por defecto instala Windows del que instala Mac OS o Linux.

Además, las fuentes disponibles para construir páginas web son tan solo un pequeño subconjunto del conjunto de ellas que posee cada sistema operativo.

¿Cuanto texto puede haber en una página?

La cantidad de texto conveniente en una página web depende ante todo de qué tipo de página sea, ya que no es lo mismo, ni en concepción ni en desarrollo, un sitio web dedicado al comercio electrónico que uno dedicado a la divulgación científica, ni este que uno dedicado a la presentación de obras pictóricas.

Lo que sí hay es una serie de normas generales que a grandes rasgos pueden definir el comportamiento del texto en cualquier página web.

Así por ejemplo, si nuestra página contiene mucho texto es conveniente agrupar éste en columnas, ya que está comprobado que una gran cantidad de texto seguido en formato de líneas anchas cansa mucho la vista del usuario y le impulsa abandonar pronto el documento. Como regla general, podemos establecer como longitud correcta de las líneas de una página la que comprende 12-15 palabras.

Si estamos en la página principal de un sitio, que es la que en cierta forma da la bienvenida a un visitante y le informa a grandes rasgos de qué es el sitio web en el que se encuentra, el texto debe ser poco y muy explícito, para que pueda sacar con prontitud una idea clara de dónde esta y qué es lo que puede encontrar en el sitio.

Si nuestra página pretende comunicar al visitante una serie de conocimientos, como por ejemplo esta página que lees ahora, el texto es entonces el elemento fundamental de la misma, y te veras en la necesidad de elaborar páginas con gran cantidad del mismo. Procura entonces no hacer páginas que ocupen en altura más de una página y media (dos a lo sumo), para no obligar al usuario a utilizar continuamente la barra lateral de scroll, cosa que cansa mucho y hace que se pierda interés por el contenido.

Si el tema de tu página es principalmente gráfico, como puede ser el caso de un sitio dedicado al arte o a la fotografía, el texto debe ser poco, sólo el necesario para expresar una serie de ideas claras y concisas, ya que el verdadero protagonista de tu página deben ser las fotografías y elementos gráficos.

Como podéis ver, hay tantas normas como sitios se puedan hacer, siendo la experiencia y el método prueba-corrección las verdaderas técnicas maestras para lograr una serie de páginas atractivas y funcionales.

Disposición del texto. Niveles de cabeceras

Como ya hemos dicho antes, y al igual que ocurre en otros soportes divulgativos, la maquetación y el diseño tipográfico es aplicable en casi todos sus niveles al diseño de una página web, por lo que es necesario que para establecer un documento claro y atractivo dividamos el texto de nuestras páginas en una serie de apartados, que vendrán iniciados por una cabecera que defina el contenido de cada bloque, sobre todo si el contenido de nuestras páginas es eminentemente textual.

Como podemos tener bastantes apartados y cabeceras, es necesario ir remarcando la importancia relativa de cada una de ellas en el conjunto del documento, lo que podemos lograr mediante su tamaño y peso, así como con el color de su texto. Como norma general, las cabeceras que definen temas completos deben ser las de mayor tamaño y peso, los apartados principales del tema deben seguirle en importancia, y así deberemos ir reduciendo el tamaño y peso de las cabeceras conforme vayamos bajando en el árbol jerárquico de temas del documento.

Dentro de cada bloque, y ya definidas las cabeceras, deberemos ir situando bloques de texto que desarrollen la idea general introducida por la cabecera. El sangrado de este texto puede ser diferente dependiendo de la cantidad de texto en el apartado. Así, si tenemos poco texto podemos distribuirlo como si de un pequeño libro o folleto se tratase, sangrando cada párrafo y justificando el texto del mismo.

Pero si el apartado contiene mucho texto, aunque podemos seguir sangrando los comienzos de párrafo, en este caso no es conveniente la justificación del texto, ya que este tipo de alineación cansa la vista por su monotonía, por lo que es preferible dejar una alineación a la izquierda, en la que el efecto conseguido con la finalización de cada línea en un punto diferente consigue un resultado de descanso visual y hace el contenido mas legible.

Con un poco de lectura general y con la contemplación de páginas en Internet podemos ir poco a poco aprendiendo cual es la forma idónea de colocar nuestros textos en cada caso. Recomiendo sobremanera el estudio de unos buenos manuales de maquetación, diseño gráfico y tipografía.

Colores de los textos

Otro tema de vital importancia es el color que vamos a dar a nuestros textos. Es conocido el efecto psicológico de los colores y cómo afectan y transmiten uno u otro sentimiento, además de crear el conjunto disposición-color un estado receptivo en el usuario que le puede impulsar a continuar navegando en nuestra página o por el contrario abandonarla rápidamente.

Como norma general debemos procurar que el color de nuestros textos sea tal que destaque claramente del fondo de la página, sobre todo en el caso en que usemos una imagen de fondo, ya que el texto es la vía principal de transmisión de ideas, y por lo tanto debe ser la parte de nuestra página que más clara resulte al visitante. O no colocamos imagen de fondo o lo hacemos de tal forma que el texto, por su disposición y color destaque claramente sobre el fondo.

Un color de texto único para toda la página puede resultar monótono, sobre todo si el tema principal de esta es artístico o colorista, por lo que a veces es conveniente usar diferentes colores para diferentes partes del texto. En estos casos deberemos usar una gama de colores compatibles, que puede parar por el uso de colores análogos (de la misma gama o familia)o por el uso de colores complementarios, que consiguen un efecto visual equilibrado, potenciándose mutuamente, y especialmente indicados cuando queremos destacar un texto sobre un fondo de color. Es conveniente para ello el estudio de uno cualquiera de los gráficos de gamas de colores que podemos encontrar en cualquier obra dedicada a la pintura. En la imagen de la izquierda tenéis la rueda de colores; los complementarios se encuentran opuestos en la rueda, mientras que los análogos a un color están alrededor del mismo.

Si nuestra página esta orientada a un público juvenil, como puede ser una página sobre el mundo de los video juegos, el texto puede estar definido por una gama de colores agresivos, como son el rojo con amarillos, o con una gama de colores que le de aspecto sugestivo, como letras blancas, rojas o doradas sobre un fondo negro. Pero si nuestra página esta concebida para un público serio y/o general, como puede ser una página sobre economía o política, deberemos emplear una gama de colores neutros, como grises, azule grisáceos o tonos pastel, apta para todo tipo de públicos.

Por último, si nuestra página es corporativa, como puede ser el caso de una página de empresa o de un banco, los colores deben ser los marcados por la propia empresa, ya que cada empresa tiene uno o mas logotipos y un conjunto de colores corporativos propios, que son los que dan identidad propia a esa empresa entre todas las demás, siendo fundamental transmitir en la página esa individualidad que le es propia.

Estudiaremos mejor el mundo de los colores en el capítulo sobre imágenes.

Familias de fuentes en los textos

Otro tema a tener en cuenta a la hora de diseñar nuestros textos es qué tipo de fuentes vamos a usar en nuestra página.

Al igual que ocurre en el caso de los colores, es posible y casi conveniente el mezclar varios tipos de fuentes, buscando sobre todo romper la monotonía que crea una sola fuente.

Si deseamos mezclar fuentes deberemos, como regla general, no usar más de dos o trés tipos diferentes. Por ejemplo, podemos usar dos fuentes que sean parecidas, una de ellas Sans Serif para las cabeceras, y otra Serif para los bloques de texto. Recordemos que las fuentes Serif pintan una especie de terminaciones de adorno en los extremos de las letras, mientras que las Sans Serif no, pintando todas las letras planas. Fuentes Serif son por ejemplo la Times New Roman y la Georgia, y fuentes Sans Serif son la Verdana y la Arial.

Si la página va dedicada a un público corporativo o adulto podemos usar fuentes serias o clásicas, como Times New Roman o Arial. Si esta orientada a público general podemos usar Verdana, Helvetica o Tahoma. Y si nuestro público va a ser joven podemos usar fuentes mas dinámicas, como Comic Sans MS, Impact o Lucida Console.

Ejemplos:

Fuente Times New Roman (Serif)

Fuente Tahoma (Sans Serif)

Fuente Impact (Sans Serif)

Como en todo, la mejor forma es experimentar y experimentar, hasta que encontremos aquella combinación que exprese lo que deseamos transmitir, pero poniéndonos siempre en el lugar del usuario potencial, no en el lado del diseñador, ya que es este el verdadero destinatario y juez de nuestro trabajo final.

Cuidado con la ortografía

Deberemos tener siempre especial cuidado con la sintaxis y la ortografía en nuestros textos, ya que un buen trabajo de diseño puede verse arruinado si lo que transmitimos esta mal expresado y/o mal escrito.

Al fin y al cabo nuestro público va a sacar de nosotros, y lo que es más importante, de la empresa o entidad que representan las páginas web, la impresión que le demos a través las mismas, y un texto lleno de errores ortográficos denota un mal trabajo, por lo que es fácil que el usuario final abandone rápidamente el sitio web entero, con las consecuencias que pueda traer eso.

Para ayudarnos en este tema podemos usar un buen procesador de textos, utilizando su herramienta de corrección sintáctica y ortográfica, lo que nos va a permitir obtener un texto bien escrito sin necesidad de ser licenciados en filología.

Consejos generales

Vamos a resumir escuetamente una serie de consejos para el buen uso de textos en una página web:

 

• No abusar de la mayúsculas: estas letras poseen un fundamento sintáctico y gramatical propio, pero además son un elemento idóneo para remarcar ciertas partes de información de la página. Su uso excesivo mata este factor, convirtiendo un texto interesante en una serie monótona de caracteres que no dicen nada, y que por lo tanto no captan la atención del visitante. Usa las mayúsculas al principio de cada frase, los nombres propios, los títulos y subtítulos de la página.
  
• No usar textos de pequeño tamaño en tipos serif: debido a que este tipo de letras están pensadas para ser impresas, no para ser contempladas en pantalla, y si son de pequeño tamaño se deforman y se hacen ilegibles. Esto pasa también con los tipos son Sans Serif de pequeño tamaño.
  
• No abusar de las letras en cursiva: ya que el texto en itálica es difícil de leer en pantalla, debido a la inclinación del mismo, que provoca un escalonado en los bordes de las letras que las deforma, sobre todo en tamaños pequeños de fuente.
  
• No abusar de los textos en negrita: ya que la misión de este es reforzar la importancia de una parte de la información que damos en la página, y se debe usar sólo para este fin. Además ocurre algo parecido al caso de las cursivas, ya que para pintar en pantalla una letra en negrita lo que hace el ordenador es añadir pixels adicionales en los bordes de la letra. Si esta es de pequeño tamaño, se produce un desagradable efecto de emborronado, y si es de gran tamaño se produce el efecto de escalonamiento, no siendo convenientes ninguno de ellos.
  
• No usar, y menos aún abusar, de los efectos de parpadeo o deslizamiento: como pueden ser textos en marquesina, en efecto Blink o en desplazamientos mediante scripting, ya que son irritantes y marean y confunden al usuario.
  
• No usar demasiados tipos de fuentes ni demasiados colores diferentes , ya que rompen la armonía que debe haber en el contenido de todo documento, aparte de que corremos el riesgo de que el usuario no tenga alguna de las fuentes usadas instaladas en su ordenador, lo que hará que éste las sustituya por la fuente estándar, rompiendo con ello todo nuestro esquema de estiolo. Conviene usar siempre las fuentes estándar.
  
• Cuidar la accesibilidad de la información: ya que si usamos letras de pequeño tamaño, efectos compatibles sólo con algunos ordenadores o colores que necesiten pretaciones especiales, estamos eliminando de la lista de nuestros visitantes a aquellas personas que no pueden acceder a este tipo de contenidos.
  
• Usar enlaces visualmente independientes: es decir, que los enlaces de la página se distingan cláramente del resto del texto. Piensa que no todos tus visitantes están tan acostumbrados como tú a navegar por Internet, por lo que debes marcar las diferentes partes de tu página de forma clara.
  
• Presentar el texto de una forma lógica: no olvidemos que al fin y al cabo una página web es un documento como otro cualquiera, por lo que debe tener una lógica de desarrollo y de presentación si queremos que cumpla su misión principal, que es facilitar información clara al visitante.
  
• Usar siempre caracteres compatibles con el estándar: que tradicionalmente ha sido el el conjunto de caracteres ASCII, y que incluye la letras, los números, los signos de puntuación y algunos caracteres especiales como los tabuladores. Con objeto de dar apoyo a otros idiomas, posteriormente se tomó como modelo el juego de caracteres ISO 8859-1, también llamado a veces ISO Latin-1, que no está orientado a ningún idioma en particular, por lo que para especificar uno de los subgrupos de este correspondiente a un idiomas determinado, es necesario especificarlo en la cabecera de la página mediante la etiqueta CHARSET. Y últimamente, a partir de las especificaciones del HTML 4.0, se ha tomado como estándar el juego de caracteres UNICODE.

Para evitar contradicciones y malas interpretaciones es conveniente ceñirse casi siempre al juego ASCII, por lo que si escribes en castellano, no acentúes las palabras directamente, si no que debes usar los caracteres especiales que hay para tal efecto.