La tipografía de los blogs, letras para leer mejor.

La tipografía de los blogs, letras para leer mejor.

Como hacer que los lectores se sientan cómodos en mi blog.

Uno de los objetivos cuándo escribimos un blog es que los visitantes estén a gusto, lean, comenten y pasen mucho tiempo en nuestro blog. Parece fácil pero es una labor muy complicada y si queremos que se enganchen a leer un post tras otro… mas todavía!

Para ello debemos tener en cuenta bastantes aspectos a parte de el contenido (en realidad es lo mas importante) que ya lo hemos tocado en otros post como estos:

Hace tiempo leí un artículo en Medium (una plataforma de blogging de Twitter) en el cuál hablaban sobre cómo habían llegado a el diseño actual que tienen, el artículo es este https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 en realidad es excesivamente técnico, pero de él lo mas valioso que extraje fue el concepto de lograr claridad y legibilidad para poder atraer a un público lector.

Si, tenemos que tener claro que debemos atraer a un público que le gusta leer, si queremos que pase bastante tiempo en página sin recurrir a videos, por tanto debemos tener claras unas normas mínimas de usabilidad.

Parece una tontería pero yo soy la primera que he dejado de visitar blogs porque se han convertido en un auténtico barullo, de interrupciones, ruidos, animaciones y ante todo letra pequeña… por ello lo mejor es valorar lo que vas a conseguir gracias a esos elementos y si en verdad merece la pena mantenerlos o no en el blog.

La usabilidad es una especialización muy amplia, no quiero volver loco a nadie, bastante friki soy yo con esas cosas, así que al menos os voy a recomendar varias cosas para que vuestros blogs sea mas cómodos para los visitantes y quiero empezar por la tipografía de los blogs para empezar con buena letra.

Legibilidad:

Cuando hablo de legibilidad, me refiero a que sea una letra fácil de leer, cómoda para la visión y fácil de reconocer al leer. Es la primera lucha a la hora de hacer un blog (yo me dedico a ello), Hay personas que aparecen con una tipografía que les gusta y la proponen por que es “muy original”…. normalmente suele estar en el extremo opuesto a legible.

Debemos pensar que leer en el ordenador con la retro iluminación de la pantalla se hace mas pesado para nuestra visión y para la atención del doble, por tanto una letra que sea complicada de leer es un punto en contra.

Cuando una letra es difícil de leer y no es cómoda para el lector, es fácil que abandone un artículo si ha llegado a el por azar:

• Cuándo es muy pequeña.

• Cuándo es muy ornamentada.

• Cuando está excesivamente deformada a lo ancho o largo.

• La letra a mano alzada Handwritting.

• Espaciados extraños entre letras o alturas desiguales.

Cómo elegir una buena letra:

Este es el consejo mas viejo del mundo para saber si una tipografía es muy legible pero creo que el que mejor funciona:

Escribe una frase larga con varios caracteres y tapa la mitad inferior de las letras, intenta leer la frase en voz alta y pide a alguien que la lea, si no eres capaz cambia de letra porque el cerebro no reconoce esa tipografía correctamente por lo que exige mas esfuerzo del necesario.

El siguiente ejemplo es con una tipografía muy común Times New Roman

Estas normas pueden aplicarse a cualquier tipo de texto pero en especial a el texto de los párrafos (cuerpo de texto), en los encabezados puede ser otro tipo de texto mas llamativo, de colores… todo lo que quieras, pero el cuerpo de texto debe de ser mas discreto para no parecer muy pesado.

Cuida los títulos, además hay blogs en los que no existen cabeceras por lo que ese lugar bien lo puede ocupar una tipografía bonita.

El tamaño si importa!

La letra debe ser de un tamaño suficiente para que una persona pueda leer a 80cm de la pantalla, por lo que mas vale pasarse de tamaño respecto al tamaño.

Una recomendación es que sea vea en un tamaño adecuado en los teléfonos móviles sea fácil de leer y ten en cuenta que los botones muchas veces dependen del cuerpo de letra para tener un tamaño u otro… así que aumentando un poco la tipografía puedes mejorar la usabilidad de tu web bastante, ya que muchos problemas de UI son por culpa de el tamaño inadecuado de los botones o los links.

En el caso de comercio no pueden ser inferiores a 11pt.

El tamaño es muy importante, y el peso de la fuente! para dar importancia al contenido de tu blog, también relevancia y es bueno para el SEO establecer los enunciados: h1, h2, h3…

Fondos y colores de fondo:

Hay que tener en cuenta que el cerebro es muy listo y se acomoda a lo que conoce, en el tema de escritura al papel blanco sobre negro, no al revés, podemos pedir un pequeño esfuerzo si colocamos un texto sobre una imagen y está destacado o es breve pero para usar una imagen como fondo debemos tener en cuenta la legibilidad del contenido.

Imágenes tipo mosaico, chillonas que se comen literalmente el texto: Cuidado con los fondos de los blogs… mas vale que quede soso a demasiado cargado.

Fondo oscuro y texto claro: cansan mucho mas la vista que al revés, si lo puedes evitar…

Colores de texto chillones, ay mis ojitos!.

Ante la duda fondo blanco o gris claro con ese fondo todo lo que pongas encima resaltará, no te compliques la vida haciendo fondos super raros, porque en algunos post parecerá mas un captcha.

Google fonts para cambiar la letra:

Es una librería estupenda de fuentes, algunas muy conocidas y de uso libre, lo que es muy importante porque una de las cosas mas caras de multar y mas fáciles de detectar es una tipografía robada.

Para wordpress existen varios plugins como Easy Google Fonts para añadir y customizar el tamaño y la tipografía de tu blog. También te digo que hacen mas pesada la carga de la página.

En blogger hay que hacerlo de otra manera pero en este post os lo explico paso a paso:

Cómo añadir una fuente de google fonts a mi blog de blogger.

Cosas de tipografía que ya no se ven por el mundo ( o no se debería XD ):

Texto que se escribe solo… esa era mi mayor pesadilla entrar a una web y esperar mientras hacía de que escribía… Dame paciencia!!

Comic sans.

Sombras en los textos.

Subrayados todos los links… Y en azul cobalto.

Letra enana blanca sobre fondo oscuro …