Sistema de Maquetación de Artículos

¿Qué hace Sistema de Maquetación de Artículos?

Propósito

El Sistema de Maquetación de Artículos proporciona una metodología para diseñar la "experiencia de lectura"—la disposición específica de texto y medios de apoyo para contenido de formato largo como blogs, documentación, documentos técnicos y casos de estudio. Mientras que section-composition-system maneja el flujo a nivel de página, este sistema se centra en la legibilidad, la longitud de línea (medida), el ritmo vertical y la relación espacial entre el texto y los elementos editoriales (imágenes, citas, bloques de código). Asegura que los usuarios puedan consumir grandes cantidades de información sin fatiga visual.

Casos de Uso

• Diseño de plantillas de publicaciones de blog y páginas de artículos.
• Estructuración de documentación técnica y bases de conocimiento.
• Creación de contenido editorial de formato largo o revistas digitales.
• Desarrollo de "Modos de Lectura" o vistas de texto centradas en la accesibilidad.
• Organización de contenido educativo donde la retención de información es el objetivo.

Cuándo NO Usar

• Páginas de Aterrizaje de Alto Impacto: Donde el objetivo es escanear beneficios y llamadas a la acción rápidas; use section-composition-system.
• Paneles de Control: Donde la densidad de datos y la comparación tienen prioridad sobre la lectura lineal; use data-table-ui-system.
• Formularios y Vistas con Mucha Entrada de Datos: Use form-design-system.
• Vistas de "Aplicación" en un Solo Viewport: Donde el contenido es secundario a las herramientas funcionales.

Entradas

1. Arquetipo de Contenido: ¿Es un tutorial técnico (con mucho código), una historia narrativa (con muchas imágenes) o un documento técnico formal?
2. Sistema Tipográfico: Los tamaños de fuente base y las escalas definidas en fluid-typography-system.
3. Entorno de Lectura: ¿Se leerá principalmente en móvil (sin distracciones) o en escritorio (contexto de varias columnas)?
4. Mapa Jerárquico: La estructura lógica del contenido (H1, H2, H3, Cuerpo, Leyendas).

Salidas

1. Especificación del "Contenedor Dorado": Anchos máximos definidos para el texto para garantizar una longitud de línea óptima.
2. Mapa de Ritmo Vertical: Un sistema de márgenes y rellenos que crea un espaciado predecible entre párrafos y encabezados.
3. Plano de Componentes Editoriales: Reglas visuales para Citas Destacadas, Notas al Margen, Llamadas de Medios y Tabla de Contenidos.
4. Mapa de Lectura Responsivo: Cómo los tamaños de fuente y la altura de línea se ajustan para mantener la legibilidad en diferentes anchos de pantalla.

Flujo de Trabajo

1. Definir el "Contenedor Dorado" (La Medida)

El factor más crítico en la legibilidad es el número de caracteres por línea:

• Rango Óptimo: 45 a 75 caracteres (incluyendo espacios).
• Implementación en Escritorio: Generalmente se traduce en un max-width entre 600px y 800px, o simplemente max-width: 75ch — la unidad ch rastrea el ancho real de caracteres de la fuente, por lo que se mantiene correcto entre cambios de tipografía.
• Tamaño Fluido: Use clamp() para encabezados y texto del cuerpo (por ejemplo, font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)) para que la tipografía escale con el viewport en lugar de saltar en los puntos de quiebre.
• Centrado: Centre el contenedor para reducir la fatiga visual causada por movimientos amplios de la cabeza.

2. Establecer Interlineado y Ritmo Vertical

La altura de línea (interlineado) y el espaciado entre bloques crean "espacio para respirar":

• Interlineado Base: Apunte a 1.5 a 1.6 para el texto del cuerpo. Auméntelo para fuentes más pequeñas o más complejas.
• La "Proporción de Espaciado": Use un sistema de espaciado consistente (por ejemplo, 2x o 3x el margen base) para los espacios antes de los encabezados, y un espacio más pequeño (por ejemplo, 1x) después de los encabezados.
• Espaciado de Párrafos: Use márgenes inferiores (margin-bottom) en lugar de sangrías para separar párrafos en diseños web.

3. Diseñar "Pausas" Editoriales

