17 Oct
imagen de una máquina de escribir y un ordenador para la composición de texto en diseño web

Trucos infalibles para componer textos

Diana Hidalgo Marín
Hago, enseño y aprendo diseño.

El propósito de todo diseño gráfico y diseño web es comunicar un mensaje a través de la composición de textos e imágenes.

Las imágenes proporcionan el impacto visual necesario para enfatizar el mensaje, complementándolo o incluso transmitiendo aquello que a través de los textos no sería posible.

En los orígenes del diseño gráfico, esa comunicación se realizaba eminentemente a través de textos acompañados por imágenes que ilustraban –iluminaban– una misma idea. Es por ello que, incluso a día de hoy, el medio de transmisión de ideas por excelencia es la palabra escrita.

Si además tenemos en cuenta que, del mismo modo en que las imágenes transmiten ideas por sí solas, cada letra (o cada glifo, mejor dicho) es un gráfico en sí mismo y según su estilo y cómo se relacione con el resto transmitirá un mensaje u otro más allá del sentido semántico de lo escrito, se deduce que una composición de texto debe cuidar tanto el contenido como la forma, en pos de comunicar la idea adecuada.

Hoy os quiero animar a afinar las ideas que necesitéis transmitir a través de textos en vuestra página web o tienda online, o incluso en las presentaciones o documentos word de vuestro día a día, sin necesidad de convertirse en un experto en la ciencia de la tipografía 😉.

Respetando unas sencillas normas de composición tipográfica veréis cómo vuestros escritos transmiten mucho mejor el mensaje.

¿Qué tipografía utilizar?

Utilizar siempre la tipografía que indique el manual de identidad de tu empresa. El tipo de letra que emplea una marca en sus documentos y mensajes es una parte imprescindible de su unidad visual. Una tipografía normalizada y jerarquizada aporta homogeneidad y armonía a todos los soportes, contribuye al reconocimiento y demuestra profesionalidad.

Ojo, no nos referimos a la propia del logotipo ni a la principal (para copies, claims, etc.) nos referimos, siempre que esté contemplada en el manual, a la tipografía «secundaria», que es la que está pensada para dar forma al contenido de bloques más o menos extensos o de texto «corrido». Si no se dispone de un manual de identidad o sí pero no figura una tipografía para tal efecto, se debería sopesar la posibilidad de contratar los servicios de una agencia.

El tipo de letra que emplea una marca en sus documentos y mensajes es una parte imprescindible de su unidad visual

Pero mientras tanto, podrías decidirte por una (o dos, ¡no más!). Lo primero es distinguir entre tipografías serif y sans-serif (sin serifa). Veamos un gráfico:

Gráfico que explica la diferencia entre serif y sans serif para la composición de texto en diseño web

Básicamente, para entendernos, se trata de distinguir si las letras tienen un remate en su grafía o si no lo tienen. Aquellas con remate son las que se dice que tienen serifa (del francés serif, que significa «gracia») y aquellas otras que no presentan ningún adorno (o patín en Hispanoamérica), son las conocidas como sans-serif («sin gracia», sin serifa, también conocida como «de palo seco»).

Serif o sans-serif, ¿cuál debería elegir?

Cualquiera de las dos es válida. No existe un tipo mejor que otro. Simplemente es conveniente conocer algunas condiciones para poder escoger en consecuencia:

    • Las tipografías con serifa gozan de una mejor legibilidad, frente a las sin serifa, dado que para el ojo humano resulta más cómodo hilar unas letras con otras gracias a dichos remates y permite reconocer más rápida y fácilmente las palabras. Es por ello que la mayoría de libros, si os fijáis, utilizan tipografías con serifa. No por ello queremos decir que sea mejor utilizar una serif siempre. Pero está bien tenerlo en cuenta para tomar una decisión con sentido (por ejemplo: si la composición tiene muuucho texto y nada más, habría que sopesar la posibilidad de utilizar una tipografía con serifa).
    • Hay quien piensa que las tipografías con serifa son «antiguas» y por contra, que las sans-serif son más actuales. Las tipografías sin serifa son más recientes en el tiempo que las serifa, pero ello no quiere decir que sean modernas. Las primeras tipografías de palo seco son, lejos de ser modernas, del siglo XVIII. Y, por poner un ejemplo emblemático, la Helvética –tipografía de palo seco por excelencia–, que tiene más de sesenta años de historia, ya no es tan moderna, sino más bien un clásico. Las casas de fundición siguen trabajando día a día en adaptaciones y nuevas tipografías de ambos tipos, por lo que existen tipografías tanto con como sin serifa preparadas para ser visualizadas en pantalla e igualmente actuales. Lo importante es poder decidir sin prejuicios.
    • Para simplificar, se recomienda escoger dos tipografías (no más, para no abigarrar poniendo en riesgo la unidad de la marca por un lado y la legibilidad del texto, por otro). Una para titulares o destacados y otra para el grueso del texto, los párrafos, vamos. Es importante que estas dos tipografías contrasten, que sean perfectamente diferenciables entre sí. Incluso una podría ser con serifa y otra sin (¡a lo loco! 😜).

Ejemplo que muestra una combinación de texto en diseño web de una sans-serif y una serif

    • Nunca estirar o deformar el texto con la intención de encajarlo en algún sitio haciéndolo más ancho, o más bajito o lo que sea. Las tipografías están diseñadas para funcionar tal y como se muestran por defecto y no debemos modificarlo.

Ejemplo de texto deformado.

Longitud de línea: ¿Cómo de ancho tiene que ser un párrafo?

