Por qué no se justifican los textos en web

Me gusta pensar que has llegado hasta aquí porque la persona que está diseñando tu web te ha pasado este enlace después de que tú le solicitaras con vehemencia que justifique los textos.

Quiere que yo te convenza para no tener que cometer tal atrocidad, tal crimen contra la humanidad, ¡semejante ofensa al internauta!

Tanto si es tu caso como si no, es un honor para mí explicar aquí por qué es tan mala idea justificar los textos en web.

Justificar los textos quiere decir alinearlos a los márgenes izquierdo y derecho a la vez. ¿Por qué no debemos hacerlo en web?

La respuesta más corta es que no se justifican los textos porque no es accesible.

Vamos a verlo profundamente, así que te dejo por aquí un índice del artículo para que no te pierdas:

• Qué ocurre cuando justificamos los textos
• Ríos de blanco
• Partir palabras con guiones
• Conclusión
• ¿Y la alineación centrada?
• Espera, espera… ¿y por qué en los libros sí se pueden justificar los textos?
• Aprecia la belleza de los textos sin justificar

Qué ocurre cuando justificamos los textos

Si justificamos los textos, se forman espacios irregulares entre palabras que dificultan la lectura. Veamos un ejemplo. La siguiente imagen es una captura de un fragmento del Manifiesto Schooler, con la alineación justificada.

Pido disculpas por los daños causados con este ejemplo. Lo hago exclusivamente con fines didácticos, ruego comprensión.

Ahora fíjate en la captura observando los espacios que se forman entre cada palabra. Observa que, en cada línea, estos espacios tienen un tamaño diferente.

Esto ocurre porque para poder justificar los textos, es decir, para conseguir que todas las líneas lleguen hasta el margen derecho, el navegador calcula el espacio necesario y lo reparte entre todos los espacios que hay entre las palabras que forman cada línea.

Como cada línea tiene un número de palabras distinto y esas palabras tienen un número de letras distinto, los espacios en blanco son de diferente tamaño.

Aunque no nos demos cuenta, cuando leemos utilizamos los espacios entre palabras para hacer una pausa. Cuanto mayor es el espacio entre palabras, mayor pausa hacemos cuando las leemos.

Los espacios en blanco entre palabras nos sirven también para distinguir dónde termina una palabra y empieza la siguiente.

Las líneas que tienen espacios más pequeños entre palabras las leemos con menos pausa que las líneas que tienen espacios más grandes.

Si observamos la captura (con perdón), vemos que la primera línea tiene espacios más grandes que la segunda:

La cuarta línea tiene unos espacios enormes, lo que también dificulta la lectura, con pausas muy grandes entre palabras. Esta línea la leemos a trompicones:

Este cambio en la velocidad de la lectura de una línea a otra, además, hace que la lectura sea muy incómoda.

Ahora pasamos al siguiente nivel de tortura visual. Vamos a ver cómo queda este texto justificado en un dispositivo móvil. Perdón, perdón. 🙏

Oh, My Goodness! ¡Vean esos huecazos!

¡Así no hay quien lea nada!

Con un ancho menor de columna, los espacios son mucho más diferentes de una línea a otra. Si ya era grave cuando lo vemos en escritorio, cuando lo vemos en un móvil es… ¡horrible!

Si justificamos un párrafo, en un móvil va a ser muchísimo más difícil de leer que en escritorio o tablet.

Las líneas que más sufren son las que tienen las palabras con mayor número de caracteres.

Esto es así porque la palabra con muchas letras no cabe en la línea y pasa a la siguiente, provocando que queden espacios en blanco muy grandes en la línea anterior.

Observa qué es lo que ocurre con la palabra «comprometemos»:

Al ser una palabra con muchas letras pasa a la siguiente línea y en la primera línea quedan solo cuatro palabras y tres espacios en blanco que son demasiado grandes.

Para leer esa frase hacemos unas pausas demasiado grandes entre las palabras y, aunque no nos demos cuenta, nos cuesta mucho más leerlas.

Esta dificultad en la lectura se hace más notoria en aquellos que tienen dificultades para leer como, por ejemplo, las personas con dislexia o con alguna deficiencia visual.

