Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo ajustar el interlineado (line-height) y el tamaño de los párrafos en WordPress para alcanzar una legibilidad óptima en cualquier dispositivo. Incluye principios tipográficos, valores recomendados, técnicas responsivas, ejemplos de código CSS y cómo aplicar los cambios tanto desde el Personalizador como desde un tema hijo o funciones del tema.

Principios básicos de legibilidad

• Tamaño de fuente base: una base de 16px (1rem) es la práctica más común para texto de lectura en pantalla. Permite escalado accesible y coherencia.
• Interlineado (line-height): favorece valores entre 1.4 y 1.8 para texto de párrafo según la tipografía y el ancho de línea. Tipicamente 1.5–1.6 funciona bien.
• Ancho de línea (measure): idealmente 45–75 caracteres por línea en CSS se controla con max-width en unidades ch o con medidas en rem/px combinadas con px para el contenedor.
• Espaciado entre párrafos: usa margen inferior en lugar de padding para que la separación sea consistente y no afecte al flujo del box model.
• Unidades relativas: usa rem/em para escalado accesible evita fijar todo en px.
• Contraste y tipografía: asegúrate de contraste suficiente y de elegir fuentes con buena legibilidad (x-height generoso, aperturas claras).

Valores recomendados rápidos

• Tamaño base: 16px (1rem)
• Interlineado párrafo: 1.45–1.65
• Espaciado entre párrafos: 1rem–1.25rem (dependiendo del diseño)
• Ancho de lectura recomendado: 50–65ch o max-width: 60ch
• Encabezados: escalar con rems o clamp() para fluidez

Cómo aplicar los cambios en WordPress

Opción A — Personalizador (CSS adicional)

La forma más directa para usuarios no desarrolladores es abrir Apariencia → Personalizar → CSS adicional y pegar reglas CSS. A continuación hay un bloque de ejemplo listo para pegar y adaptar.

/ Base tipografía y legibilidad /
html { font-size: 100% } / 16px /
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif
  font-size: 1rem
  line-height: 1.6           / interlineado base /
  color: #222
  background-color: #fff
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
}

/ Contenedor de contenido: limitar ancho para buena medida de línea /
.entry-content, .post, .page {
  max-width: 60ch           / controla la longitud de línea /
  margin-left: auto
  margin-right: auto
  padding-left: 1rem
  padding-right: 1rem
}

/ Párrafos: espaciado y legibilidad /
.entry-content p {
  margin: 0 0 1.25rem 0     / 1.25rem separación entre párrafos /
  font-size: 1rem
  line-height: 1.65
  letter-spacing: 0.01em    / opcional, muy sutil /
}

/ Encabezados: escalado limpio /
.entry-content h2, .entry-content h3, .entry-content h4 {
  line-height: 1.25
  margin: 1.5rem 0 0.75rem 0
}

/ Ajustes responsivos /
@media (max-width: 480px) {
  .entry-content, .post, .page {
    padding-left: 0.75rem
    padding-right: 0.75rem
  }
  .entry-content p {
    font-size: 0.98rem
    line-height: 1.55
    margin-bottom: 1rem
  }
}

Opción B — Tema hijo (ficheros CSS/funciones)

Si usas un tema hijo, añade las reglas en style.css del tema hijo o crea un archivo de estilos específico y enquéalo desde functions.php del tema hijo. También puedes cargar fuentes desde Google Fonts o locales para mejorar la tipografía.

/ functions.php (tema hijo) /

Editor (Gutenberg) — mantener la consistencia visual

Para que el editor muestre una vista cercana al frontend, registra estilos del editor:

/ Agregar estilos al editor en functions.php /

En editor-style.css incluye las mismas reglas tipográficas básicas (font-size, line-height, max-width para .editor-styles-wrapper) para obtener WYSIWYG más fiable.

Escala tipográfica y técnicas avanzadas

• Clamp para tipografía fluida: la función clamp() permite tamaño fluido entre un mínimo y máximo. Ejemplo: font-size: clamp(1rem, 1rem 0.5vw, 1.125rem)
• Unidades ch para medida de línea: max-width: 60ch mantiene líneas dentro de 45–75 caracteres.
• Rem para espaciados: margen y padding con rem facilitan escalado global ajustando solo html font-size.

