lun

18

may

2015

Claves para tener un texto legible en una web

Legibilidad + diseño web
Legibilidad + diseño web

A la hora de hablar del diseño web, las imágenes, los colores y la composición copan nuestra mente. En ocasiones nos olvidamos del papel que desempeña el texto en una página web cuando es un elemento fundamental que al menos debe ocupar el 50% de nuestra atención.


Y es que el texto informa a nuestra visitas, posiciona nuestra página en Google y es un elemento de diseño. En este artículo nos vamos a centrar en el aspecto del texto como elemento visual y de diseño; ya que como tal, debe estar ajustado al diseño y cumplir la regla fundamental: "ser legible".

Todo gira entorno a la "legibilidad" de los textos

Un texto es legible cuando es fácil de leer. Por eso, la legibilidad, la capacidad del texto para ser leído, es clave y depende de muchos factores (no sólo de la calidad de la redacción) como la longitud de las frases, del tamaño de la letra, el contraste...


Fundamentalmente, es un factor que influenciará en el tiempo en el que una visita permanezca en tu página. Y es que la lectura en una pantalla no siempre es idónea. Hay algunos estudios que dicen que al leer en un medio como una pantalla, leemos menos, más lento y que retenemos menos información que si el medio fuese directamente papel. De hecho, se estima que en una pantalla sólo se lee el 25% del texto.


Vayamos al grano, ¿cómo podemos influenciar en este elemento para hacer que las personas permanezcan en nuestra página?

Longitud de la línea

Estamos acostumbrados a leer en los tamaños estándares del papel como el tamaño, pero cuando el texto aparece en una pantalla, la línea del texto debe reducirse y no ocupar toda la pantalla, ya que esto dificulta mucho la lectura. Compara estas dos páginas:

Página web con 140 caracteres por línea
Página web con 140 caracteres por línea
Página web con dos columnas y 67 caracteres por línea
Página web con dos columnas y 67 caracteres por línea

Aunque el texto sea el mismo, la sensación que se produce en nuestro subconsciente, es que el texto de la imagen superior es más largo. La disposición del texto en columnas hace que sea más fácil de leer y por eso "invita" a su lectura. Y es que la longitud recomendada para una página web oscila entre los 40 y 70 caracteres (dependiendo del tipo de letra que estés empleando, claro está).

CONSEJO: Algunas plantillas de Jimdo, como Zurich - la plantilla de la imagen - tienen un ancho especial que las hace ideales para mostrar imágenes. Si quieres incluir texto, te recomendamos que utilices los módulos de columnas.

Contraste

El contraste; es decir, la diferencia entre el fondo y el texto, favorece la legibilidad de un texto. Este factor no sólo se refiere al contraste entre un color claro y oscuro; sino también hace referencia a las diferencias de los colores; por ejemplo, rojo y azul, son dos colores que no facilitan la lectura como podemos ver en el ejemplo de abajo.

Cómo elegir los colores adecuados

Desde tiempos inmemoriables se ha utilizado el contraste blanco y negro por la misma razón que ahora comentamos: la legibilidad de los textos.


Existen muchas combinaciones que podemos utilizar sin equivocarnos; y más ahora, que el nuevo editor de estilos incluye una gran cantidad de posibilidades de color y transparencias.


Asegúrate de que el contraste es lo suficientemente fuerte como para poder facilitar la lectura del texto en la página.

Texto oscuro sobre fondo claro: la elección acertada

El uso de la tinta oscura sobre el fondo blanco no fue una decisión gratuita; sino basada en este mismo principio: la legibilidad de un texto. Sin duda, una decisión que no falla es la de utilizar un color oscuro, contrastado sobre un fondo claro.


Pero... ¿Y viceversa?¿Tiene el mismo efecto un texto claro sobre un fondo claro? En principio sí que se mantiene el contraste, pero es una decisión que se tiene que tomar con conocimiento de causa: es necesario tomar una serie de precauciones como aumentar el tamaño de la fuente o dejar más espacio para que la mirada pueda descansar.

Utiliza letras claras sobre fondos oscuros en pequeñas dosis
Utiliza letras claras sobre fondos oscuros en pequeñas dosis

Cuando se trata de arriesgarse en el diseño, nuestro consejo es que no se haga si no se está cien por cien seguro de que efecto se quiere lograr. Una página en oscuro puede ser muy "pesada" de leer.

Color de los links

Los links es otro de los elementos que podemos resaltar gracias al color. La recomendación principal en el diseño es que se procure poner un color con el que se indique de algún modo al lector, que ese texto es un enlace.