Hacer que los párrafos no sean de más de 65–80 caracteres de ancho. Por norma, resulta mucho más tedioso leer una línea de 155 que de 75. Además un párrafo compuesto de líneas demasiado largas generará un mancha (caja tipográfica o «mancheta») con una desproporción en la relación de alto y ancho (muy ancha y demasiado bajita) poco o nada atractiva para el conjunto de la composición.

Pensad de nuevo en los libros, aunque sean un medio distinto al digital, tienen mucho que enseñarnos, pues las leyes de la legibilidad aplican a cualquier medio, incluido el espacio horizontal –y retroiluminado– de una pantalla.

Seguramente no encontraréis ningún libro con párrafos tan desastrosamente largos como los que se encuentran en determinadas webs. Los libros son como son por algo; han depurado la experiencia del lector hasta nuestros días, en tamaño, peso, materiales, colores y también en la composición tipográfica mucho más de lo que hayamos podido hacer con la experiencia de usuario en medios digitales hoy en día.

Para párrafos aislados, artículos de poca extensión o formatos parecidos a la prensa tradicional como revistas o periódicos, podemos usar un ancho de columna algo más estrecho, de entre unos 45–60 caracteres. Eso sí, un ancho de columna de menos de 45 caracteres sería inviable.

Ejemplos de ancho de columna en nº de caracteres para la composición de textos para tu diseño web

Cuida el interlineado en la composición de los textos

El espacio entre líneas es determinante para una lectura cómoda. Si quieres que tus usuarios lean lo que tienes que contarles, tienes que cuidar este aspecto también. Por lo general, el interlineado que utilizan por defecto los procesadores de texto y el resto de aplicaciones a las que estamos acostumbrados es escaso. Hay que modificarlo deliberadamente.

El interlineado variará en función del tamaño del texto, en una relación inversamente proporcional. A menor tamaño, mayor interlineado y a mayor tamaño, menor interlineado. Es decir, si se trata de un texto muy grande (por ejemplo, un título o un destacado) podremos permitirnos hacer el alto de línea un poco más pequeño de lo normal. Sin embargo, un texto corrido o párrafo de tamaño medio-bajo deberá tener mayor interlineado.

Yo recomiendo probar con valores entre los 1.3 y 1.7 puntos de interlineado (más que nada porque el valor que queda bien en una tipografía concreta quizá no funcione en otra). Esto significa que si tenemos una fuente a tamaño 12, podremos ponerle un interlineado de entre el 130% y 170% (es decir, en este caso, de entre 15 y 20 aproximadamente). Un interlineado bastante utilizado es el 1.618, que es la proporción áurea y representa un valor seguro. Con estos valores te aseguras de que el texto quede equilibrado con respecto al espacio entre líneas y sea armonioso y fácil de leer.

Ejemplos de distintos interlineados

Alineación y justificación

Lo adecuado para un entorno web, donde el layout es líquido, responsive y debe adaptarse a un sinfín de anchos de pantalla (y a formatos tanto horizontales como verticales), es no forzar la justificación de los textos, dejándolos alineados a la izquierda.

Se considera la alineación más natural, ya que no distorsiona los espacios entre palabras ni el ritmo de las líneas. Además, en contra de lo que se suele pensar, gracias a que cada línea muestra una longitud distinta, la legibilidad será mucho más cómoda (siendo más fácil encontrar la siguiente línea en orden de lectura) y el diseño, en cuanto a estética se refiere, gozará de mayor dinamismo.

En composiciones donde el espacio hábil no varía de tamaño y el layout es fijo, como un powerpoint, un PDF o soportes tradicionales como el papel, se puede forzar la justificación del texto siempre que el párrafo sea lo suficientemente ancho como para no generar ríos (o calles) insalvables. Este tipo de justificación obliga a retocar manualmente, allá donde sea necesario, los espacios excesivos entre palabras. Es la única manera de asegurarse de que quedará bien.

Sin embargo, en web, dadas sus peculiaridades, no se debe utilizar ese tipo de justificación forzada, dado que no se puede controlar ni el ancho ni el salto de línea ni tampoco el espacio entre palabras para cada una de las infinitas posibilidades de visualización (según tamaño y orientación del dispositivo).

Ejemplo de justificado forzado y alineado a la izquierda

¿Cómo deben ser los márgenes de una composición de texto en web y otros medios digitales?

Respeta al menos un 40% de espacio en blanco (espacio sin texto, vaya). No llenes la diapositiva, la hoja, la pantalla o el soporte que sea con texto. La mancha de texto no debe ocupar más de un 60% de la superficie total disponible. Puede parecer desproporcionado cuando estás acostumbrado a no prestarle atención a estos menesteres, pero te aseguro que hará las delicias de cualquier presentación de palabra escrita.

Los espacios en blanco o espacios negativos son un aspecto esencial en la composición. Si se usan adecuadamente pueden optimizar la experiencia de usuario y la claridad con la que el público capta tu mensaje.

Teniendo estos fundamentos en mente tus textos mejorarán sensiblemente en composición y presencia, y además serán mucho mejor recibidos por el público.

Ahora que ya sabes la importancia de la composición de textos en el diseño web de tu página o tienda online tendrás que revisar tu web y aplicar todos estos tips. Si prefieres que nosotros echemos un vistazo a tu web y te ayudemos, como ya hemos comentado, en estos «menesteres», no dudes en ponerte en contacto con nosotros.

¿A ti cómo te gustan más los textos, «con gracia» o «de palo seco»?

🙋🏻‍♂️Espera, seguro que te interesa: «La importancia de seguir un proceso de diseño web»