Evite la fatiga del "Muro de Texto" introduciendo variedad visual:

• Citas Destacadas: Texto más grande y estilizado que resalta ideas clave.
• Notas al Margen/Llamadas: Cuadros con estilo distintivo (a menudo con un fondo claro o borde) para información secundaria.
• Imágenes/Medios: Defina reglas para medios "Contenidos" (en línea) vs. "Anchos" (que rompen el ancho del contenedor) vs. "A Sangre".
• Ajuste de Encabezados: Aplique text-wrap: balance a encabezados y citas destacadas (con un respaldo para navegadores no compatibles) para evitar palabras huérfanas en la última línea.

4. Construir Navegación y Orientación

Ayude a los usuarios a gestionar contenido largo:

• Tabla de Contenidos (ToC): Para artículos de más de 1,000 palabras, proporcione una ToC fija en escritorio o una plegable en móvil.
• Indicador de Progreso: Una barra sutil o indicador de porcentaje para mostrar cuánto contenido queda.
• Tiempo de Lectura: Proporcione un estimado de "X min de lectura" al principio para establecer las expectativas del usuario.

5. Planificar Cambios Tipográficos Responsivos

Mantenga la legibilidad a medida que la pantalla se reduce:

• Comodidad Móvil: En pantallas pequeñas, reduzca el relleno horizontal pero mantenga la longitud de línea cómoda.
• Verificación de Contraste: Asegúrese de que las llamadas con fondo de color o los modos oscuros mantengan el contraste WCAG AA.

Reglas de Decisión

• La Regla del Carácter: Si una línea de texto supera los 80 caracteres, es demasiado ancha. Si es menos de 40, es demasiado estrecha. Ajuste el contenedor.
• Proximidad del Encabezado: Un encabezado siempre debe estar más cerca del contenido que introduce que del contenido que lo precede (Principio de Proximidad).
• Lógica del Ancho de Medios: Use imágenes "Contenidas" para detalles técnicos e imágenes "Anchas" o "A Sangre" para cambios atmosféricos o narrativos.
• La Prueba del "Entrecerrar los Ojos" para el Ritmo: Entrecerrando los ojos hacia la página, debería ver "bloques" distintos de texto separados por espacios en blanco claros y consistentes.

Restricciones

• Accesibilidad: El texto debe cumplir con el contraste WCAG AA (4.5:1). El tamaño de fuente nunca debe ser menor de 16px (1rem) para el texto del cuerpo.
• Capacidad de Respuesta: Los contenedores deben ser fluidos (use max-width en lugar de un width fijo). Para componentes dentro del artículo (llamadas, medios incrustados) que necesitan adaptarse a su propio contenedor en lugar del viewport, use consultas de contenedor (@container).
• Jerarquía: H1 debe ser el más prominente, pero el texto del cuerpo debe ser el más cómodo de leer.

Patrones de Falla Comunes

• El "Océano de Escritorio": Texto que abarca todo el ancho de un monitor de 24 pulgadas, haciendo imposible que el ojo encuentre la siguiente línea.
• Texto Sofocante: Altura de línea demasiado ajustada (por ejemplo, 1.1 o 1.2), lo que provoca que los ascendentes y descendentes choquen.
• Encabezados Flotantes: Encabezados con el mismo espaciado arriba y abajo, lo que dificulta saber a qué sección pertenecen.
• Medios Inconsistentes: Mezcla de imágenes centradas, alineadas a la izquierda y anchas sin un sistema lógico claro.
• El "Desplazamiento Infinito": Sin orientación ni indicadores de progreso en un artículo de 5,000 palabras, lo que lleva al abandono del usuario.

Criterios de Validación

• La longitud de línea (medida) está entre 45 y 75 caracteres en escritorio.
• La altura de línea (interlineado) es al menos 1.5 para el texto del cuerpo.
• El ritmo vertical agrupa claramente los encabezados con su contenido siguiente.
• Los elementos editoriales (citas, llamadas) son visualmente distintos del texto del cuerpo.
• La Tabla de Contenidos o la orientación está presente para contenido de formato largo.
• La experiencia de lectura se prueba y optimiza para viewports móviles.
• Las relaciones de contraste para todo el texto cumplen con los estándares WCAG AA.