El interlineado, o altura de línea, es fundamental en el diseño web, sobre todo en los sitios web con mucho texto. Aunque pueda parecer un detalle sin importancia, un interlineado adecuado aumenta significativamente la legibilidad de su contenido y mejora la experiencia general del usuario. Esta guía le explicará por qué el interlineado es esencial y le guiará a través de varios métodos para ajustarlo en WordPress, proporcionándole ejemplos para asegurarse de que obtiene los mejores resultados.

¿Por qué es tan importante el interlineado?

El interlineado afecta directamente a la presentación visual del texto de su sitio web y, a su vez, a la experiencia de sus usuarios. He aquí algunas razones por las que es esencial:

1. Mejora de la legibilidad: Si su texto está muy espaciado, los lectores necesitarán ayuda para seguirlo, lo que provocará fatiga visual y frustración. Por otro lado, un espaciado excesivo puede facilitar que los usuarios mantengan la atención. El equilibrio adecuado mejora la fluidez de su contenido, facilitando su lectura y absorción.
2. Mejor estética: Un sitio web bien espaciado parece más limpio y profesional. Por ejemplo, un blog con un espaciado adecuado entre líneas y secciones resulta más atractivo y organizado que unos bloques de texto desordenados y difíciles de leer.
3. Influir en el compromiso de los usuarios: El compromiso de los usuarios suele estar relacionado con la legibilidad. Si los visitantes encuentran que su contenido es difícil de seguir, es probable que abandonen su sitio rápidamente. Un interlineado adecuado aumenta las posibilidades de que los usuarios permanezcan más tiempo, consuman más contenido e interactúen con su sitio web.

Ejemplo: En un mundo ideal, los usuarios leen el contenido con atención, reflexionando antes de hacer clic en los enlaces. En la realidad, hojean en busca de algo en lo que puedan hacer clic, y a menudo pulsan el botón de retroceso si no es lo que buscan. Un contenido claro y bien espaciado ayuda a los usuarios a encontrar lo que necesitan, mientras que un texto desordenado provoca frustración y mayores tasas de rebote.

Supongamos que desea obtener más información sobre cómo optimizar la experiencia de usuario de su sitio web mediante el interlineado. En ese caso, es recomendable que lea algunos materiales sobre legibilidad web y diseño de la experiencia del usuario, tales como No me haga pensarun libro que proporciona muchos consejos útiles sobre diseño.

Cómo ajustar el interlineado en WordPress

Dependiendo de sus necesidades y preferencias, WordPress ofrece varias formas de ajustar el interlineado, desde editores integrados hasta codificación personalizada y plugins. He aquí los métodos más comunes, cada uno con ejemplos para guiarle.

1、Ajustar el interlineado en el editor Gutenberg

El editor de bloques predeterminado de WordPress, Gutenberg, proporciona cierto control esencial sobre el interlineado. Si utiliza el editor Gutenberg, siga estos pasos para ajustar el interlineado:

Pasos:

• Seleccione el párrafo: Abra la página o entrada de WordPress que desee editar y haga clic en el bloque de párrafo que requiera un ajuste del espaciado.

• Buscar ajustes tipográficos: En el panel de ajustes de la derecha, localice la opción "Tipografíasección ".
• Ajustar la altura de la línea: Bajo los ajustes de tipografía, encontrará una opción para "Altura de línea". Puede aumentar o disminuir el espaciado ajustando el valor numérico o introduciendo un número personalizado.

Ejemplo: Supongamos que tiene un bloque de texto demasiado espaciado, lo que dificulta su lectura. Si la altura de línea por defecto es de 1,4, aumentarla a 1,8 o 2,0 proporcionará más espacio para respirar entre líneas, mejorando la legibilidad.

Se trata de un método sencillo para ajustar el interlineado de párrafos individuales o bloques de texto. Sin embargo, CSS personalizado puede ser más eficaz si requiere un control más preciso o necesita ajustar el espaciado en todo el sitio.

2、Ajustar el interlineado usando HTML personalizado en Gutenberg

Puede añadir CSS en línea en Gutenberg para un control más preciso sobre párrafos o elementos individuales.

Pasos:

• Cambiar al modo Código: Seleccione el bloque que desea editar y haga clic en el menú de tres puntos de la barra de herramientas de bloques. Seleccione "Editar como HTML" para cambiar a la vista de código.

• Añadir código de altura de línea: Modifique el <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-light-green-cyan-color"><p></mark> (o cualquier etiqueta HTML que utilice) añadiendo una propiedad de altura de línea. Por ejemplo:

<p style="line-height: 1.8em;">Se trata de un párrafo con interlineado aumentado.</p>

Ejemplo: Supongamos que su sitio web utiliza un tono formal y desea que cada párrafo de un artículo tenga un interlineado ligeramente más ancho para facilitar la lectura. Utilizando el método anterior, puede fijar el interlineado de los párrafos individuales en 1,8 em, lo que facilita a los usuarios la digestión de trozos largos de texto.

