Mejorar la Justificación de texto en html

Leer en:

Tabla de contenidos

Comparte este post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Cuando queremos utilizar texto justificado en una página web, a veces el resultado no es el deseado. Muchas veces obtenemos un justificado en el que las palabras están muy separadas entre sí o muy juntas como puedes observar en el siguiente ejemplo:

Las líneas de texto de la primera columna y la tercera columna tienen un justificado mejorable. El espaciado entre las palabras es demasiado amplio.

Soluciones para mejorar la justificación de texto en html

Para solucionar el problema de justificación de texto en páginas web, tenemos varias opciones

  1. Cambiar el espaciado entre palabras o entre caracteres (tracking)
  2. Cambiar el tamaño del texto si es posible
  3. Cambiar el tamaño del contenedor/columna
  4. Una combinación de lo anterior

Cambiar el espaciado entre palabras o entre caracteres

Es la opción más recomendable para mejorar la justificación de texto en html. Lo podemos hacer utilizando CSS de manera manual o utilizando los ajustes de nuestro editor de texto como por ejemplo Elementor. Si lo hacemos utilizando CSS, solamente tenemos que utilizar el siguiente código para controlar el espaciado entre caracteres (tracking) suponiendo que estamos creando los estilos de un párrafo de texto:

p {letter-spacing: 1px;}

p {leter-spacing: 0.04em}

Si utilizas las unidades em en muchos casos tendrás mayor control sobre el espaciado, ya que se trata de una unidad relativa y en muchos casos 1px es demasiado espaciado.

Si utilizas Elementor, no tenemos que utilizar código CSS, ya que el propio editor nos ofrece la posibilidad de cambiar el tracking de casi cualquier widget de texto. Siguiendo con el ejemplo anterior, dentro de Elementor vamos a la pestaña de Estilo y seleccionamos Tipografía. Clicamos el icono del lápiz para editar y en la parte inferior del panel encontraremos las opciones de espaciado.

Si trabajamos en una publicación en la cual no podemos variar el tamaño del texto ni modificar el ancho de las columnas, esta es la mejor opción para mejorar la justificación de texto en html. Solo con cambiar el espaciado entre letras pudimos mejorar mucho el aspecto del texto justificado de nuestro ejemplo. Echa un vistazo.

Se puede observar que los espacios en blanco de la primera foto han sido reducidos considerablemente utilizando solo el espaciado entre caracteres.

Suscríbete a nuestro boletín

Recibe más artículos como este en tu correo electrónico

Más artículos

Incremente tus leads y ventas

Crea notificaciones gratis y popups en tu web