Introducción

Los temas de WordPress a veces usan tipografías y tamaños de letra demasiado pequeños para lectura cómoda, especialmente en pantallas móviles o para usuarios con baja visión. Este artículo ofrece un tutorial completo y práctico para mejorar la legibilidad en temas con tipografías pequeñas utilizando CSS: diagnóstico, buenas prácticas tipográficas, fragmentos listos para aplicar y cómo desplegar los cambios en WordPress.

Principios básicos de legibilidad

• Tamaño de texto: el texto de párrafo ideal suele estar entre 16px y 20px (o 1rem–1.25rem) en escritorio. Evitar textos de lectura por debajo de 13px.
• Altura de línea (line-height): 1.4–1.8 para párrafos ayuda a distinguir líneas y reduce la fatiga lector.
• Contraste: relación suficiente entre color de texto y fondo. Seguir WCAG 2.1 para niveles de contraste mínimos.
• Espaciado: márgenes y espaciado entre párrafos y listas para evitar bloques densos de texto.
• Tipografía: elegir familias legibles (sans-serif para lectura continua en pantalla o serif legible si está bien diseñada). Usar pesos y tamaños adecuados.
• Consistencia: reglas coherentes para encabezados, párrafos y listados.

Diagnóstico inicial en un tema WordPress

1. Inspecciona elementos con las herramientas del navegador para ver reglas aplicadas a p, li, .entry-content, .post, .site-main.
2. Comprueba el tamaño base: busca reglas en :root, html, o en el theme stylesheet que definan font-size en px o %.
3. Revisa estilos de bloques de Gutenberg: .wp-block-paragraph, .wp-block-heading, .wp-block-list, etc.
4. Evalúa contraste con una herramienta o extensión y mide line-height y espaciados entre elementos.

Estrategia CSS general

No es recomendable editar directamente los archivos del tema padre. Usa Additional CSS en el Personalizador, un child theme o un plugin de CSS personalizado. La estrategia es:

• Definir variables CSS para tamaños y line-height.
• Aumentar el tamaño de base de forma controlada (usar rem y clamp para responsividad).
• Establecer reglas específicas para contenido principal (.entry-content, .post) para no alterar elementos UI muy específicos.
• Asegurar foco visible y accessible hit targets en enlaces y botones.

Ejemplo: variables y base tipográfica responsive

Uso de variables CSS y clamp() para escalar el tamaño base entre dispositivos.

:root{
  --base-font-size: clamp(15px, 1rem   0.4vw, 18px) / tamaño base responsive /
  --base-line-height: 1.6
  --scale-ratio: 1.25 / escala entre niveles de encabezado /
  --body-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
}

html {
  font-size: var(--base-font-size)
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
}

p, .entry-content p, .wp-block-paragraph {
  font-family: var(--body-font-family)
  font-size: 1rem / se basa en html font-size /
  line-height: var(--base-line-height)
  color: #222
  margin: 0 0 1.15em 0
}

Encabezados, listas y bloqueos de texto

Ajusta los tamaños relativos de los encabezados y mejora la legibilidad de listas y blockquotes.

/ Encabezados escalados por la variable de escala /
.entry-content h2, .wp-block-heading h2 { font-size: calc(1rem  var(--scale-ratio)  1.1) line-height: 1.25 margin: 0 0 .8em 0 }
.entry-content h3, .wp-block-heading h3 { font-size: calc(1rem  var(--scale-ratio)) line-height: 1.3 margin: 0 0 .75em 0 }
.entry-content h4, .wp-block-heading h4 { font-size: calc(1rem  (var(--scale-ratio) / 1.1)) line-height: 1.35 margin: 0 0 .6em 0 }

/ Listas más legibles /
.entry-content ul, .entry-content ol, .wp-block-list {
  margin: 0 0 1em 1.25rem
  line-height: 1.6
  font-size: 1rem
}

/ Blockquote claro y espaciado /
.entry-content blockquote {
  margin: 0 0 1em 0
  padding-left: 1rem
  border-left: 3px solid rgba(0,0,0,0.08)
  color: #333
  font-style: italic
}

Ajustes para tipografías pequeñas heredadas

Si el tema fuerza tamaños pequeños en elementos concretos (por ejemplo .meta, .site-info, .widget), aplica reglas específicas para elevarlos sin romper el diseño.

/ Aumentar tipografías pequeñas que dificultan la lectura /
.entry-meta, .post-meta, .site-info, .widget, .widget .widget-title, .site-footer, .comment-meta, .comment-content {
  font-size: 0.95rem / normaliza a cerca de 15–16px /
  line-height: 1.5
}

