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?
Line spacing directly affects the visual presentation of your website’s text and, in turn, your users’ experience. Here are a few reasons why it’s essential:
- 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.
- 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.
- Influir en el compromiso de los usuarios: User engagement is often linked to readability. If visitors find your content difficult to follow, they are likely to bounce off your site quickly. Proper line spacing increases users’ chances of staying longer, consuming more of your content, and interacting with your website.
Example: In an ideal world, users read content carefully, reflecting before clicking links. In reality, they skim for something clickable, often hitting the back button if it’s not what they want. Clear, well-spaced content helps users find what they need, while cluttered text leads to frustration and higher bounce rates.
Suppose you want to learn more about optimizing your website’s user experience through line spacing. In that case, it is recommended that you read some materials on web readability and user experience design, such as Don’t Make Me Thinkun 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
WordPress’s default block editor, Gutenberg, provides some essential control over line spacing. If you’re using the Gutenberg editor, follow these steps to adjust line-height:
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: In the right-hand settings panel, locate the “Tipografía” section.
- Ajustar la altura de la línea: Under the typography settings, you will find an option for “Line Height.” You can increase or decrease the spacing by adjusting the numeric value or entering a custom number.
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: Select the block you want to edit and click on the three-dot menu in the block toolbar. Select “Editar como HTML” to switch to code view.
- Añadir código de altura de línea: Modifique el
<mark class="has-inline-color has-light-green-cyan-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)"><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: Let’s say your website uses a formal tone, and you want each paragraph in an article to have a slightly wider spacing for readability. Using the above method, you can set the line spacing for individual paragraphs to 1.8 em, which makes it easier for users to digest long pieces of text.
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
If you’re still using the Classic Editor, WordPress allows you to adjust line spacing in both the visual editor and HTML code.
- Uso del desplegable de formato:
- Resalte el párrafo que desee modificar.
- In the toolbar, look for a dropdown menu labelled “Format.” Depending on your theme, there may be preset line heights like 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):
- Click the “Texto” tab in the Classic Editor to switch to HTML view.
- 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: Depending on your theme, a section will be labelled “Tipografía" o "Estilos globales.” In this section, look for an option to adjust the line height.
- 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: Let’s say you use a theme like Astra or GeneratePress, which offers detailed typography controls. Set the global line height for body text to 1.6 and increase the line height for headings to 1.2. This would give your site a balanced, readable layout with tighter heading spacing and more relaxed body text spacing.
Alternatively, if your theme does not provide these controls, you can use the “CSS adicional” section to add global CSS rules, such as manually
p {
line-height: 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, search for “Espaciador,” install, and activate it.
- Añadir bloques espaciadores en Gutenberg: In the Gutenberg editor, click the “+” icon to add a block, search for “Spacer,” and drag it between paragraphs, images, or other elements.
- 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: Suppose you’re designing a landing page and want more breathing room between sections like headlines, images, and text. Inserting Spacer blocks allows you to visually adjust the spacing without touching any code.
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.