← Todos los artículos

Tutoriales

Ajusta el tamaño de fuente y el espaciado para una lectura cómoda

17 mayo 2026 · por JustZix Team

Muchos sitios meten texto diminuto en columnas de borde a borde. Leerlos es agotador. Con JustZix puedes adjuntar una regla CSS que redimensiona el texto, abre el espaciado entre líneas y limita el ancho de la columna — convirtiendo cualquier muro de texto en algo reposado.

Sube el tamaño de fuente base

Los navegadores calculan cada tamaño relativo a partir del tamaño de fuente raíz. Sube ese único valor y la mayor parte de la página escala con él.

html {
  font-size: 18px !important;
}

Si un sitio usa tamaños fijos en píxeles por todas partes, el truco de la raíz no lo alcanzará. Entonces apunta al texto del cuerpo directamente.

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

Dale espacio a las líneas para respirar

La altura de línea es el mayor factor de comodidad individual. La mayoría de los sitios la fijan demasiado apretada. Un valor entre 1,6 y 1,8 es el punto ideal para el texto del cuerpo.

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

Limita el ancho de la columna

Las líneas que se estiran por un monitor ancho son agotadoras de recorrer. La medida ideal es de unos 65 a 75 caracteres. Restringe el contenido principal y céntralo.

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

La unidad ch mide el ancho en anchos de carácter, así que la columna se adapta a la fuente que estés usando. Combina esto con un cambio de fuente y la página se transforma.

Afloja el espaciado entre letras y párrafos

Un toque de espaciado extra entre párrafos y una pizca de espaciado entre letras hace que el texto denso se sienta más tranquilo.

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

Un control deslizante de escalado con JavaScript

¿Quieres ajustar el tamaño en vivo en lugar de editar CSS? Una pequeña regla JavaScript añade zoom de teclado solo para el texto.

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

Mantén pulsada Alt y pulsa la tecla más o menos para redimensionar. JustZix ejecuta este script en las páginas que elijas, así que el atajo solo existe donde lo quieres.

Lista de comprobación

• Empieza con el tamaño de fuente raíz; recurre a selectores directos si el sitio usa píxeles fijos.
• Apunta a una altura de línea de 1,6–1,8 y a una columna de alrededor de 70ch.
• No te excedas con el espaciado — demasiado espaciado entre letras daña la legibilidad tanto como demasiado poco.
• Combínalo con un cambio de fuente para la mayor mejora.

Continúa con nuestro artículo sobre cambiar las fuentes del sitio web, explora los ejemplos listos para usar para recetas instantáneas, o descarga JustZix para aplicar tu primera regla de lectura hoy.