> Manuales > Curso práctico de diseño 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.

Disposición correctya de textos en una página web

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

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.

Disposición básica de textos

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.

Disposición con colores y sangrado

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:

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.

Luciano Moreno

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

Manual