Por esta razón, concluimos que justificar los textos en web no es accesible, porque dificulta la lectura. No justificar los textos es una de las normas que debemos cumplir para que nuestra web sea accesible.

Ríos de blanco

Un efecto que se produce cuando justificamos los textos a ambos lados es que se forman ríos, como se ve en la siguiente captura:

Los ríos son espacios en blanco que coinciden entre líneas. Se producen porque las palabras están demasiado separadas.

Estos ríos hacen que la lectura del párrafo sea más difícil.

Nos cuesta mucho mantener la vista en la línea porque el ojo tiende a confundirse por una sensación de énfasis vertical, es decir, un movimiento de arriba abajo, provocado porque las palabras están demasiado aisladas.

Por cierto, este efecto también se produce cuando utilizamos letras monoespaciadas en vez de letras con espacios proporcionales.

Estos ríos deben evitarse a toda costa. En diseño editorial, un texto que se considera bien maquetado no puede tener ríos bajo ningún concepto.

Partir palabras con guiones

Una técnica que se puede utilizar para evitar que las palabras con muchas letras provoquen que haya demasiado espacio entre palabras en una línea es partir las palabras entre líneas mediante el uso de guiones.

Los guiones son especialmente útiles en columnas estrechas, donde hemos visto que se agrava el problema de la legibilidad.

Hay quien dice que los guiones dificultan la lectura, pero no es verdad. Lo que dificulta la lectura son los espacios en blanco irregulares o un ancho de línea excesivo, pero no los guiones.

Es cierto que no se debe abusar de ningún signo ortográfico y la norma es no usarlo si no es necesario (menos es más), pero en columnas estrechas yo sí lo recomiendo, incluso si no se justifican los textos.

En la web podemos controlar que las palabras se partan mediante guiones al final de la línea utilizando la propiedad hyphens.

hyphens: auto;

Para saber si podemos usar esta propiedad, comprobamos en Can I Use que es compatible con las últimas versiones de los navegadores más utilizados. Vemos que, en el momento de escribir este artículo, no es del todo compatible con Edge ni con Opera, así que debemos usarlo con precaución, sabiendo que en esos navegadores las palabras no se van a partir con guiones.

Vamos a ver qué ocurre con el mismo ejemplo de antes, con los textos justificados en una columna estrecha, típica de un móvil, declarando la propiedad CSS hyphens.

Bueno, pues vemos que la cosa mejora, pero tampoco es para tirar cohetes…

Se lee mucho mejor que sin guiones, porque las palabras largas («comprometemos», «microlearning» y «conocimiento») se han partido con guiones, lo que ha evitado que se produzcan espacios en blanco demasiado grandes.

Sin embargo, se siguen produciendo espacios en blanco irregulares que dificultan la lectura, y en la siguiente captura vemos que también se han producido ríos. Y bastante tochos, ¡alguno parece el Tajo!

Por lo tanto, vemos que lo de partir con guiones, aunque mejora el asunto, tampoco es la panacea.

Idioma

Una condición esencial que debemos tener en cuenta cuando partimos con guiones es que el HTML de la web tiene que establecer el idioma del texto para que el navegador sepa dónde debe colocar los guiones para partir las palabras, ya que las normas de partición de palabras son distintas en cada idioma.

Además, el navegador del usuario debe tener el diccionario de ese idioma en concreto. Por ejemplo, en Can I Use vemos que Chrome no incluye el diccionario catalán.

Límite de líneas

Además, los guiones tienen sus propias normas ortotipográficas que debemos cumplir. Son sencillas de cumplir cuando maquetamos para papel con InDesign, pero en la web de momento no se pueden controlar.

Por ejemplo, hay una recomendación de estilo que dice que no se pueden poner guiones en más de 2 líneas consecutivas. En nuestro ejemplo tenemos 2 seguidos: los que parten las palabras «características» y «microlearning». Por lo tanto, en este caso sí estaríamos respetando la norma sin haber hecho nada a propósito.

