5 reglas para facilitar la lectura de tu blog

El texto es una parte importante de un blog o sitio web, en algunos casos lo es todo y no podemos equivocarnos en su formato porque perderemos muchos lectores. El diseño de un blog puede ser feo gráficamente, pero si tenemos el texto bien formateado poco importa ya que lo principal es leer su contenido. Partiendo de esta base hay 5 reglas a cumplir a la hora de hacer un blog agradable a la vista y fácil de leer:

• El contraste con el fondo.
• El tamaño de la tipografía.
• El espacio entre letras, palabras, líneas y párrafos.
• El uso correcto de ayudas visuales como el subrayado, negrita y colores.
• La relación entre el texto y su entorno.

Antes de empezar quiero aclarar que no tengo ningún título ni estudio sobre diseño, asi que los términos específicos van a faltar. Tampoco pretende ser una guía de diseño, no se habla de estructuras ni imágenes, menos es un tutorial sobre CSS ni diseño web. Solo pretende ser un artículo que muestre claramente lo fácil que es mejorar un sitio para brindarle una mejor experiencia al usuario desde, pura y exclusivamente, el texto del mismo y su relación con el resto de los componentes. Hecha la aclaración, los invito a leerlo con buen humor y soltura.

Para ejemplificar vamos a utilizar el sitio de nuestro invitado ficticio llamado Esteban Puntocero, que hace poco se creó un blog y lo armó algo asi:

Como podrán ver nuestro querido Esteban tiene problemas graves de buen gusto. Vamos a darle una mano para mejorar su blog y evitarle a sus visitantes un transplante de ojos.

Regla #1: El contraste del texto con el fondo

Todos sabemos que el contraste absoluto se da entre el negro y el blanco (fondo blanco con letras negras, por favor) y facilita la lectura porque claramente se distingue uno del otro, resaltando las letras y descansando la vista al tener un fondo claro. Casos similares se pueden dar entre un azul y un celeste clarito de fondo o el texto marrón y un fondo crema.

Vamos a modificar el blog de Esteban para darle un buen contraste entre el fondo y el texto:

Ahora es mucho más fácil de leer. Le modifiqué el fondo de la cabecera a un color más oscuro (#383D44) y la letra blanca (#FFFFFF). La barra de navegación a un marron claro (#E6E3D7) con letras grises oscuras tirando a verde y azul (#383D44). La parte de contenido principal se pasó a un fondo blanco (#FFFFFF) con letras grises oscuras casi negras (#333333). Los vínculos se modificaron junto con el resto del texto.

En resumen: Se le dió el mayor contraste al título, para que sea llamativo con un fondo oscuro y letra clara y se hizo lo contrario con el contenido principal, asi resulta cómodo y fácil de leer. La barra de navegación tiene colores tranquilos que no molestan para leer el blog y al mismo tiempo la letra es bien legible. Ahora el blog de Esteban va agarrando color.

Regla #2: Distintos tamaños de tipografía

Básicamente es una ayuda visual para saber cuales son títulos, subtítulos y el texto de más importancia en el sitio. Hasta Google les da más peso al texto dentro de los tags h1, h2, h3, etcétera. Y se debe tener mucho cuidado con el tamaño del texto principal, como mínimo debe tener 12 pixeles para facilitar la lectura a todos los usuarios y en especial a los que tiene problemas en la vista.

Asi que vamos a modificar el blog de nuestro amigo con esta nueva regla:

De a poco va pareciendo algo serio. Agrandé la letra del título, achiqué las de la barra lateral dejando el título un poco más grande que los links. El texto principal lo pasé a 12 pixeles y la información sobre la entrada a 11px.

Regla #3: El espacio entre letras, palabras, líneas y párrafos.

Otra gran forma de aumentar la legibilidad de un sitio. El espacio en blanco es lo más cómodo que existe para leer. Vamos a usar la propiedad line-height para darle un poco de aire al diseño.

Si todo sale bien ya vamos a tener algo más presentable, veamos:

Bueno, ahora al menos está como para presentársela a tu familia. No les va a gustar mucho pero seguro llevaste cosas peores, vamos…

No hay mucho que explicar en este caso, simplemente separé más las líneas entre si resultando en un texto más cómodo de leer.

Regla #4: El uso correcto de ayudas visuales como el subrayado, negrita y colores.

Vamos a indicarle al usuario que partes del texto son las más interesantes y la función de cada una modificando colores de enlaces, sectores de información, resaltando lo más importante de nuestra entrada y ordenando mejor la barra lateral.

A Esteban ya está empezando a gustarle su nuevo diseño:

¡Ahora si! Está más lindo ¿no? Le cambié el subtítulo del blog a un gris clarito (#CCCCCC), los links a celeste (#577BAF) sacándole el subrayado en la barra lateral debido a que ya lo tenían los títulos que cambié a verde (#669933) al igual que a la información y el título de la entrada. Ya casi terminamos con todas las reglas y se va notando la diferencia.

Regla #5: La relación entre el texto y su entorno.

Esta es una de mis favoritas ¡Separar y ordenar! Si el espaciado entre las líneas de texto mejora la lectura esto le hace una cirugía plástica completa. Lo que vamos a hacer es separar las distintas secciones entre si con padding y margin, y a ordenar el texto con text-align de la siguiente manera:

Magnifíc diría un francés con bigote. Lo que hice fue separar a la cabecera con un margen de 20px del resto, centré el texto, le di más relleno con un padding de 15px y a la barra lateral uno de 10px, que también ordené el texto hacia la izquierda y separé los tipos de blogs con un margen de 10px. El contenido ahora está a 20px de distancia de la barra y tiene el texto justificado.

Esteban está saltando en un pata de felicidad y claro, si su sitio pasó de ser una bomba visual a una invitación a leerse.

Espero que les haya gustado el artículo :)