La tipografía en los blogs y cómo evitar problemas oculares por leerlos

Mariana Eguaras junio 10, 2019 @ 9:38PM

Por el 5 Jun, 2019 | 4 comments

 

Gracias a un tuit de Julieta Lionetti decidí escribir esta entrada sobre el uso de tipografía en los blogs.

Digo decidí porque hace rato que este tema rondaba en mi cabeza y nada mejor que exponerlo aquí. Y me rondaba, sobre todo, porque me gusta saber si mi blog se lee adecuadamente.

Si bien esta entrada no tiene relación directa con hacer libros sí lo tiene con parte del alma de ellos: la tipografía, las fuentes y las letras.

Por supuesto, a todos nos interesa que nuestras bitácoras sean visitadas y leídas. ¿Por qué? Porque queremos que nos lean y si se hace sin dificultad aumentará las ganas de seguir siendo leídos.

Además, si gusta lo que dice, cómo se dice y la experiencia de usuario es agradable nuestros artículos se compartirán en las redes sociales.

Seamos autores o profesionales del sector del libro, o de cualquier otro, debemos preocuparnos por la famosa marca personal. Cuidar de nuestros sitios web e imagen en redes sociales es parte de ello.

Vamos, que hablamos de marketing y promoción de nuestro trabajo y de nuestros libros. ¡Para nada una nimiedad!

Lo que sí comparten libros y blogs, y cualquier pieza o composición que contenga texto, es la legibilidad tipográfica.

Y este es un factor vital que se debiera respetar si queremos ser leídos. Tanto en el diseño editorial como en el diseño web la legibilidad es elemental.

En el diseño, como en todas las disciplinas, hay tendencias que se convierten en moda. Así, hubo épocas en las que se escribía sin una sola letra mayúsculas y otras en las que los textos de las piezas gráficas eran diminutos y había que entrecerrar los ojos para poder leerlos.

¿Habrá llegado hoy la moda del color gris pálido para los textos a las páginas web y blogs? 😆 Recuerda: ¡la legibilidad es un clásico! Y jamás pasa de moda.

 

La legibilidad de la tipografía en los blogs y páginas web

Hay al menos tres principios básicos de la legibilidad que aplican tanto para una pantalla como para el papel:

  1. El contraste entre el color del fondo y el color de la letra o del objeto.
  2. El tipo de fuente que se elija.
  3. El tamaño y el peso de los caracteres de esa fuente.

Por tanto, algunos supuestos que arriesgo son:

1. Cualquier letra en color gris se ve menos sobre fondo blanco que una en color negro.

2. Los caracteres pequeños presentan más dificultad para ser leídos que los grandes.

3. Las letras finas pierden un poco de visibilidad frente a las variantes más rellenas.

4. Una letra serif es mejor que una sans serif para un blog.

5. Los textos son mejor interpretados si no se usan cursivas.

6. Los fondos que no sean blancos entorpecen la lectura.

 

¿Hasta qué punto es así?

Ninguna regla es exacta e inamovible para obtener legibilidad en nuestros textos. Depende de cómo se combinen los tres principios mencionados arriba obtendremos resultados más buenos o no tanto.

Por ejemplo, en el supuesto 1 los textos en gris oscuro funcionan igual de bien que si van en negro; aunque para ello deben tener un tamaño aceptable y mejor si es una fuente paloseco. Un gris claro sobre fondo blanco pierde la partida…

En 2, si por pequeño entendemos 10 px, sí, definitivamente, costará leer el texto. Pero si por pequeño pensamos en 14 px y la fuente es una Sans no habrá inconvenientes.

El supuesto 3 dependerá de la fuente elegida y de cuán fina sea; es decir, del peso de la tipografía que tenga, de cuán delgada o rellenita sea.

En 4 dependerá del tamaño de la letra y de la una tipografía con serifa elegida. Hay páginas web con fuentes romanas que tienen suficiente tamaño para ser leídas sin problema en pantalla; ayuda si el color es negro o un color oscuro.