Esta norma se puede aplicar de manera automática en la web, utilizando la propiedad hyphenate-limit-lines, pero… ¡oooh, qué pena! No es compatible con Chrome.

Límite de caracteres

Otra norma que debemos cumplir es que al partir las palabras se deben dejar en una línea al menos 3 caracteres.

En nuestro ejemplo vemos que la palabra «conocimiento» se ha partido dejando la sílaba «co-» en una línea. Esto no es correcto.

En este caso deberíamos haber partido la palabra así: «cono-cimiento».

Por lo tanto, con CSS tenemos que limitar automáticamente el número de caracteres antes y después de un guion.

Además, hay otra regla que debemos cumplir: evitar partir con guiones las palabras que son demasiado cortas, porque serían difíciles de leer.

Todo esto se consigue con la propiedad hyphenate-limit-chars, pero… ¡oooh, qué pena! No es compatible con Chrome.

Hay más normas, pero creo que con esto es suficiente para que se entienda que de momento en web no se puede partir con guiones en condiciones.

Conclusión

Hemos visto que aunque partir con guiones mejora la legibilidad en los textos justificados, hoy en día no se puede conseguir una partición de palabras con guiones óptima en web porque los navegadores aún no son compatibles con las propiedades que necesitamos para cumplir con todas las reglas ortotipográficas.

La conclusión es que la manera de conseguir espacios regulares entre palabras es alinear a la izquierda y nunca justificar a ambos lados.

Si después de leer este artículo continúas creyendo que justificar el texto de tu web es lo mejor, por favor, al menos utiliza guiones para que no se muera ningún gatito. Mejor no justifiques, pero si justificas, utiliza guiones. Dentro de lo malo, es lo menos malo.

Pero mejor sin justificar.

¿Y la alineación centrada?

La alineación centrada también consigue espacios regulares entre palabras, pero solo se lee bien en párrafos de 3 líneas como máximo. Esto es aproximado, porque también depende del ancho de la línea y el tamaño de la letra.

La alineación centrada deja de ser legible en párrafos más extensos, porque nos perdemos al cambiar de línea y se hace más difícil la lectura.

Por lo tanto, nunca se debe usar la alineación centrada para grandes bloques de párrafos.

Y, ante la duda, alinea a la izquierda.

Espera, espera… ¿y por qué en los libros sí se pueden justificar los textos?

Porque en diseño editorial sí podemos conseguir que los espacios blancos entre palabras sean lo más regulares posible.

En InDesign establecemos unos valores mínimos, óptimos y máximos para cada estilo de párrafo, para controlar que los espacios entre palabras, los espacios entre letras y la escala de pictograma no se vaya de madre.

Una vez que establecemos estos límites para todos los párrafos de un mismo estilo, el propio software nos avisa si hay una desviación muy grande en alguno de los párrafos, y vamos uno por uno modificando manualmente estos valores hasta que conseguimos que las diferencias sean imperceptibles visualmente.

Estos valores son relativos únicamente a los parámetros concretos de tipo de letra, tamaño, ancho de la línea, etc., que son valores estáticos, que no cambian. Además, maquetamos párrafos concretos, con unas palabras concretas.

Sin embargo, en la web responsive el ancho de línea y el tamaño de letra varían en función del dispositivo. Incluso los textos a menudo son dinámicos, se alimentan desde una base de datos y cambian.

En diseño editorial sí se puede hacer este trabajo para que los textos justificados se puedan leer bien, pero en web no se puede.

Aprecia la belleza de los textos sin justificar

Las personas que más saben de tipografía aprenden enseguida a apreciar la belleza de los textos alineados a la izquierda:

• Porque es la única manera de conseguir unos espacios óptimos entre palabras y entre letras.
• Porque las terminaciones irregulares de las líneas nos ayudan a cambiar más fácilmente de renglón.
• Porque se leen mejor.
• Porque son accesibles.

Este artículo es un servicio público para erradicar los textos justificados en la web. Gracias por llegar hasta aquí y apoyar la causa. Si quieres que desde 3ymedia School abanderemos otras causas tan loables como esta, hazte Schooler y cuéntanoslo en Discord.