Long-form reading experience
Long-form reading experience
8 reglasLimita la medida de línea a 60-75 caracteres en texto de cuerpo
La medida (longitud de línea) es la palanca más determinante de la legibilidad en lectura larga. El rango satisfactorio para una columna única va de 45 a 75 caracteres contando letras y espacios; Bringhurst fija 66 como ideal. Una línea de 120 caracteres obliga al ojo a recorrer una distancia excesiva y a buscar el inicio del renglon siguiente, lo que rompe el ritmo y multiplica los saltos perdidos. Acota el contenedor de prosa con max-width en unidades ch (60-75ch) o su equivalente en píxeles (~680px a 18px) en lugar de dejar que el texto se estire al ancho de la página.
La tipografía en pantalla recompensa la moderación: cuando la columna se acota a unos 62 caracteres, el ojo encuentra el inicio del siguiente renglon sin esfuerzo y el ritmo de lectura se sostiene párrafo tras párrafo.
La tipografía en pantalla recompensa la moderación: cuando una línea se estira a lo largo de toda la ventana, el ojo recorre una distancia tan grande que al volver al margen izquierdo se pierde y a veces relee o salta un renglon completo sin darse cuenta.
Aplica un interlineado de al menos 1.5 en bloques de texto corrido
El espacio entre líneas (leading) determina cuan fácilmente el ojo retorna al inicio del renglon siguiente sin perder el hilo. WCAG fija 1.5 como piso recomendado para texto de cuerpo; con ascendentes y descendentes pronunciados, valores de 1.55-1.65 mejoran aún más la lectura sostenida. Un line-height de 1.2 aprieta los renglones en un bloque denso que fatiga a los pocos minutos. Define el interlineado como número sin unidad (line-height: 1.6) para que escale con el tamaño de fuente.
Los renglones respiran y cada línea es un carril claro para el ojo. El retorno al margen izquierdo es preciso, el texto deja de sentirse como un muro y la lectura se sostiene durante minutos sin fatiga perceptible.
Los renglones quedan tan juntos que el bloque se lee como una mancha gris uniforme. El ojo, al saltar de una línea a la siguiente, tropieza con el ascendente de la palabra de abajo y pierde la cuenta de donde iba. El cansancio aparece rápido.
No bajes de 16px en el texto principal de un articulo
16px es el tamaño por defecto de los navegadores modernos para texto de cuerpo y coincide con el tamaño de letra de un libro impreso a distancia de lectura natural. Tamaños de 12-14px funcionan en UI compactas, pero en bloques de lectura larga fuerzan a acercarse a la pantalla o a hacer zoom, interrumpiendo la experiencia. En móvil, 16px es además el umbral que evita que iOS y Android hagan zoom automático en inputs. Para articulos, 17-19px con interlineado 1.6 es el rango comodo para sesiones de 15 minutos o más.
Default de navegadores · iA 100% Easy-2-Read · greadme.com guía de tamaños · a11y-collective WCAG font sizeA 18px el texto se lee a distancia natural, sin esfuerzo. El lector se acomoda y atraviesa párrafos largos como pasaria las páginas de un libro bien compuesto.
A 13px el lector entrecierra los ojos y se inclina hacia la pantalla. Lo que en una tarjeta de UI es aceptable, en un articulo de diez párrafos se vuelve agotador antes del tercero.
Evita negro puro sobre blanco puro en texto largo
El par #000000 sobre #FFFFFF crea el contraste más duro posible en pantalla. En lectores con astigmatismo (cerca del 40% de la población adulta según revisión sistematica), ese choque de luminancia extrema genera un halo que distorsiona las letras y acelera la fatiga ocular. Suavizar el texto a #1a1a1a-#333 o el fondo a #fafafa-#f5f5f5 mantiene WCAG AA o superior y elimina el efecto de vibración. iA Writer usa #333 sobre #fff como referencia de color de cuerpo; verifica siempre el par con una herramienta de contraste.
iA 100% Easy-2-Read · prevalencia astigmatismo ~40% (revisión sistematica PMC) · WCAG 1.4.3 (AA)Con el negro suavizado a #1d1d1d y el fondo bajado a #fafafa el contraste sigue siendo nitido (pasa WCAG AAA) pero el choque de luminancia desaparece: la lectura se vuelve tranquila y sostenible.
El negro absoluto sobre blanco puro vibra a pleno brillo: los bordes de las letras parecen temblar y, en lectores con astigmatismo, el texto genera un halo que cansa la vista en pocos minutos.
Ancla los headings con más margen arriba que abajo
En lectura larga el usuario escanea los headings para navegar entre secciones. Si un heading tiene margenes iguales arriba y abajo, flota entre dos bloques sin pertenecer claramente a ninguno. Asignar un margen superior de ~2-3 veces la línea base y uno inferior de ~1 vez conecta visualmente el título con el párrafo que introduce y crea una jerarquía de navegación perceptible. El interlineado de los headings debe ser menor que el del cuerpo (1.2-1.3) para que los títulos de dos líneas no se vean fragmentados.
betterwebtype.com (top 3x / bottom 1x line-height) · imperavi UI Typography, vertical rhythm...la primera fase del proceso queda documentada y el equipo puede revisarla con calma cuando lo necesite.
Configuración inicialmargin: 40px 0 12px
El heading se separa del bloque anterior y se pega al párrafo que introduce: la pertenencia es inequivoca.
...la primera fase del proceso queda documentada y el equipo puede revisarla con calma cuando lo necesite.
Configuración inicialmargin: 24px 0
El heading queda equidistante entre los dos bloques: el ojo duda a que párrafo pertenece y la jerarquía se diluye.
Muestra el tiempo estimado de lectura junto al título
Saber cuanto tardara en terminar un articulo ayuda al lector a decidir si lo lee ahora o lo agenda, y reduce la fricción de comprometerse con un texto largo. Mostrar "7 min de lectura" junto a la fecha es una practica de industria consolidada (Medium la popularizo) que da contexto antes de empezar. Calcula el tiempo dividiendo el conteo de palabras entre una velocidad de lectura silenciosa de ~238 palabras por minuto, confirmada en un meta-analisis de 190 estudios; Medium usa 265 wpm y suma un buffer por imagenes. Redondea hacia arriba al minuto y nunca muestres "0 min".
Brysbaert et al. 2019 (238 wpm, 190 estudios) · Medium / mdswanson time-to-read (265 wpm, practica de industria)Como disenamos el nuevo flujo de checkout
Como disenamos el nuevo flujo de checkout
Conten las imagenes en el ancho de la columna, breakout solo con intención
En una columna de prosa de ~680px, una imagen que de repente ocupa 1200px rompe el ritmo de lectura y sugiere un maquetado descuidado. Por defecto, las imagenes de un articulo deben respetar el ancho del texto para mantener cohesión. Las imagenes técnicas (diagramas, screenshots) suelen necesitar más aire: reservales una clase .wide que extienda a ~900px y comunique intención. El caption usa el mismo ancho que la imagen, un tamaño menor (12-14px) y color atenuado respecto al cuerpo.
El equipo midio cada paso del embudo antes de tocar el diseño. Los resultados fueron claros:
La imagen comparte el ancho del texto: la lectura fluye sin sobresaltos y el caption ancla el contexto.
El equipo midio cada paso del embudo antes de tocar el diseño. Los resultados fueron claros:
El salto de ancho corta la lectura: el ojo abandona el flujo de la prosa.
Disena el contenedor para resistir overrides de espaciado (WCAG 1.4.12)
Lectores con dislexia, baja visión o necesidades cognitivas inyectan stylesheets propias o extensiones que aumentan el espaciado tipografico. WCAG 1.4.12 (AA) define los umbrales que el contenido debe soportar sin que el texto se corte, solape u oculte: line-height >= 1.5, espacio entre párrafos >= 2, letter-spacing >= 0.12 y word-spacing >= 0.16, todos relativos al font-size. Un contenedor con height fija, overflow: hidden o white-space: nowrap falla la prueba y recorta el texto cuando crece. Usa min-height, overflow: visible y unidades relativas (em/rem) para que el layout absorba el espaciado.
Con altura flexible y desbordamiento visible, el mismo texto absorbe el espaciado aumentado sin recortes: el contenedor crece y cada palabra permanece legible.
Cuando el usuario aplica los umbrales de WCAG 1.4.12, el texto crece pero el contenedor no: las últimas líneas quedan recortadas y el contenido se vuelve inaccesible.
- R-712 Limita la medida de línea a 60-75 caracteres en texto de cuerpo
- R-713 Aplica un interlineado de al menos 1.5 en bloques de texto corrido
- R-714 No bajes de 16px en el texto principal de un articulo
- R-715 Evita negro puro sobre blanco puro en texto largo
- R-716 Ancla los headings con más margen arriba que abajo
- R-717 Muestra el tiempo estimado de lectura junto al título
- R-718 Conten las imagenes en el ancho de la columna, breakout solo con intención
- R-719 Disena el contenedor para resistir overrides de espaciado (WCAG 1.4.12)