Categorías: Diseño, HTML, Usabilidad

5 pasos para hacer tu web más legible

Publicado el 29 septiembre 2010 por .

Texto legible

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: ,

16 Comentarios

  1. Oriol Farré Dice:

    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! ;)

  2. marta bota Dice:

    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á

  3. Eduard Barredo Dice:

    experto en usabilidad + web analytics + voice of customer, el triángulo amoroso! :D

    Apuntadas quedan vuestras aportaciones para la siguiente revisión del blog. Muchas gracias!

  4. Daniel Rodríguez Dice:

    @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.

  5. DUQUE Dice:

    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.

  6. Nacho Plaza Dice:

    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.

  7. AbrahamS Dice:

    Muchas gracias por el post Daniel! Intentaré llevar a la práctica tus indicaciones. Me está gustando bastante esta web! Saludos!

  8. igualacero Dice:

    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.

  9. Pedro Dice:

    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

  10. David Dice:

    Hola, enhorabuena por el artículo y los enlaces y posts relacionados.

    Respecto al alineado horizontal no estaría tan de acuerdo, ya que según deduzco del informe de Nielsen, es debido a la presencia de la barra de navegación vertical a la izquierda en las webs analizadas. Si tu diseño de tu web no la tiene (porque tal vez sólo tenga una barra de navegación superior), entiendo que el texto no debe empezar 300 px a la derecha, sino sólo dejando unos pocos pixeles (20 a 40x) para que no se pegue al margen

  11. dmaje - comercio electrónico Dice:

    Muy buena la publicación, buenas bases para estructurar la web

  12. Elina Dice:

    Gracias por el post!…soy nueva en tu blog, pero me encano, no solo este sino otros post por los que estuve revisando.
    A veces por querer meter demasiado texto terminamo perdiendo toda usabilidad y buen gusto ante los ojos de nuestros usuarios…

    Me quedo de seguidora en tu Tw

    Saluditos!!

  13. Ambrosio Dice:

    excelentes consejos muchas gracias

  14. Carmen Dice:

    Mil gracias por tus sabios consejos, los voy aplican enseguida y deseo que tengan éxito.

    Te he recomendado a mis amigos y en Twiter. Suerte

  15. Javier Dice:

    Desconocía la existencia del typetester, está muy bien la herramienta, gracias!

  16. Nino Luigi Zegarra Malatesta Dice:

    Daniel:
    Muchas gracias por el aporte para mejorar la legibilidad de una web. Tu blog me parece muy interesante.

    Gracias por compartir

    Nino

4 Trackbacks

  1. Tweets that mention 5 pasos para hacer tu web más legible | Trucos Optimización -- Topsy.com Dice:

    [...] This post was mentioned on Twitter by Antonio Andújar, Esther Gómez Oliete, Oriol Farré, Jordi, fury and others. fury said: Twitter: 5 pasos para hacer tu web más legible | Trucos Optimización: 5 pasos para hacer tu web más legible – En l… http://bit.ly/aSNVHm [...]

  2. Twitter y Analítica Web | WebAnalytics.ES Dice:

    [...] 5 pasos para hacer tu web más legible en Trucos Optimización [...]

  3. Hacer la web más legible: 5 pasos importantes | Crea mi Web Dice:

    [...] visitar artículo completo Compartir: [...]

  4. Anónimo Dice:

    [...] el esquema de colores, el uso tipográfico e imágenes deben ser coherentes con la temática y diseño de tu [...]

Deja tu comentario