El 5 está supeditado a la cantidad de texto: una entrada entera en cursiva es un agobio; no si es una frase, cita o texto corto y tampoco palabras en los párrafos.

Y en 6 podría ser siempre que el color de fondo sea bien tenue y mantenga el contraste con los párrafos.

La clave está en encontrar el balance; en hallar el equilibrio entre buena experiencia de lectura y lo que nos gusta para nuestro blog.

Sí hay algunas cuestiones que dificultan la lectura hasta llegar a imposibilitarla; por ejemplo:

  • los fondos de los páginas webs con texturas, con imágenes (¡peor si son gif!) o ilustraciones;
  • las mezclas tipográficas sui generis y los textos rebosantes de colores;
  • todos los textos en cursiva o en mayúsculas, incluso los textos con cada letra inicial con mayúscula, y
  • los párrafos con diferentes alineaciones, entremezclados y sin jerarquizar, entre otros.

Una forma de conocer la tipografía en los blogs es usando la herramienta WhatFont. Este es un ejemplo hecho en Lenguaje CSS, que tiene una lebilidad tipográfica excelente.

 

No podemos contentar a todos nuestros lectores y tenemos que aguantárnoslo

Más de una vez me han preguntado qué fuente uso en esta página web. Cuál es la de los títulos y cuál la del cuerpo de las entradas, y a qué tamaño está.

Hace un par de años decidí usar Raleway para todos los textos del sitio. El tamaño ha ido variando y ahora está a 18 px, con una altura de línea de 25 px. (No confundir la altura de línea [line-height] con la altura de x).

El color de los textos no es negro total, sino casi negro: #151515; (puedes ver la composición en diferentes espacios de color aquí).

Hay personas a las que esta fuente, que tiene un peso (font-weight) de 500 en este blog le parece demasiado fina. Pero a la gran mayoría les parece adecuada y, por tanto, decidí dejarla así.

Vale aclarar que la plantilla base de Elegant Themes no venía con esta fuente por defecto sino con Nunito. La cambié yo cuando vi que algunos blogs con mucho tráfico la estaban usando y me gustaba como se leía.

Y también cambié más cuestiones tipográficas, espacios y colores, en los estilos CSS para que se vea como yo quiero.

Cuando un par de lectores cuestionaron la fuente de este blog hice una encuesta en Twitter. Un 80 % de quienes la respondieron dijeron que el blog se leía bien. Y entonces dejé la fuente con las características descritas.

No todos los gustos son similares ni todos los ojos ven lo mismo 😉 . Pero no te preocupes, que hay un par de soluciones a la vuelta de la esquina.

Ejemplo de cómo podría visualizarse este blog abusando de la palidez y cómo se ve ahora ahora en un ordenador.

 

En definitiva, no podemos contentar a todos los lectores. Sin embargo, sí podemos ofrecerles una alternativa para que nos lean a su gusto.

 

Ajustar la tipografía en los blogs como nos dé la gana

Podemos sortear problemas de visualización de tipografía en los blogs que nos agradan, pero nos cuesta leer, con aplicaciones de lectura.

Otra opción es aumentar la vista de la página web y adaptarla a la pantalla en la que leemos.

 

Aplicaciones de lectura para adaptar los textos a nuestro gusto

Hay varias aplicaciones de lectura que permiten ajustar la fuente de los artículos que leemos. Entre ellas, InstapaperEvernote, Raindrop, Tagpacker, y muchas otras. Yo uso Pocket.

Pocket me resulta muy práctica, sobre todo, porque guardo los artículos para leerlos en otro momento. Y puedo hacerlo tanto en el ordenador como en el móvil o la tableta.

Con Save to Pocket como complemento de Google Chrome o Firefox es muy fácil guardar artículos. Solo un clic en el icono y el contenido queda ya disponible en la aplicación.