NOTA: En Jimdo puedes utilizar el editor de estilos predeterminado que te permite tener una combinación preestablecida de colores - incluido el color del link.

Espacio en blanco

En una página web, disponemos de más espacio que en un papel para poder escribir cómodamente. Aumentar el interlineado puede facilitar la lectura del texto.


Esto también contribuye a que el texto no se vea como un bloque.

Añade espacios y líneas divisorias para separar párrafos

Para crear más espacio visual, se pueden utilizar las líneas divisorias y el módulo de espacio en blanco.


Del mismo modo, puedes "romper" el párrafo creando listas numeradas y con guiones; además esto ayuda a que la asimilación de los conceptos más importantes sea más fácil y eficaz.

Ajusta el interlineado

En función del tamaño de la letra puedes ajustar el interlineado de los textos. Normalmente se recomienda que el espacio sea un espacio razonable, que permita la lectura fácil. Puedes basarte en la regla de ante un texto más pequeño (por ejemplo, 10, 11 pt) , puedes tener un interlineado menor (1.00) , mientras que ante un texto mayor (28, 36 pt) deberás utilizar un interlineado mayor.

En el siguiente ejemplo, vemos como el espacio en blanco rodea la imagen y los textos, permitiendo a la visita centrarse en la imagen principal y creando un equilibrio entre el peso de las imágenes y el de los textos. De este modo se facilita la lectura y se dirige la atención de las visitas hacia el producto.

Alineación de los textos

Como en cualquier editor de texto, en nuestro módulo de texto podrás encontrar fácilmente cómo alinear los textos a la derecha, a la izquierda, centrado o justificado.

Elegir la correcta alineación

El texto alineado a la izquierda es probablemente la opción estándar de la lectura occidental. El texto centrado se recomienda para los títulos, por ejemplo; aunque si es un texto compuesto de varias líneas, puede ser difícil de leer; esto se debe a que nuestra mirada tiende a buscar el inicio de la frase y en el momento que está desplazada, se requiere de un esfuerzo por parte del lector para reconocerla.

Aunque pueda sonar extraño, los textos justificados se recomiendan sobre todo para formatos impresos. Al verse interrumpida la línea por el salto habitual de la frase, permite una lectura más fluída.

Tamaño de la letra

Incluso aquellos que tienen una vista de lince, deben deternerse un instante para pensar si, como visita, podrían leer su propio texto. Lo que para nosotros puede ser normal - pues estamos acostumbrados a verlo así -, para nuestras visitas puede ser un suplicio y una invitación a dejar la página. Compruébalo tú mismo en el ejemplo inferior:

Una regla básica para no equivocarse con el tamaño es comenzar a partir de 16 px. Pero recuerda que esto dependerá también del tipo de letra que estés utilizando. Puedes comprobar si se lee correctamente haciendo test de usabilidad en tu página web.

Tipografía

Con más de 600 tipos de fuentes de Google para elegir, seleccionar la tipografía adecuada puede ser una tarea ardua. Te mostramos una regla básica que puedes seguir para el diseño:


  • Títulos: selecciona una fuente que sea diferente al resto, destacada que dé un cierto dinamismo a la página.
  • Párrafos y cuerpo del texto: escoge un tipo de letra que sea fácil de leer, como una sans serif.
  • Menú de navegación: puedes escoger una de las fuentes anteriores o incluso una tercera que no rompa con la armonía del diseño.


Si vas a usar mayúsculas, procura sólo utilizarla para el menú de navegación. No se recomienda en frases enteras, pues esto hace que no se pueda leer correctamente.

Resumiendo: puntos claves de la legibilidad de los textos

  • La longitud de la línea debe ser menor a 70 caracteres - con excepciones, como los blogs. En caso contrario, se pueden utilizar columnas para facilitar la lectura.
  • El contraste entre el fondo y el tipo de letra debe ser suficiente para que se lea correctamente.
  • El espacio en blanco ayuda a descansar la mirada y al mismo tiempo a concentrar la atención de nuestras visitas.
  • Alinear los textos a la derecha es la forma más recomendada para un formato digital.
  • El tamaño correcto de la letra empieza a partir de los 16 px. Pero debes ajustarlo en función del tipo de letra seleccionado.
  • La tipografía debe ser seleccionada para diferenciar títulos, textos y navegación.

Esperamos que estas recomendaciones te hayan ayudado y no te olvides de dejarnos tu comentario o compartir en las redes sociales.

Elena Benavente / RR.PP
Elena Benavente / RR.PP