/ Forzar tamaño mínimo donde el theme use 12px o similar /
.small, .muted, .meta {
  font-size: clamp(13px, 0.85rem, 15px)
}

Contraste y color

Mejorar contraste sin cambiar la estética general. Prefiere colores con suficiente relación de contraste y evita aplicar baja opacidad al texto principal.

/ Texto principal sobre fondo claro /
.entry-content, .entry-content p, .site-main {
  color: #222 / evita grises demasiado claros como #666 en bloques largos /
}

/ Links con foco accesible /
.entry-content a {
  color: #0a66c2
  text-decoration: underline
}
.entry-content a:focus, .entry-content a:hover {
  outline: 3px solid rgba(10,102,194,0.12)
  outline-offset: 3px
}

Mejor experiencia en móviles (media queries)

En pantallas pequeñas la tipografía debe ser legible sin necesidad de zoom extremo. Ajustes via media queries:

/ Aumentar ligeramente el tamaño en móviles para mejor lectura /
@media (max-width: 600px){
  :root { --base-font-size: clamp(16px, 1rem   1vw, 19px) }
  .entry-content p { font-size: 1rem line-height: 1.6 }
  .entry-content h2 { font-size: 1.375rem }
}

Accesibilidad adicional

• Foco visible: Asegúrate de que los enlaces y botones tengan outline o box-shadow cuando reciben foco para usuarios de teclado.
• Opciones de usuario: Si tu público lo requiere, considera añadir controles de tamaño de texto (pequeño, medio, grande) con JavaScript que modifiquen una clase raíz.
• Evita transformar texto a mayúsculas: Las mayúsculas reducen la legibilidad, sobre todo en fuentes pequeñas.

Ejemplo: foco visible y mejoras en botones

a:focus, button:focus, .entry-content a:focus {
  outline: 3px solid #ffbf47
  outline-offset: 3px
  border-radius: 3px
}

/ Botones con texto claro y tamaño cómodo /
.button, .wp-block-button__link {
  font-size: 0.95rem
  padding: .6em 1em
}

Fuentes web: rendimiento y legibilidad

• Si cargas Google Fonts, usa font-display: swap para evitar texto invisible.
• Prefiere una pila de fuentes del sistema para rendimiento si no necesitas una familia específica.
• Si usas una fuente personalizada, limita los pesos importados para reducir solicitudes.

/ Ejemplo de stack de sistema /
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

Cómo desplegar estos cambios en WordPress

1. Personalizador → CSS adicional: pega los fragmentos CSS más relevantes para pruebas rápidas.
2. Child theme: añade las reglas en style.css del child theme para cambios persistentes y control de versiones.
3. Plugins de CSS personalizado: usar plugins como Simple Custom CSS o similar si no quieres child theme.
4. Para cambios con PHP (enqueue), puedes añadir CSS en un archivo y encolarlo desde functions.php del child theme.

Ejemplo: encolar estilo en functions.php (child theme)

/ functions.php del child theme /
function mi_tema_child_enqueue_styles() {
  wp_enqueue_style( parent-style, get_template_directory_uri() . /style.css )
  wp_enqueue_style( child-style, get_stylesheet_directory_uri() . /style.css, array(parent-style), wp_get_theme()->get(Version) )
}
add_action( wp_enqueue_scripts, mi_tema_child_enqueue_styles )

Pruebas y control de calidad

• Prueba en múltiples dispositivos y navegadores.
• Usa lectores de pantalla y herramientas de contraste para validar.
• Realiza pruebas con usuarios o colegas que representen diferentes necesidades visuales.
• Verifica que las modificaciones no rompan el diseño en áreas críticas (menus, cabeceras, formularios).

Snippets listos para copiar

Estos fragmentos están pensados para pegarlos en CSS adicional o en style.css del child theme según convenga.

Incremento global conservador

:root{
  --base-font-size: 16px
  --base-line-height: 1.6
}

html { font-size: var(--base-font-size) }

.entry-content, .entry-content p, .wp-block-paragraph {
  font-size: 1rem
  line-height: var(--base-line-height)
}

Forzar mínimo en zonas problemáticas

/ Zonas que frecuentemente vienen con texto muy pequeño /
.widget, .site-footer, .entry-meta, .comment-meta, .site-info {
  font-size: 0.95rem !important
  line-height: 1.5 !important
}

Consideraciones finales

Mejorar legibilidad en temas con tipografías pequeñas no es solo aumentar números: es aplicar una estrategia coherente que combine tamaño, interlineado, contraste y espaciado. Usa variables para mantenimiento, media queries para responsividad y pruebas reales para validar que los cambios benefician la experiencia de lectura sin romper la estética del tema.

Referencias rápidas

• WCAG 2.1 — Requisitos de contraste y accesibilidad