Introducción

En muchos temas de WordPress, los títulos largos (post titles, entradas, encabezados de bloques) pueden comportarse de forma extraña en pantallas intermedias: al reducirse el tamaño de la tipografía con reglas fluidas (por ejemplo usando clamp()), el line-height puede dar pequeños saltos o cambios perceptibles entre puntos de quiebre. Esto genera títulos con líneas demasiado separadas o, al contrario, con solapamientos visuales. En este artículo detallado muestro por qué ocurre esto y doy varias soluciones prácticas y seguras para WordPress, con ejemplos listos para pegar en tu CSS o en el personalizador.

Por qué ocurre el salto del line-height

Las causas habituales son:

• Desacoplamiento entre font-size y line-height: si usas un line-height fijo en px mientras el font-size cambia con clamp() o vw, la relación entre ambas ya no es proporcional, y al redimensionar se perciben saltos.
• Redondeos del motor de renderizado: los navegadores redondean valores subpíxel y eso puede hacer que al cambiar el tamaño la altura de línea cambie de forma no continua.
• Uso de unidades mixtas: mezclar unidades (px/rem/vw) sin homogeneizar puede producir saltos en rangos intermedios.

Principios generales a seguir

Para minimizar o eliminar los saltos hay que aplicar uno o varios de estos principios:

1. Usar line-height unitless (por ejemplo 1.05) para que escale siempre en proporción al font-size.
2. O definir el line-height en función del font-size mediante variables CSS y calc(), de modo que se mantenga la proporción exacta en todo el rango fluido.
3. Evitar unidades mixtas en la misma propiedad y usar clamp() de forma coherente.
4. Controlar el guionado, separación de palabras y saltos forzados (hyphens, overflow-wrap, word-break) para que el wrapping no provoque saltos bruscos.

Solución recomendada (más robusta): variable CSS clamp calc

Esta técnica hace que el tamaño del título sea fluido con clamp() y el line-height se calcule a partir de esa misma variable, por ejemplo multiplicando el tamaño por 1.05 o 1.08. Así la altura de línea siempre será proporcional exactamente al tamaño actual y evitará saltos.

Ejemplo listo para usar en tu tema (puedes pegarlo en el Personalizador → CSS Adicional o en style.css):

:root {
  / Ajusta estos valores según tu tipografía y diseño /
  --title-min: 1.4rem   / tamaño mínimo /
  --title-max: 3.2rem   / tamaño máximo /
}

/ Clase ejemplo para títulos fluidos /
.fluid-entry-title {
  / Variable con clamp para el font-size (fluido entre min y max) /
  --fluid-title-size: clamp(var(--title-min), 2.2vw   1rem, var(--title-max))
  font-size: var(--fluid-title-size)

  / line-height calculado en función del tamaño: 1.06 = 6% de leading /
  line-height: calc(var(--fluid-title-size)  1.06)

  / Ajustes visuales recomendados /
  margin: 0 0 0.5em 0
  font-weight: 700
  letter-spacing: -0.01em
  word-break: break-word       / evita desbordes raros /
  overflow-wrap: anywhere      / mejora el wrapping en palabras largas /
}

Explicación rápida: definimos la variable –fluid-title-size con clamp(). Luego aplicamos el font-size con esa variable y calculamos el line-height usando calc() multiplicando por la proporción deseada. De este modo, el leading se mueve exactamente en proporción al tamaño, evitando saltos.

Alternativa simple: unitless line-height

Si no quieres usar variables o buscas compatibilidad máxima, usa un line-height unitless. Es la solución más sencilla y suele resolver la mayoría de los saltos perceptibles.

.entry-title {
  font-size: clamp(1.5rem, 3vw, 2.8rem)
  line-height: 1.08 / unitless — escala con el font-size automáticamente /
}

Ventaja: simplicidad y comportamiento fluido. Limitación: al no controlar la altura con precisión en unidades concretas, en extremos muy pequeños o muy grandes quizá necesites ajustar manualmente la proporción.

Mejoras adicionales para títulos largos

• Hyphenation: habilita guiones en textos largos para mejorar el wrapping en inglés y otros idiomas que lo permitan.

      .entry-title {
        hyphens: auto
        -webkit-hyphens: auto
        -ms-hyphens: auto
      }
      

• Control de puntos de quiebre: añade media queries para afinar la relación font-size/line-height en rangos específicos.

      @media (max-width: 480px) {
        .entry-title {
          font-size: 1.25rem
          line-height: 1.12
        }
      }
      

• Evitar palabras prohibitivas: usa word-break o overflow-wrap con moderación para evitar splits extraños:

      .entry-title {
        overflow-wrap: anywhere
        word-break: break-word
      }
      

Ejemplo práctico integrado en WordPress (Gutenberg / bloque HTML personalizado)

Si usas Gutenberg, puedes añadir una clase al bloque de título (por ejemplo fluid-entry-title) y pegar el CSS anterior en el Personalizador → CSS adicional. También puedes imprimir la clase desde tu template de PHP para títulos de entradas:

lth1 class=entry-title fluid-entry-titlegtlt?php the_title() ?gtlt/h1gt

Con esto el título recibirá el comportamiento fluido y la altura de línea calculada.

Notas sobre accesibilidad y legibilidad

• No reduzcas demasiado el line-height: para títulos grandes un valor entre 1.03 y 1.12 suele ser legible demasiado apretado sacrifica la lectura, demasiado suelto perjudica la jerarquía visual.
• Prueba siempre en varias resoluciones y con textos reales (no sólo una palabra) para validar que los saltos desaparecen en la práctica.
• Atención a idiomas con palabras muy largas (alemán, finlandés) o títulos con nombres compuestos: conviene permitir hyphens/overflow-wrap y ajustar.

Depuración y verificación en navegadores

1. Usa las DevTools para inspeccionar la variable –fluid-title-size y el cálculo del line-height (computed styles).
2. Mueve manualmente el ancho del viewport para ver el comportamiento continuo del título.
3. Comprueba en móviles reales y navegadores principales (Chrome, Firefox, Safari) porque el redondeo puede variar ligeramente la solución de variable calc reduce la diferencia.

Resumen y recomendaciones finales

Para eliminar o reducir el salto de line-height en títulos largos con CSS clamp():

• La opción más robusta: definir el font-size con una variable que use clamp() y calcular el line-height con calc(var(–size) ratio).
• Alternativa simple y rápida: usar line-height unitless (1.05–1.12) para que siempre escale con el font-size.
• Complementa con hyphens, overflow-wrap y media queries para afinar la apariencia en todos los tamaños.

Aplica cualquiera de las técnicas anteriores en tu tema o en el Personalizador de WordPress y verifica en distintos anchos. La combinación de CSS variables clamp calc es moderna, elegante y mantiene una proporción constante entre tamaño y leading, eliminando los saltos visuales en la mayoría de los casos.