También porque me permite esquivar la publicidad revoloteando a los costados de los textos y las ventanas emergentes. Además, su diseño es minimalista al extremo y me encanta.

En el ordenador, la aplicación solo da tres posibilidades de cambio de tipografía en los blogs y webs que se visualizan. ¡Pero son más que suficientes! (ver combinación de opciones). Pocket permite:

  • Alternar entre una fuente serif y una sans serif.
  • Reducir o aumentar el tamaño de la fuente.
  • Cambiar el tema entre claro, oscuro y sepia.

Con estas tres características los textos de los blogs pueden ajustarse a nuestros ojos y antojo.

Diferentes opciones de visualización tras hacer cambios en la fuente, el tamaño y el fondo de Pocket en el móvil de esta entrada.

 

También utilizo Feedly, aunque en este caso lo hago más para organizar los blogs que sigo que para leerlos. Entre otras funcionalidades, en el móvil, con esta aplicación se puede:

  • Cambiar entre fuentes sans serif en la versión gratuita y también con fuentes serif en la versión de pago; además de OpenDyslexic en sus dos planes.
  • Reducir o aumentar el tamaño de la fuente en cuatro escalas.
  • Cambiar el tema entre modo día y modo noche.

Si alguien que nos dice que nuestro blog no se lee bien podemos invitarle a descargar y usar algunas de estas aplicaciones. 😉

 

Cuestión de tamaño: usar Zoom para agrandar la tipografía de los blogs

El recurso que más a mano tenemos y el que yo primero uso es el de Zoom en Chrome. El mismo nombre recibe en Explorer y Tamaño en Firefox.

Se trata de agrandar lo que vemos en la pantalla apretando Control y haciendo girar la ruedecilla del ratón hacia adelante. También funciona con Ctrl y el signo +. Según el navegador que uses funcionará una u otra opción o más de una.

Es cierto que no modifica el tipo de fuente ni da la opción de cambiar el fondo. Pero si solo es una cuestión de tamaño es la alternativa más rápida. De hecho, siempre tengo la vista de este blog a 110 % en mi ordenador principal.

Tengo pendiente hacer una nueva revisión de este sitio, pero en la lista de prioridades hay otros temas que le ganan espacio…

Mientras, si quieres conocer más sobre legibilidad en blogs lee esta entrada de Silo Creativo y esta en Jimdo.

¿Estás pensando en trastear con el CSS de tu blog? Entonces, recomiendo que antes leas esta entrada y esta otra. No sea cosa que te cargues parte de tu web, como alguna vez he hecho yo con la mía… 😆

¿Qué fuente usas en tu blog? ¿Y qué tamaño tiene? ¿Qué otras aplicaciones usas para leer artículos?

    4 comentarios

  1. Muy útiles los consejos. Yo seguí el primero que me diste sobre las cursivas y hace poco lo recordé más cuando vi en un libro, varias páginas en cursiva que me dañaron un poco la vista.

    Ernesto Caceres

    6 junio, 2019

    • Gracias por tu comentario, Ernesto. Textos muy largos en cursiva se vuelven difíciles de leer, pero más aún si todo está en mayúsculas. Solo hay que ponerle a un documento estas características y corroborarlo. Saludos.

      Mariana Eguaras

      6 junio, 2019

  2. Cuando encuentro un texto en gris pálido sobre fondo blanco (o cualquier otra barbaridad) utilizo el inspector de estilo (en herramientas del desarrollador) para cambiarlo. En Firefox se abre con Ctrl+May+C; en Chrome Ctrl+May+I.

    F.

    11 junio, 2019

    • En cualquier navegador apretando la tecla F12 logras lo mismo. 😉 Gracias por comentar.

      Mariana Eguaras

      11 junio, 2019

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Te presentamos la primera tienda de plantillas y cubiertas prediseñadas de libros en castellano

Maquetatulibro.com

Clic aquí y VISITA NUESTRA TIENDA

You have Successfully Subscribed!