# Tipografía y jerarquía para lectura con índice lateral

Fuente: ajuste de composición entregado por el equipo el 21 de octubre de 2026, conservando el contenido. Las medidas recibidas están confirmadas para esta composición; su reutilización como preset es una convención contextual de trabajo, no una nueva escala corporativa universal.

## Valores recibidos

| Rol | Familia / peso | Tamaño / interlineado | Tracking | Tratamiento |
| --- | --- | --- | --- | --- |
| Título principal | Gilroy Bold 700 | `40 / 48px` | `-0.0216em` | Prioridad dominante, sin sobredimensionar una página de lectura. |
| Títulos de sección | Gilroy Bold 700 | `28 / 32px` | `-0.025em` | Capítulos claros y consistentes. |
| Subtítulos | Familia y peso no especificados en el nuevo ajuste | `18 / 26px` | `-0.01em` | Gris oscuro para reducir competencia visual. |
| Texto de lectura | Suisse Regular 400 | `16 / 26px` | `normal` | Mayor aire entre líneas. |
| Índice lateral | Suisse SemiBold 600 | Tamaño heredado del cuerpo en el ejemplo | Normal en el ejemplo | Opciones de `80px` de alto, con separadores. |

La implementación reutiliza Gilroy Regular 400 para subtítulos, como la convención de subtítulos ya documentada. Traduce “gris oscuro” a Grey 700 `#333333`; el color exacto y ese peso no se presentan como datos nuevos suministrados por el equipo. El índice hereda `16/26px` del cuerpo y usa separadores Grey 200; son decisiones de implementación del ejemplo.

## Criterio de composición y mejora continua

- Conserva copy, datos, orden semántico y acciones al ajustar la jerarquía. Una mejora tipográfica no autoriza reescribir contenido aprobado.
- Revisa siempre tamaño, peso, tracking, interlineado, ancho de lectura y espaciado entre grupos como un conjunto.
- Cierra ligeramente los títulos cuando mejore su forma y agrupación. No traslades el tracking negativo del display al texto de lectura.
- Da más aire al cuerpo y a la navegación: el ritmo de lectura y la separación entre opciones cuentan tanto como el tamaño de los headings.
- Reduce el peso visual de los subtítulos mediante escala y gris oscuro; conserva el contraste necesario.
- Usa este preset cuando la página priorice lectura, orientación por secciones y un índice. El título hero de producción `76/80px` y otros roles confirmados mantienen su propio contexto.
- La navegación de `80px` pertenece a las opciones de este índice; no se extiende a menús globales, tabs, botones ni filtros compactos.
- Implementa las filas con `min-height: 80px`: miden 80px cuando caben, y pueden crecer con texto largo, traducciones o zoom. No recortes labels para mantener una altura fija.
- En móvil, el índice se apila conservando el orden DOM. No ocultes capítulos ni reduzcas automáticamente el cuerpo para acomodar el layout.
- Los separadores son líneas neutras entre opciones, no franjas decorativas adheridas a cards.
- Las medidas suministradas no incluyen breakpoints. Valida reflow antes de introducir reducciones y documenta cualquier adaptación.

## Uso en web y otros medios

`tokens.json` expone `typography.contextualPresets["reading-with-sidebar"]`. `tokens.css` publica las clases `.copa-reading-title`, `.copa-reading-section-title`, `.copa-reading-subtitle`, `.copa-reading-body`, `.copa-reading-nav` y `.copa-reading-nav-item`.

Asigna las clases al rol visual manteniendo una sola H1 y una secuencia lógica de headings. El demo de la página de marca usa párrafos como specimens del título; no añade otra H1 al documento. Para exports embebidos, copia únicamente los tokens y reglas utilizados a la raíz namespaced de la pieza.

En PowerPoint, Slides y documentos, aplica el mismo criterio de prioridad y ritmo al lienzo y tamaño de lectura. No conviertas los píxeles CSS a puntos de presentación de forma mecánica; comprueba fuentes, legibilidad y exportación.

## Validación del ajuste

Comprueba fuentes reales, pesos, tracking computado, interlineado, contraste, wrapping, ancho de lectura y expansión de idioma. Recorre el índice por teclado, revisa foco y destinos de ancla y comprueba a 200% de zoom que el contenido y las opciones siguen completos.