Cómo cambiar el espaciado entre líneas en WordPress: todos los métodos explicados

El espaciado entre líneas en WordPress — controlado por la propiedad CSS line-height — define la distancia vertical entre líneas de texto dentro de un elemento de bloque. Ajustarlo afecta directamente la legibilidad, la jerarquía visual y la calidad tipográfica en todo el sitio. Los cuatro métodos principales para cambiarlo son: los controles nativos del Editor de Bloques Gutenberg, el Personalizador de Temas de WordPress, CSS personalizado mediante el panel de CSS Adicional y los plugins de tipografía. Cada método se adapta a un nivel diferente de acceso técnico y alcance del cambio.

Esta guía cubre cada método con total profundidad técnica, incluyendo casos límite, problemas de especificidad de selectores y compensaciones de plugins que la mayoría de los tutoriales omiten por completo.

Por qué el interlineado importa más allá de la estética

La especificación CSS define line-height como la altura mínima de las cajas de línea dentro del elemento. Para el texto del cuerpo, la directriz de accesibilidad WCAG 2.1 (Criterio de Éxito 1.4.12) recomienda un line-height mínimo de 1,5 veces el tamaño de fuente. Ignorar esto afecta no solo el diseño visual, sino también el cumplimiento normativo y las señales de calidad de los motores de búsqueda vinculadas a Core Web Vitals y las métricas de participación del usuario.

Un line-height mal configurado — en particular valores por debajo de 1.2 en el texto del cuerpo — hace que el texto se sienta apretado, aumenta la tasa de rebote y puede provocar problemas de Cumulative Layout Shift (CLS) cuando se combina con fuentes web que se cargan de forma asíncrona.

Método 1: Controles nativos del Editor de Bloques Gutenberg

El editor Gutenberg expone controles line-height de forma nativa para los bloques Párrafo, Encabezado, Lista y Cita, pero esta función debe habilitarse explícitamente a nivel de tema mediante theme.json o la función add_theme_support().

Paso 1: Verificar que el soporte de interlineado esté activo

Si no ve un campo de Interlineado en el panel de configuración del bloque, su tema activo no ha declarado compatibilidad con él. Puede habilitarlo añadiendo lo siguiente al archivo functions.php de su tema:

add_theme_support( 'custom-line-height' );

Para temas de bloques que usan theme.json, asegúrese de que lo siguiente esté presente bajo settings:

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Paso 2: Seleccionar el bloque de destino

En el editor de entradas o páginas, haga clic en el bloque Párrafo o Encabezado que desea modificar. La barra de herramientas del bloque aparece en la parte superior y la barra lateral derecha cambia automáticamente a la pestaña Bloque.

Paso 3: Localizar el panel de Tipografía

En el panel Bloque de la derecha, desplácese hasta la sección Tipografía. Si está contraída, haga clic en la etiqueta para expandirla. Verá un campo de entrada de Interlineado.

Introduzca un valor sin unidades. WordPress lo pasa directamente como el valor CSS line-height en el estilo en línea del bloque. Rangos recomendados:

• Párrafos del cuerpo: 1.5 a 1.8
• Encabezados (H1–H2): 1.1 a 1.3
• Subencabezados (H3–H4): 1.2 a 1.4

Caso límite crítico: Los valores sin unidades (p. ej., 1.6) son muy preferibles a los valores en píxeles o em (p. ej., 24px o 1.6em) porque se escalan proporcionalmente cuando un elemento hijo hereda la propiedad y cambia su propio tamaño de fuente. Usar px aquí es un error común que rompe el espaciado de elementos anidados.

Paso 4: Guardar y validar

Haga clic en Actualizar o Publicar. Use las DevTools de su navegador (F12 > Elementos > Calculado) para confirmar que el estilo en línea line-height: 1.6 se aplica al elemento correcto y no está siendo anulado por una hoja de estilos del tema con mayor especificidad.

Método 2: Personalizador de Temas de WordPress para tipografía en todo el sitio

El Personalizador (Appearance > Customize) proporciona una interfaz de vista previa en tiempo real para cambios en todo el sitio. Los controles de tipografía en el Personalizador no son una función del núcleo de WordPress — los proporciona completamente su tema activo o un plugin complementario.

Temas con paneles de tipografía nativos

Los temas construidos sobre frameworks como GeneratePress, Astra, Kadence u OceanWP exponen secciones de Tipografía dedicadas con controles deslizantes line-height para el texto del cuerpo, los encabezados y las áreas de widgets de forma individual.

Paso 1: Navegar a la configuración de Tipografía

Vaya a Apariencia > Personalizar. Busque una sección etiquetada como Tipografía, Fuentes o Estilos Globales según su tema. Si no existe dicha sección, su tema no admite el control de tipografía basado en el Personalizador — continúe con el Método 3 o el Método 4.

