La tipografía de los blogs, letras para leer mejor.
La tipografía de los blogs, letras para leer mejor.
Uno de los objetivos cuándo escribimos un blog es que los visitantes pasen mucho tiempo en nuestro blog, lean, comenten y vuelvan, por ello debes cuidar estos detalles para que eso ocurra.
Haz que tus lectores se sientan mucho mas cómodos en tu 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!
Hay pequeños detalles que hay que ir cuidando poco a poco para que los lectores «no sientan pereza» a la hora de leer un artículo, aunque influyen muchos factores como el color de fondo, el color del texto, lo que atañe a la tipografía o fuente es lo que mas afecta a la comodidad.
Para ello debes tener en cuenta la legibilidad para elegir la fuente correcta que se acomode a tu contenido, aunque lo mas importante es el contenido hay gran diferencia en como presentarlo.
Si tienes una fuente que quieres cambiar hazlo
Cambiar la fuente a no ser de que seas una gran marca con una estructura potente de imagen corporativa no te debe dar lástima, si esa fuente no crees que se lee mal, no encaja con tu blog o ha pasado de moda cámbiala, es una de las cosas más baratas y fáciles que puedes cambiar con unos clics.
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:
Medium’s CSS is actually pretty f***ing good
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.
Conseguir un público similar al que lee libros y que puede mantener la atención mas de 4 minutos en un artículo es un goal que debemos perseguir.
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 vídeos, por tanto debemos tener claras unas normas mínimas de usabilidad y de estética para mejorar la legibilidad.
Una tipografía adecuada puede aumentar el tiempo en página de tus lectores, disminuyendo el cansancio visual y aumentando la concentración.
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 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 para empezar con buena letra he elegido hablar de la tipografía, del tipo, de las fuentes, de las letras….
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, 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 que sobre papel para nuestra vista, para la atención resulta el doble de cansado, por tanto tener un tipo de letra que sea complicada de leer es un punto en contra.
Cuando una letra es difícil de leer el lector aumenta el abandono, podemos reconocer que la letra de nuestro blog es poco legible fácilmente:
- Cuándo es muy pequeña.
- Cuándo está 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.
- Cuándo no está optimizada para pantallas y no es nítida.
- Por los comentarios!
Cómo elegir una buena letra:
Este es el consejo mas viejo del mundo para saber si una tipografía es 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, evidentemente no es muy legible.
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.
La usabilidad y la legibilidad van de la mano
En este caso tienen mucho que ver ya que hay elementos que hacen que la letra se convierta en poco amigable, esto afecta a la usabilidad de tu web.
Por ejemplo el mal uso de paddings puede hacer que tengas problemas de clicabilidad por tener elementos pegados o a ojos de Google superpuestos.
Hay muchos valores que se pueden modificar de una fuente como es el Kerning y el espaciado, cuidado porque a veces no queda bien en la web y en muchos casos sólo sirve para retrasar la carga de la página.
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 con dibujos que se confunden con el texto!!… 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!, además cuándo tienes colores subidos te van a condicionar mucho a la hora de elegir imágenes y en la maquetación, un toque chillón no va mal pero al 10%.
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.
Busca una fuente con personalidad o no mucha.
A la hora de elegir una tipografía para el cuerpo de texto no hace falta que te pases de original, puedes elegir una normal que se pueda leer perfectamente y elegir otra de contraste para títulos.
Aquí entramos en el momento diseño, si condicionas tu blog por el estilo de una fuente estás tomando una decisión muy arriesgada, si eliges una fuente muy «personal» puede que tenga mala convivencia con otros elementos.
No te creas que en diseño las mezclas funcionan bien siempre, por lo que ante la duda elige la mas sencilla, la que transmita lo que quieres: profesionalidad, limpieza, claridad, cercanía, simpatía, infantilidad… eso lo puedes hacer con la tipografía sin recurrir a letras muy extrañas.
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 están pasadas de moda y evitan que se lea bien un texto:
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 y similares, pasan de moda y dan imagen de desorden
- Sombras en los textos, en algunos tamaños y dispositivos emborronan y lo hacen ilegible
- Texto subrayados sin motivo, usa otro encabezado, pero en web subrayar crea false affordance, la falsa impresión de que el texto es clicable y es un fallo de usabilidad bastante grande.
- Links no resaltados o dejados por defecto en el azul cobalto web
- Letra pequeña blanca sobre fondo oscuro u otros fuertes…
- Doble espacio en los post o dejar interlineados enormes que hacen que necesites tomar aire de renglón a renglón.
Verás que para que una letra se lea bien necesitas echarle un rato, hay herramientas y visualizadores que te pueden ayudar, en caso de que lo veas muy complicado ve a los seguro, pero ver que se lee bien tu blog es muy importante.
El tipo de letra es algo muy personal como los colores por eso te recomiendo que tomes esta decisión de forma muy relajada, haz pruebas escribiendo textos y pregunta en los comentarios.
Rodrigo
16/04/2016 @ 12:00 am
¡Hola Carmen! Buenas tardes. Fíjate que el día de hoy estaba buscando precisamente un buen artículo que me explicara qué letra es más adecuada para ingresar a mi blog y es que apenas estoy empezando en esto del blogging, pero parece ser que es de lo más fácil. No me mal interpretes. Es tan fácil que nosotros mismos lo complicamos. Por ejemplo, todo es más fácil cuando nos ponemos en el lugar del usuario y sabemos que hay que hacer para darle la famosa «buena experiencia del usuario.» Sin embargo mi duda para ti es: ¿cuál es la tipografía que recomiendas? Ya que no la logré leer en tu artículo. Mil gracias.
Carmen Ferreira
16/04/2016 @ 12:44 am
Hola Rodrigo, recomiendo poco la verdad porque soy una enamorada de las fuentes, una de mis favoritas Están:
Lato, open sans, Proxima nova, source pro, calibri, Cera, Montserrat, entre las san serif, helvética, signo,raleway…
Theano Didot, Lora, Revista, Bodoni, Times, Iris UPC, entre las miles de serif.
Fuentes Script: Sacramento, Amelia,
Mono: Courrier new, Anonymous pro.
Decorativas: Brixton, Oswald, Lobster, Amatic,
Muy pesadas: Azo sans Uber, Fat Frank, Rubik mono, Bookmania, Adelle,
Estas son entre muchas y algunas que «están de moda» mis favoritas respetando el criterio de la legibilidad que es muy importante y para web, algunas de estas son mas para web que para blog porque leer un artículo entero en Oswald no creo que haya nadie que lo aguante! jajaja.
Gracias me has dado una idea muy buen para un post!
Rodrigo G
22/04/2016 @ 6:37 am
Oye!! Me encantó tu lista!
Muchísimas gracias. Voy a buscar una por una de las tipografías, pero en verdad muchas gracias por tomarte el tiempo de responder con tanto detalle. Apenas pude responder. 🙂
Sigo en espera de más posts! 🙂
Carmen Ferreira
22/04/2016 @ 11:30 pm
Si esperas unos días, estoy haciendo un post muy extenso sobre las tipografías básicas que mas me gustan con sus enlaces.
Gracias por la idea para el próximo post!
Jaime
30/01/2019 @ 11:15 pm
Hola Carmen me encanta la tipografía de tu blog. Me podrías decir cuál es para ponerla en el mío?
Carmen Ferreira
30/01/2019 @ 11:20 pm
Hola Jaime, lleva varias las más destacadas son Roboto y Poppins.
Saludos!