3 consejos tipográficos para ofrecer una lectura más fluida • Satya Estudio

3 consejos tipográficos para ofrecer una lectura más fluida

Hay 3 pequeños cambios que puedes hacer en el diseño de tu web para proporcionar una lectura más agradable y fluida a tus usuarios. Estos consejos también puedes aplicarlos también en documentos de texto o otros elementos impresos.

Ten en cuenta que cada fuente tipográfica es diferente por lo que si el contenido no se ajusta correctamente, no lo dudes y cambia los tamaños. Lo que realmente importa al final es que el lector se sienta cómodo y tenga una experiencia de lectura positiva.

 

tecnicas-tipografia-texto-web

 

1. Usa la jerarquía tipográfica para establecer la estructura de tu página

Piensa que tienes en tus manos un libro de texto. O mejor aún, coge uno si te pilla a mano. En él veras como el encabezamiento principal o título del capítulo es mas prominente que el encabezado secundario que es, a su vez, mayor que el texto del cuerpo de página (contenido principal de la página). Estos mismos principios debes establecerlos en tu web, diseños o documento de texto.

 

jerarquia-texto-diseno-web-marbella-ux

 

Debes tener en cuenta que todos los tamaños de fuente provienen del texto de cuerpo principal que es el que más se lee en cada página. Así pues te dejo algunos pasos sencillos para definir su jerarquía:

Cuerpo de Texto: Establécelo de modo que sea fácil y cómo de leer. Este que lees está a 17 px.

Cabecera principal: Te recomendaría que fuera entre el 180 y el 220% del cuerpo de texto; entre 42 y 48 px aproximadamente en el caso de este artículo

Cabecera secundaria o destacado: Puedes establecerlo entre el 140 y el 160% del cuerpo de texto, entre 30 y 35 px más o menos.

Pié de foto o Texto reducido: Lo suelo definir entre el 70 y el 80% del cuerpo de texto principal.

Con todo esto, el texto se vería tal que así:

 

texto-tipografia-diseno-web-responsive-torremolinos

 

2. Facilita la lectura ampliando el espaciado vertical entre líneas

Con el espaciado vertical debemos asegurarnos que el espaciado entre líneas y el espacio entre párrafos sea lo suficientemente generoso como para permitir que el ojo y el cerebro descifren con mayor facilidad caracteres, palabras y formas de palabras.

 

alineacion-vertical-diseno-tipografia-arquitectura-web

 

Definir el espaciado de los párrafos es simple, de hecho, en la mayoría de los casos, debe ser igual al texto del cuerpo, así que si el cuerpo de texto es de 17 px entonces el espaciado del párrafo es 17 px. Esto equivale a definir el margin-bottom de los párrafos a 17 px en nuestra hoja de estilos CSS. Atención con pulsar el botón de Intro dos veces, esto hará crear un espaciado mayor haciendo confundir al usuario en su lectura.

 

arquitectura-web-tipografia-texto-configuracion-ux-malaga

 

Por otro lado está el espaciado de línea, el cual debes de establecer entre el 120 y el 160% del tamaño del texto. Normalmente, cuanto más pequeño sea el texto se necesitará un espaciado de línea mayor para dar aire a cada palabra. El espaciado de línea se debe establecer en algún lugar entre 120-160% del tamaño del texto.
Un truco para ver si estamos haciéndolo bien es coloca una “x” entre las líneas sin que toque las partes superiores de las ascendentes (las letras d, b, t..) y las descendentes (p, q,..). Por ejemplo, este cuerpo de texto es de 17px y la altura de línea la hemos definido en 30 px (en CSS se define con la regla line-height)

 

fuentes-web-diseno-experiencia-usuario-tipografia

 

3. Ajusta la anchura de texto para hacerlo más cómodo de leer

La longitud de la línea de texto es algo que tenemos que cuidar bien si no queremos ahuyentar a los lectores de nuestra web. Las líneas largas son pesadas de leer (además de poco atractivas) por lo que acortando su longitud le haremos un favor al lector y a nuestro diseño). El número ideal de caracteres por línea está establecido entre 45 y 75 px como valor adecuado y esta debe definirse por la anchura del cuerpo de texto y no en base de encabezados o subtítulos.

 

fuente-diseno-jerarquia-web-experiencia-usuario-ux-malaga

 

Una vez que apliques estos consejos en tu trabajo, notarás como aumenta la legibilidad de tu contenido. La configuración tipográfica no es una habilidad fácil pero con estos consejos te hará más fácil trabajar con bloques de texto además de que lectores o clientes te lo agradecerán.

 

tecnicas-experiencia-usuario-tipografia-web

 

Esta lista, aunque breve, está creada con la intención de realizar pequeñas mejoras en los textos de tu web para proporcionar una mejor experiencia de usuario de forma fácil y rápida.
Si tienes alguna pregunta, comentario o sugerencia, déjala en los comentarios aquí abajo 😉

2 comentarios en “3 consejos tipográficos para ofrecer una lectura más fluida

Deja un comentario

Tu dirección de correo electrónico no será publicada.

  He leido y acepto la política de privacidad

Según lo dispuesto en el Reglamento Europeo en materia de Protección de Datos, te informo que los datos de carácter personal que has proporcionado son gestionados por el responsable Jose A. Barrera Moreno tras haberme facilitado/cedido sus datos de manera voluntaria mediante un correo electrónico tras su suscripción. La finalidad de este fichero es moderar los mensajes. El usuario tiene derecho de acceso, rectificación, limitación o suprimir los datos enviando un correo electrónico a info@satyaestudio.com desde la dirección que usó para el alta así como realizar una reclamación a la autoridad de control.