Este bloque tiene un contenido inesperado o no válido. Seleccione Convertir en bloque clásico.

Este método ofrece flexibilidad, permitiéndole ajustar con precisión la altura de línea para bloques de texto o elementos específicos.

3、Ajuste del interlineado en el editor clásico

Si sigue utilizando el editor clásico, WordPress le permite ajustar el interlineado tanto en el editor visual como en el código HTML.

• Uso del desplegable de formato:
  • Resalte el párrafo que desee modificar.
  • En la barra de herramientas, busque un menú desplegable llamado "Formato". Dependiendo de su tema, puede haber alturas de línea preestablecidas como 1,5, 2,0, etc.

Ejemplo: Si su tema lo permite, puede configurar todo el cuerpo de su texto para que tenga una altura de línea uniforme de 1,6 o 1,8. Esto es útil para blogs o contenidos de formato largo, ya que garantiza que cada artículo tenga un espaciado uniforme.

• Uso del editor de texto (vista HTML):
  • Pulse el botón "Texto" en el Editor clásico para cambiar a la vista HTML.
  • Añada CSS en línea directamente al HTML del párrafo:

<p style=" line-height: 1.7;">Este párrafo tendrá una altura de línea de 1,7.</p>

Ejemplo: Para quienes busquen un mayor control en secciones con párrafos largos o viñetas, el ajuste manual del interlineado con HTML le permite personalizar partes concretas de su página dejando intactos otros elementos.

4、Ajuste el interlineado a través del personalizador de temas

Muchos temas de WordPress proporcionan controles de interlineado directamente a través del personalizador de temas. Este método es ideal para aplicar un interlineado coherente en todo su sitio sin modificar entradas o páginas individuales.

Pasos:

• Abra el personalizador de temas: Desde el panel de control de WordPress, navegue hasta Apariencia > Personalice.

• Buscar ajustes tipográficos: Dependiendo de su tema, una sección estará etiquetada como "Tipografía" o "Estilos globales." En esta sección, busque una opción para ajustar la altura de la línea.

• Ajustar la altura de la línea globalmente: Algunos temas ofrecen un control deslizante o un cuadro de entrada en el que puede fijar la altura de línea de varios elementos de texto, como el cuerpo del texto, los encabezados e incluso las comillas de bloque.

Ejemplo: Supongamos que utiliza un tema como Astra o GeneratePress, que ofrece controles detallados de tipografía. Establezca la altura de línea global para el texto del cuerpo en 1,6 y aumente la altura de línea para los encabezados a 1,2. Esto daría a su sitio un diseño equilibrado y legible, con un espaciado entre encabezados más ajustado y un espaciado entre el texto del cuerpo más relajado.

Alternativamente, si su tema no proporciona estos controles, puede utilizar la opción "CSS adicional" para añadir reglas CSS globales, como por ejemplo manualmente

p {

  altura de línea: 1,6;

}

Esto garantiza que todos los párrafos de su sitio web mantengan un interlineado coherente y legible.

5、Utilizar plugins de WordPress para ajustar el interlineado

Si prefiere un método más visual y quiere evitar la codificación personalizada, los plugins de WordPress pueden ayudarle a gestionar fácilmente el interlineado y otros elementos de diseño.

Uno de estos plugins es Espaciadorque le permite controlar el espacio entre elementos añadiendo bloques en blanco.

Pasos:

• Instale el plugin espaciador: Desde el cuadro de mandos, vaya a Plugins > Añadir nuevo Plugin, busque "Espaciador", instálelo y actívelo.

• Añadir bloques espaciadores en Gutenberg: En el editor Gutenberg, haga clic en el botón "+" para añadir un bloque, busque "Espaciador" y arrástrelo entre párrafos, imágenes u otros elementos.
• Ajuste la altura del espaciador: Una vez añadido el bloque Espaciador, utilice los tiradores de arrastre para ajustar su altura o introduzca un valor específico en los ajustes del bloque.

Ejemplo: Suponga que está diseñando una página de aterrizaje y desea más espacio para respirar entre secciones como titulares, imágenes y texto. Insertar bloques espaciadores le permite ajustar visualmente el espaciado sin tocar ningún código.

Conclusión

Ajustar el interlineado en WordPress es crucial para mejorar la legibilidad, la estética y el compromiso del usuario. Un interlineado adecuado garantiza que su texto sea fácil de leer y visualmente atractivo. WordPress ofrece múltiples métodos para ajustar el interlineado, incluyendo el uso del editor Gutenberg, HTML personalizado, el editor clásico, el personalizador de temas y plugins como Spacer. Cada técnica proporciona flexibilidad en función de sus necesidades, desde el ajuste fino de bloques de texto individuales hasta la aplicación de ajustes en todo el sitio. Al optimizar el interlineado, creará una experiencia de lectura más agradable y atractiva para los visitantes de su sitio web.