Maquetando textos digitales. Nociones básicas (I)

¿Qué hace que una página sea agradable a la lectura o no? ¿Qué hace que nos cansemos tan rápido de una web?

Muchos factores influyen en la legibilidad de un sitio web. El principal sin lugar a dudas es la maquetación del texto. Este post no pretende ser una clase magistral de maquetación de textos, si no solo una pequeña guia para diseñadores que están comenzando o para cualquiera que vaya a maquetar un texto (un trabajo para clase, un informe en el trabajo, etc.) Os aseguro que un texto bien presentado son muchos puntos a vuestro favor.

Empezaremos con lo más basico. Tamaño de letra, interlineado, el espacio entre palabras, alineamiento y colores. Ilustraremos todo con ejemplos para una mejor comprensión.

Tamaños de letra

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

El primer texto es en exceso pequeño como podemos ver claramente y requiere un esfuerzo por nuestra parte, no es agradable su lectura. En el último texto el tamaño es en exceso grande. La primera impresión es que estamos ante un título y la lectura es complicada porque dificulta la comprensión general del parrafo.

Interlineado

El interlineado es la espacio que separa dos lineas consecutivas. Veamos unos ejemplos:

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Cuando maquetemos una web el parametro del alto de linea se controla con la etiqueta "line-height" y se suele medir en porcentajes, en el primer caso tenemos un line-height del 60% y el último un line-height del 200%. En el caso correcto hemos ultizado un line-height del 110%. En textos en la web es más comodo para el lector un interlineado un poco mayor que en los textos impresos.

Espacio entre palabras

En muchos de los programas de edición de textos (como "word") el espacio entre palabras o "word-spacing" se determina automaticamente en función de la justificación del parrafo.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Este ejemplo es sumamente gráfico.

En el próximo capitulo veremos la justificación y el uso de los colores.

Presentación oficial de DisenioN

Blog de Diseño. Esa es la mejor descripción que podemos hacer de esta aventura que comienza hoy. Vamos a hablar de diseño gráfico y de diseño web, y menor medidas de otras formas de arte digital: Ilustración, 3D, video-arte, etc.

Para abrir boca nada mejor que mi portfolio on-line de Diseño Gráfico y Diseño Web en el que podreis una selección de mis trabajos, aunque iré subiendo por aquí algunas cosas más.

Bueno esto es solo el comienzo, cada día habrá un poco más.