Cómo trabajar con textos justificados

Cuando escribimos textos en cualquier editor de textos, estamos acostumbrados a encontrar 4 tipos de alineaciones de texto:

• Izquierda
• Derecha
• Centrado
• Justificado

Pero claro, hasta hace bien poco, para web, los textos justificados estaban desaconsejados. ¿Por qué? Los textos justificados en la versión desktop probablemente no darán ningún problema. Pero, al adaptar el contenido a diferentes resoluciones con anchos de pantalla inferiores, seguramente estos textos perderán legibilidad.

Un ejemplo claro de esto sería:

En la versión de escritorio el texto justificado se ve correctamente, pero en pantallas móviles las líneas se ajustan de forma irregular y se generan espacios demasiado amplios entre palabras, lo cual dificulta la lectura.

Gracias a los avances en CSS este problema tiene solución. Y es mucho más fácil de lo que parece. Lo único que tenemos que hacer es aplicar la propiedad «hyphens» , con el valor «auto» y el texto se distribuirá y «romperá» las palabras donde haga falta, añadiendo el guión de ruptura en estos casos.

Aparte de esta opción, en el siguiente ejemplo podrás ver como se comportan dos valores que se pueden usar con la propiedad «text-wrap». Estas dos opciones propuestas son ideales para usar en encabezados.

• La primera opción mostrada es «text-wrap: pretty;» . Con esta propiedad y este valor lo que hacemos es ajustar las líneas de un texto de tal manera que no quedan «palabras viudas» y evitamos cortes molestos que nos rompan el ritmo de la lectura (esta opción la podemos ver en el <h1> del ejemplo propuesto).
• La siguiente opción mostrada es «text-wrap: balance;» y esta opción lo que hace es balancear el texto. Es decir, distribuye nuestra frase, en caso de que esta tenga que ocupar varias líneas, de tal manera que todas ellas ocupen visualmente el mismo espacio (esta opción la podemos ver en el <h2> del ejemplo propuesto).

See the Pen Alineamiento de textos by Marta (@MartaLiarte) on CodePen.