5 pasos para hacer tu web más legible
Publicado el 29 septiembre 2010 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 propiedadfont-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 propiedadfont-familydel 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 propiedadline-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.
Síguenos en Twitter
septiembre 29th, 2010 at 10:31
Por lo que tenia entendido, un “em” es el tamaño de la letra “M”, no? Así, el texto siempre será proporcional.
Muy buen artículo, aunque veo que muchos de los tips que dás no se cumplen en este blog! Me ha costado mucho leerlo!
septiembre 29th, 2010 at 10:57
muy interesante, cosas que siempre hay que tener en cuenta. En el diseño siempre tendimos a letras pequeñas. No hay que tener miedo a las tipos más grandes (eh
) siempre que queramos que nos lean, claro está
septiembre 29th, 2010 at 11:30
experto en usabilidad + web analytics + voice of customer, el triángulo amoroso!
Apuntadas quedan vuestras aportaciones para la siguiente revisión del blog. Muchas gracias!
septiembre 29th, 2010 at 19:52
@Oriol
Si, un em equivale a las proporciones del ancho y alto de la M, dependiendo de la fuente utilizada. A partir de esas dimensiones, toda lo demás se hace relativo a esa base.
Sobre los consejos, “En casa de herrero…” Aunque tampoco estamos tan mal. Flojos en el margen lateral izquierdo, pero aprovamos en lo demás. No me creo que hayas tenido dificultades para leerlo
@Marta
Hola Marta, hemos subido 1px el tamaño de la fuente. ¿Que tal ahora? Saludos.
septiembre 30th, 2010 at 9:43
Muy bueno el artículo, odio esas webs en las que nada más entrar me pega un latigazo en los ojos el texto y aunque el contenido me interese la cierro por que me quemo la vista para leer un párrafo.
septiembre 30th, 2010 at 10:24
En el apartado Tipografía, añadiría que las tipografías Sans-Serif son las recomendadas para visualización en pantalla, frente a las Serif, que son mejores para mostrar en papel impreso. Por eso, no es malo poner una Serif en tu CSS para impresión (media=”screen”).
Lo de “mejor” se debe a la diferente resolución que ofrecen un monitor y una impresora.
septiembre 30th, 2010 at 13:43
Muchas gracias por el post Daniel! Intentaré llevar a la práctica tus indicaciones. Me está gustando bastante esta web! Saludos!
octubre 2nd, 2010 at 1:58
Hola buenas, estoy realizando un cambio profundo (en contenido) en una web para optimizarla lo más posible para el seo por supuesto sin hacer ninguna tontería. Voy a poner en práctica varios de tus consejos que me parecen muy interesantes, a ver que tal va la cosa.
Gracias por el aporte, un saludo.
octubre 31st, 2010 at 10:18
1)Estoy tratando de ampliar el entrelineado (line-height) de las entradas, pero no sé cómo hacerlo. No puedo usar el diseñador de blogger
2)También me gustaría centrar las imágenes de columna lateral. Están alineadas sobre el borde izquierdo
3) No me aparece al final de la entrada la cantidad de comentarios
Muchas gracias. Te agradeceré mucho si me das una mano. Me gustan las plantillas no oficiales de Blogger, pero no sé HTML