Escribir comentario

Comentarios: 20
  • #1

    jordi (viernes, 22 mayo 2015 23:15)

    Lo tendre en cuenta,ay que estar en todo y uno no puede dejarse nada.

    muchas gracias.

  • #2

    Felipe Chávez G. (domingo, 24 mayo 2015 13:12)

    Gracias Jimdo por todas las pistas para mejorar nuestros diseños.

  • #3

    Ángel (domingo, 24 mayo 2015 16:28)

    Gracias por los consejos.

  • #4

    Cook&It (martes, 26 mayo 2015 10:52)

    Creemos que lo seguimos al pie de la letra, pero gracias por tan buenos consejos.

  • #5

    Raquel- Gabinete RgR (miércoles, 27 mayo 2015 15:34)

    Muy útil para mejorar la web. Gracias Jimdo.

  • #6

    carmen (viernes, 29 mayo 2015 20:33)

    Hola, tengo un problema con la vista del móvil de esta página, y es que la foto del encabezamiento queda recortada y no se ve la cara. Me podríais aconsejar cómo solucionarlo? Muchas gracias

  • #7

    carmen (viernes, 29 mayo 2015 20:38)

    Perdonad, la pregunta anterior no se refiere al tema de la legibilidad. Pensaba que no se iba a publicar. De todos modos gracias por vuestros consejos. Saludos

  • #8

    raúl (sábado, 30 mayo 2015 23:50)

    gracias equipo jimdo por sus excelentes consejos

  • #9

    Elena de Jimdo (lunes, 01 junio 2015 09:35)

    Hola a todos :)

    ¡Muchas gracias por vuestros comentarios!

    @carmen: he entrado en tu página a través de mi dispositivo móvil y no he visto a qué te refieres. ¿Podrías escribirnos un email a contacto@jimdo.es?

    Un saludo ¡y gracias!
    Elena

  • #10

    Smart Academy (domingo, 07 junio 2015 19:46)

    Conseguir una estética atractiva en la web no es fácil y todos estos consejos ayudan bastante aunque luego ineludiblemente tiene que llegar la inspiración.

  • #11

    ELIZA (martes, 09 junio 2015 04:51)

    MUY BIEN GRACIAS, EL DISEÑO EDITORIAL ERA ALGO QUE YO REALIZABA, PERO CIERTO AHORA VARIAS REGLAS HAN CAMBIADO , Y EL DISEÑO DIGITA TIENE SUS RETOS Y VENTAJAS.

  • #12

    Matoas (miércoles, 10 junio 2015 19:06)

    Hola. a Todos.

  • #13

    Mau Vargas (sábado, 13 junio 2015 16:55)

    Excelente información exacta correcta y precisa
    Muchas gracias!!!

  • #14

    welington (domingo, 12 julio 2015 02:17)

    Hey hola a todos, saben para mi es muy provechoso escuchar todas esas recomendaciones de los usuarios y sobre todo de los expertos de jimdo.. me gustaria que le echaran un vistazo a mi pagina y me den algunos consejos al respecto para mejorar... gracias y un abrazo a toda la familia Jimdo.

  • #15

    sewa mobil pengantin jakarta (jueves, 30 julio 2015 04:43)

    this is awesome article
    i like it

  • #16

    Miguel Ángel (sábado, 05 diciembre 2015 10:00)

    Hola:

    Muy buenos los consejos, pero creo que en el tema de la alineación hay un error. Te refieres a "alineación derecha" como la recomendada, y en el ejemplo la que se muestra es la izquierda (y la centrada).

    No es importante, pero no cuesta nada corregirlo.

    Un saludo.

  • #17

    Jimdo - Team (lunes, 07 diciembre 2015 13:49)

    @MiguelAngel muchas gracias por esta observación y claro que todos estos detalles son importantes, ya hemos corregido este error. Que tenga sun buen día :)

  • #18

    Diseño de paginas web (martes, 22 diciembre 2015 19:14)

    Excelentes consejos a la hora del diseño de una pagina web que lograra llamar a las personas a que permanezcan el sitio web.

  • #19

    sysaddin (jueves, 28 enero 2016 20:45)

    Encontrarás interesantísimos blogs en español en http://fuenteslegibles.com, clasificados en categorías y ordenanos por el grado de legibilidad promedio de sus publicaciones según la escala Szigriszt-Pazos.

  • #20

    Iván F. (jueves, 01 septiembre 2016 19:02)

    "Alinear los textos a la izquierda" quieres decir en el resumen.

    Muchas gracias :)