← Todos los artículos

Tutoriales

El ancho de columna de lectura perfecto

17 mayo 2026 · por JustZix Team

Si un solo cambio pudiera mejorar cada artículo que lees, sería el ancho de columna. Los tipógrafos lo llaman la medida, y acertar con él es la diferencia entre una lectura sin esfuerzo y una fatiga ocular constante.

La regla de los 66 caracteres

Décadas de práctica tipográfica apuntan a aproximadamente 50 a 75 caracteres por línea, con 66 como el punto ideal. Demasiado corto y tus ojos saltan constantemente; demasiado largo y el barrido de retorno desde el final de una línea hasta el inicio de la siguiente se vuelve poco fiable. La mayoría de los sitios web estiran el texto de borde a borde en monitores anchos, aterrizando muy por encima de 120 caracteres — muy fuera del rango cómodo.

Medir en unidades ch

CSS te da una unidad creada exactamente para este trabajo. La unidad ch equivale al ancho de avance del glifo 0 en la fuente actual. Un max-width de 66ch por tanto sigue tu elección de fuente automáticamente:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

Como ch es relativa a la fuente, la misma regla mantiene una buena medida tanto si el sitio usa una sans condensada como una serif ancha.

Mantén anchos los elementos anchos

Limitar la columna del artículo no debería atrapar tus imágenes y código dentro de ella. Deja que ciertos hijos se desborden a ancho completo mientras el texto se mantiene estrecho:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

El margen negativo recentra un hijo de ancho completo respecto a la columna de texto estrecha. Ajusta los números a tu gusto — el objetivo son medios que respiren mientras la prosa se mantiene disciplinada.

Relleno adaptable

En un teléfono, un max-width rígido es irrelevante pero el relleno de los bordes importa. Combina ambos para que la regla funcione en todas partes:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

El clamp() da a las pantallas pequeñas un margen cómodo y a las grandes uno generoso, sin una sola media query.

Emparejar el ancho con el ritmo

El ancho funciona mejor junto a un espaciado vertical generoso. Una columna estrecha con interlineado apretado sigue sintiéndose apretada. Añade este bloque complementario:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Aplícalo como una regla de JustZix

Crea una regla, fija un patrón de URL amplio como *://*/* si lo quieres en todas partes, o limítalo a una publicación concreta. Pega los bloques de ancho y ritmo en el panel CSS y guarda. Visita unos pocos artículos y ajusta el valor ch hasta que las líneas se sientan naturales — la mayoría de la gente se asienta entre 60ch y 72ch.

Una medida correcta es invisible: simplemente dejas de notar la maquetación y empiezas a absorber las palabras. Explora nuestros ejemplos listos para usar para preajustes afinados, lee la guía complementaria sobre crear un modo de lectura completo, y descarga JustZix para empezar a medir.