Paso 2: Ajustar el interlineado por elemento

La mayoría de los personalizadores de temas permiten seleccionar como destino:

• Texto del cuerpo (corresponde al selector body o p)
• Encabezados H1 a H6
• Menús de navegación
• Títulos de widgets

Establezca sus valores y use el panel de vista previa en tiempo real para validar en puntos de interrupción de escritorio y móvil simultáneamente.

Paso 3: Publicar los cambios

Haga clic en Publicar en la parte superior izquierda del Personalizador. Los cambios se escriben en las opciones almacenadas del tema y se aplican globalmente a través de la hoja de estilos del tema o el bloque <style> en línea en <head>.

Problema: La configuración de tipografía del Personalizador se almacena en las opciones del tema, no en style.css. Si cambia de tema, todos estos ajustes se perderán. Documente siempre sus valores antes de cambiar de tema.

Método 3: CSS personalizado — El método más preciso y portable

El CSS personalizado le otorga control total sobre la selección de selectores, la especificidad y los puntos de interrupción responsivos. Es el enfoque correcto cuando necesita un control granular que ni el editor de bloques ni el Personalizador proporcionan.

Paso 1: Acceder al panel de CSS Adicional

Navegue a Apariencia > Personalizar > CSS Adicional. Este CSS se almacena en la base de datos y se genera en línea en <head>, lo que le otorga una ventaja de especificidad sobre la mayoría de las hojas de estilos de los temas.

Alternativamente, si gestiona su propio entorno de servidor — por ejemplo, en un plan de Alojamiento VPS — puede encolar una hoja de estilos personalizada mediante functions.php para un mejor control de caché y rendimiento:

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Paso 2: Escribir reglas CSS específicas

Interlineado global de párrafos:

p {
    line-height: 1.6;
}

Todos los niveles de encabezado:

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Solo bloques de párrafo específicos de Gutenberg (evita afectar el texto de la barra lateral o el pie de página):

.wp-block-paragraph {
    line-height: 1.7;
}

Limitado a una plantilla de página específica o tipo de entrada usando la clase de cuerpo que WordPress genera automáticamente:

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Ajuste responsivo para móvil (las pantallas más pequeñas se benefician de un espaciado ligeramente más compacto):

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Paso 3: Resolver conflictos de especificidad

Si su CSS no surte efecto, una regla de tema o plugin con mayor especificidad la está anulando. Diagnostique esto en DevTools inspeccionando el elemento y comprobando qué regla aparece tachada en el panel de Estilos.

Para aumentar la especificidad sin recurrir a !important, delimite su selector con mayor precisión:

body .site-content .entry-content p {
    line-height: 1.6;
}

Use !important solo como último recurso, ya que crea una deuda de mantenimiento que se acumula con cada adición futura de CSS:

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Método 4: Plugins de tipografía

Los plugins son la opción correcta cuando necesita una interfaz sin código, cuando gestiona un sitio para un cliente que debe mantenerlo de forma independiente, o cuando necesita funciones tipográficas OpenType avanzadas más allá de line-height.

Comparación de plugins

Instalación y configuración de Advanced Editor Tools

Advanced Editor Tools (anteriormente TinyMCE Advanced) es la opción más ampliamente utilizada para añadir controles de espaciado entre líneas directamente en la barra de herramientas del editor de bloques.

1. Vaya a Plugins > Añadir nuevo, busque Advanced Editor Tools y haga clic en Instalar ahora y luego en Activar.
2. Navegue a Ajustes > Advanced Editor Tools.
3. En la pestaña Editor de bloques, habilite el botón de barra de herramientas Interlineado arrastrándolo a la fila de barra de herramientas activa.
4. Regrese a cualquier entrada o página. Seleccione un bloque de Párrafo. El control de interlineado aparece ahora en la barra de herramientas del bloque.

Uso de WP Typography para reglas globales

WP Typography aplica reglas tipográficas a nivel de renderizado PHP, lo que significa que modifica la salida HTML antes de que llegue al navegador. Esto es útil para aplicar un line-height consistente en todo el texto sin tocar bloques individuales.

Tras la activación, vaya a Ajustes > WP Typography y localice la sección Clases CSS para aplicar reglas de interlineado limitadas a contenedores específicos.

Problema: El procesamiento de texto de WP Typography puede entrar en conflicto con los plugins de caché si el almacenamiento en caché de página completa está habilitado. Pruebe siempre después de activarlo en un entorno de pruebas, especialmente si su stack de alojamiento incluye caché a nivel de servidor — una configuración común en Servidores Dedicados que ejecutan Nginx con caché FastCGI.