/ Tipografía fluida y medida de línea /
.entry-content p {
  font-size: clamp(1rem, 0.95rem   0.6vw, 1.125rem)
  line-height: 1.6
  max-width: 60ch
  margin-bottom: 1.25rem
}

Consideraciones para móviles y lectura rápida

• En pantallas pequeñas reduce ligeramente font-size y line-height para evitar saltos largos de scroll, pero mantén legibilidad (ej. 1rem y 1.5).
• Para contenido largo, aumenta line-height un poco para facilitar la lectura continuada (ej. 1.65). Para body copy muy corto puedes usar 1.45.
• Evita justificar texto completo (text-align: justify) salvo que controles muy bien el espaciado de palabras evita ríos tipográficos.

Pruebas y accesibilidad

• Verifica contraste de color con herramientas como WebAIM Contrast Checker o la extensión Lighthouse en Chrome.
• Comprueba lectura con distintos tamaños de fuente en el navegador (Zoom 125%–200%).
• Prueba en lectores de pantalla o herramientas de accesibilidad para asegurarte de que la estructura semántica (p, h2, h3) está bien usada.
• Considera ofrecer opciones de contraste alto o tamaños de texto accesibles mediante botones o un panel de accesibilidad si necesitas más cumplimiento WCAG.

Errores comunes y cómo evitarlos

1. Fijar todo en px: rompe escalado del usuario. Usa rem/em para texto y espaciados importantes.
2. Line-height demasiado pequeño: hace el texto denso y difícil de leer. Evita < 1.3 para párrafos.
3. Espaciado inconsistente: mezcla margenes y padding en párrafos y encabezados puede producir saltos extraños. Usa reglas consistentes para .entry-content p y .entry-content h
4. No probar en distintos dispositivos: la buena apariencia en desktop no garantiza buena legibilidad en móvil.

Checklist final antes de publicar

• Comprobar que body font-size está en 100% (16px por defecto) o ajustar root con cuidado.
• Line-height de párrafos entre 1.45 y 1.65 según tipografía.
• Max-width del contenido en torno a 50–65ch.
• Espaciado entre párrafos coherente (1rem–1.25rem o 1.25rem para lectura larga).
• Reglas aplicadas también en editor (editor-style.css) para WYSIWYG.
• Pruebas de contraste y de accesibilidad realizadas.

Recursos recomendados

• WebAIM — guías de accesibilidad y comprobadores de contraste.
• MDN Web Docs — referencia CSS (line-height, clamp(), ch, rem).
• Repositorio de plugins de WordPress — busca plugins de tipografía o CSS personalizado si no quieres tocar archivos del tema.

Ejemplos concretos listos para usar

A continuación hay dos ejemplos listos: uno minimal para pegar en CSS adicional y otro más completo para tema hijo incluyendo Google Fonts.

/ Ejemplo minimal: pegar en Personalizar → CSS adicional /
body { font-size: 1rem line-height: 1.6 font-family: system-ui, sans-serif color: #222 }
.entry-content { max-width: 60ch margin: 0 auto padding: 0 1rem }
.entry-content p { margin: 0 0 1.25rem font-size: 1rem line-height: 1.6 }

/ Ejemplo tema hijo: functions.php   style.css /
/ functions.php /
get(Version) )
}
add_action( wp_enqueue_scripts, child_enqueue )
?> 
/ style.css (tema hijo) /
body { font-family: Inter, system-ui, sans-serif font-size: 1rem line-height: 1.62 color:#111 }
.entry-content { max-width: 62ch margin: 0 auto padding: 0 1rem }
.entry-content p { margin-bottom: 1.25rem }

Conclusión

La legibilidad en WordPress se mejora con pequeños ajustes coherentes y medidos: establece una base tipográfica clara (16px), usa line-height entre 1.45 y 1.65 según el contexto, limita la longitud de línea (50–65 caracteres), y aplica esos estilos tanto en el frontend como en el editor. Usa rem y ch para escalado y consistencia, prueba en distintos dispositivos y comprueba la accesibilidad. Con los ejemplos y las reglas aquí mostradas tendrás una base sólida para mejorar la lectura de tus contenidos.