5 pasos para hacer tu web más legible con el interliniado

http://www.trucosoptimizacion.com/index.php/2010/09/29/5-pasos-hacer-web-legible/

Por Daniel Rodríguez.

En la web podemos hacer muchas cosas, pero una de las más frecuentes es leer. Tener un texto optimizado para la lectura es fundamental, no sólo por presencia en pantalla sino por eficiencia para el lector. Un texto legible se lee rápido, se comprende mejor. He aquí cómo conseguirlo…

5 fáciles pasos

• Alineado horizontal:
  Cualquier párrafo de texto debería comenzar a una distancia del margen izquierdo de la página situada entre los 300px y los 600px. Ni antes, ni después. Estas cifras se revelan a partir del reciente estudio publicado en Jakob Nielsen’s Alertbox, que demuestra cómo el usuario dedica el 69% de su tiempo en mirar hacia la mitad izquierda de la pantalla.
• Ancho de párrafo:
  Lo suyo es que cualquier párrafo deberá estar formado por líneas de texto de no más de 20 palabras por línea. Esto son alrededor de 500 pixeles de ancho en caso de utilizar un tamaño de fuente de 10-12px. Ciertos autores ajustan mucho más esta cifra. Este es el caso de las no más de 12 palabras por línea que sugieren en el libro “Web Style Guide – Basic Design Principles for Creating Website” y que está directamente relacionada con la fisiología del ojo humano. De ello también habla Russ Weakley en su artículo Ideal line length for content. En resumen, las consecuencias de optimizar el ancho de página son un incremento en la legibilidad del texto.
• Tamaño de fuente:
  Corresponde a la propiedad font-size.
  Como norma, es recomendable utilizar un tamaño de fuente igual o superior a los 10px. No obstante, es conveniente emplear tamaños de fuente alrededor de los 14px si la audiencia del sitio web gira más allá de los 40 años.
• Tipografía:
  Es la propiedad font-family del CSS.
  Los tipos de fuente más recomendados son aquellas especialmente diseñadas para ser mostradas en pantalla (y no en papel). Estas son las Arial, Georgia, Times, Verdana o Courier entre otras. Ante la duda, Verdana.
• Interlineado:
  En todo CSS esta es la propiedad line-height.
  El interlineado es un parámetro fundamental para lograr un texto legible. No interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco líneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos. Idealmente, es interesante utilizar un interlineado superior al tamaño de fuente. Es decir, para un tamaño de fuente de 10px es apropiado utilizar un interlineado de, por ejemplo, 12px.

En definitiva, aplicando estos consejos en tu actual o próxima web conseguirás un texto más legible. Es decir, un texto que se lee rápido y que dará pie a una buena comprensión.

Por último… ¿Que es eso de los ems?

Realmente, los ems son la solución a todos los males relacionados con ajustar el tamaño de un texto para la web.

La gracia de un em es que es una medida relativa al tamaño base utilizado. Dicho de otra manera, si el tamaño base de tu texto esta ajustado a 10px, 1em será igual a 10px (1 * 10px = 10px). Trabajar con ems facilita las cosas.

Así, para replicar las propiedades sugeridas en este post mediante ems, hay que hacer lo siguiente:

font-size: 10px; /* Este es el tamaño de fuente base para body */

font-size: 1em; /* Tamaño resultante: 1em * 10px = 10px */

line-height: 1.2em; /* Interlineado resultante: 1em * 10px = 12px */

¿Ventajas de utilizar ems? Si decidimos cambiar el tamaño de la fuente, sólo será necesario cambiar el valor para la fuente base. El resto se recalculará proporcionalmente.

Por cierto…

¿Conoces Typetester.org? Es un buen sitio donde testear todos los parámetros necesarios para conseguir tu configuración de texto ideal  Tags: Escribir para la web, Legibilidad

Si te interesa la optimización web y deseas aprender más, no deberías perderte nuestras próximas sesiones del curso Usabilidad y Optimización Web - Trucos y Herramientas que impartirán nuestros especialistas en Optimización en Madrid y Barcelona durante el mes de Mayo.

Posts relacionados

• 12 Trucos para el diseño de formularios web
• Conociendo los test que podemos hacer con Website Optimizer
• 4 reglas de oro para todo call-to-action
• 2 sencillas formas de inspirarse para diseñar
• 6 trucos para incrementar las conversiones web en un 300%