Edición de sitio completo (FSE) y theme.json: El enfoque moderno

Para sitios que usan un tema de bloques (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE, etc.), el método canónico para establecer valores predeterminados de line-height es theme.json. Este archivo define tokens de diseño que se propagan a través de toda la interfaz del editor de bloques.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

Los valores establecidos en styles dentro de theme.json se generan como propiedades personalizadas CSS y se aplican mediante el selector :root, lo que les otorga un amplio alcance mientras siguen siendo anulables a nivel de bloque. Esta es la arquitectura más mantenible para sitios WordPress en producción en 2024 y más allá.

Si está construyendo o gestionando un tema de bloques personalizado en un servidor que controla — como un VPS con cPanel — editar theme.json directamente mediante el administrador de archivos o SSH es más rápido y fiable que usar el Personalizador para los tokens de tipografía.

Cómo elegir el método correcto: Matriz de decisión

Lista de verificación técnica antes de publicar

• Confirme que los valores line-height son sin unidades o usan em — evite px para propiedades heredadas.
• Valide WCAG 2.1 SC 1.4.12: el line-height del texto del cuerpo debe ser al menos 1.5.
• Inspeccione los estilos calculados en DevTools para confirmar que ninguna regla de mayor especificidad está anulando sus valores.
• Pruebe en al menos dos puntos de interrupción móviles — un line-height que funciona a 1440px puede resultar excesivo a 375px.
• Si usa un plugin de caché (WP Rocket, W3 Total Cache), vacíe la caché después de cualquier cambio de CSS.
• Para sitios alojados en Alojamiento Web Compartido, use el panel de CSS Adicional en lugar de editar los archivos del tema directamente para evitar que los cambios sean sobreescritos en las actualizaciones del tema.
• Documente todos los valores personalizados de line-height en una guía de estilos o un bloque de comentarios dentro de su archivo CSS.
• Si implementa un tema hijo personalizado o theme.json en un servidor gestionado, asegúrese de que los permisos de archivo en theme.json estén configurados en 644 para evitar errores de escritura desde el editor de archivos de WordPress.

Preguntas frecuentes

¿Cambiar el interlineado en el editor Gutenberg afecta a los dispositivos móviles?

Sí. Los valores establecidos mediante el campo de Interlineado del Editor de Bloques se aplican como estilos en línea sin media query, por lo que se aplican en todos los anchos de ventana. Para un control responsivo — valores diferentes en móvil frente a escritorio — debe usar CSS personalizado con consultas @media o un plugin de bloques como Kadence Blocks que exponga controles de tipografía por punto de interrupción.

¿Por qué mi CSS personalizado line-height no se aplica aunque lo haya añadido a CSS Adicional?

La causa más común es una regla de hoja de estilos de tema o plugin con mayor especificidad CSS que apunta al mismo elemento. Abra DevTools, inspeccione el elemento del párrafo y busque reglas tachadas en el panel de Estilos. Aumente la especificidad de su selector (p. ej., .entry-content p en lugar de p) o, como último recurso, añada !important.

¿Cuál es la diferencia entre line-height: 1.6 y line-height: 1.6em?

Un valor sin unidades como 1.6 se hereda como una proporción — los elementos hijo multiplican su propio tamaño de fuente por 1.6. Un valor de 1.6em se calcula en relación con el tamaño de fuente del padre y luego se hereda como un valor de píxeles fijo, lo que puede causar un espaciado desalineado en elementos anidados con diferentes tamaños de fuente. Use siempre valores sin unidades para line-height en el texto del cuerpo.

¿Puedo establecer diferentes interlineados para la vista del editor y la parte pública?

Sí. WordPress aplica los estilos del editor de forma separada a los estilos de la parte pública. Para apuntar al lienzo del editor de bloques, encole una hoja de estilos usando el hook enqueue_block_editor_assets y delimite sus reglas a .editor-styles-wrapper p. Esto garantiza que la experiencia de edición coincida visualmente con la salida publicada.

¿Ajustar el interlineado romperá el diseño de mi sitio o causará Cumulative Layout Shift?

Cambiar line-height en elementos de texto estático no causa CLS por sí solo. El CLS se desencadena cuando los elementos cambian de posición después del renderizado inicial — generalmente causado por la carga e intercambio de fuentes web. Si usa Google Fonts o una fuente web personalizada, combine sus ajustes de line-height con font-display: swap y sugerencias de precarga para minimizar la inestabilidad del diseño durante la carga de fuentes. Alojar sus fuentes localmente — algo sencillo en un entorno de Alojamiento VPS — elimina la latencia de fuentes de terceros que más comúnmente desencadena CLS junto con los cambios tipográficos.