Cómo maquetar los textos de nuestra web para que sean usables

Maquetacion textos en una web

La Usabilidad es uno de los elementos que más debemos de cuidar cuando creamos un sitio web. La usuabilidad es dar al usuario una cómoda experiencia al navegar sobre nuestras páginas. Si el usuario navega fácilmente por nuestra web encontrará la información más rápido y en consecuencia convertirá mejor. Maquetar los textos de nuestra web es un gran aliado en esta fase.

Vigilando la usabilidad de nuestro sitio web

Para tener una óptima usabilidad es necesario cuidar ciertos elementos como son:

  • Velocidad de carga de la Web
  • Diseño amigable a los dispositivos móviles
  • Una arquitectura del sitio y de contenidos muy intuitiva
  • Legibilidad de los textos



En este artículo nos centraremos en la legibilidad de los textos o maquetar los textos de nuestra web. Cómo hacer que los textos insertados en la web sean cómodos de leer. A veces ponemos las cosas difíciles para que los usuarios puedan leer los contenidos. Tenemos recordar que no tenemos vendedores en la web, el mejor vendedor son los textos persuasivos que tenemos.

Lo primero a tener en cuenta ¿Cómo leen los usuarios las páginas webs?

Leer una página web no es lo mismo que leer en papel (leer una revista o un periódico). El usuario tiene otra forma de leer cuando está delante de la pantalla de un ordenador, tablet y teléfono móvil. Los usuarios solemos escanear los textos o leerlos muy rápidos. Por ello hay adaptar la maquetacion de los textos a la lectura de pantallas y no al patrón del papel.

Checklist para maquetar los textos de nuestra web

Tipografía

El tamaño de la letra es importante. Ahora al tener un 50% de visitas por el móvil, el tamaño de la letra debe ser más grande. Debemos evitar que los usuarios tengan que hacer zoom para ver cómodamente un texto. Se recomienda un tamaño de letras a partir de 14 px. Para los títulos y subtítulos se recomienda un mayor tamaño.

El color del texto debe tener un gran contraste con el color de fondo. Si la página web es de fondo blanco pues el mejor color que texto que le va es el negro. Si el color de fondo de la web es negra, el mejor color de texto es blanco o, gris claro.

No usar varias tipografias en un mismo párrafo. Queda mal estéticamente y no provoca leer el texto. Recomendar usar una solo tipografía y alternar con otra tipografía solo en el caso de usar títulos o subtítulos. Más de eso no.

Los enlaces en formato texto deben ir destacados. La fórmula segura es poner en subrayado y azul los textos que representan enlaces. Hay muchas páginas que los ponen en el color de su paleta y subrayados. Eso también sirve. Los usuarios al ver un texto subrayado en pantalla asumimos que es un enlace en la web.

 

maquetar los textos de nuestra web enlaces



Según algunos expertos este tipo de fuente suele tener buena legibilidad: Open Sans, Roboto, Verdana, Calibri y Helvetica. Son recomendaciones. Dependerá del proyecto web, la línea de comunicación, ver que tipografía combina mejor con la marca con la que trabajamos.

Usar la negrita. El texto en formato negrita  se usa para destacar una palabra o una frase en un párrafo. No se debe usar para destacar todo un párrafo. La idea de la negrita es llamar la atención en palabras y frases. Si destacamos mucho al final no destacamos nada.

 

Maquetar los textos de nuestra web: Maquetación de los Párrafos

Número de líneas por párrafo: Se recomienda que los párrafos no tengan más de 5 o 6 líneas. Es bueno cortarlos con punto y aparte y dejar un poco más de espacio entre párrafos. De esta forma hacemos más legibles los textos.

maquetacion ancho párrafo

Ojo con el interlineado. El interlineado es el tamaño vertical que hay entre 2 líneas. Se recomienda que dicho tamaño sea ligeramente superior al tamaño de la letra utilizado. Por ejemplo si estoy usando un tamaño de letra de 16 pixeles, se recomienda que el interlineado sea 18.

Las líneas horizontales de los párrafos no deberían tener más de 20-25 palabras. Al aumentar el tamaño de la letra disminuye el número de palabras utilizado. Eso hace más cómoda la lectura

Usar listados. Si vas a enumerar algo, lo mejor es usar los listados separados por viñetas. Son muy cómodos de leer en la pantalla.

maquetacion listados textos web

Alineación del texto. Según los expertos un texto en una web es más cómodo de leer si está alineado hacia la izquierda. No se recomienda usar el texto justificado que muchas veces usamos en la creación de documentos en papel. Si el texto es un título se está poniendo de moda usar la alineación al centro.

No usar frases largas o párrafos en Mayúscula Sostenida. Según los expertos el PONER UN TEXTO EN MAYúSCULA SOSTENIDA ES SINÓNIMO A QUE TE GRITEN. A los usuarios no le gustan que les griten. Puedes usar la mayúscula sostenida para destacar una palabra o una frase muy corta. Por ejemplo: ¡GRATIS! , ¡INSCRÍBETE!, ¡COMPRA AHORA!, ENVÍO 24H, etc.

Bueno es todo. Espero que te haya sido útil estos buenos consejos de cómo maquetar los textos en tu página. Una web no solo es un diseño atractivo, es mostrar la información de una forma usable.

2 comments

  1. Mercedes González

    on

    Reply

    muy útil e informativo, gracias

    • LuisJPalao

      on

      Reply

      Gracias por tu comentario Mercedes ?

Dejar un comentario

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

SUSCRÍBETE A NUESTRO NEWSLETTER:

MANTENTE INFORMADO DE LOS NUEVOS MASTERS, TUTORIALES MUY ÚTILES Y ENTREVISTAS A INFLUENCERS DEL SECTOR

He leído y acepto la política de privacidad

Coco School, la Escuela Europea para la Comunicación en Diseño y Artes Visuales S.L. como responsable del tratamiento y legitimado por su consentimiento tratará sus datos con la finalidad de gestionar la resolución de consultas, informarle de nuestras publicaciones, promociones de productos y/o servicios, becas, eventos y recursos exclusivos. No cedemos la información a terceros salvo por imperativo legal. Tiene derecho a acceder, rectificar, oponerse y suprimir los datos, así como otros derechos, como se detalla en la segunda capa de información. Puede consultar información adicional y más detallada acerca de Política de Privacidad y Protección de sus datos personales.