---
titulo: Tipografía
resumen: Inter Tight para titulares y texto; Roboto Mono en mayúsculas para la
  navegación, los botones, la numeración y las notas.
estado: produccion
grupo: Lenguaje visual
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - sans
  - mono
relacionados:
  - tokens/tipografia
id: fundamentos/tipografia
url: /designloop/fundamentos/tipografia
sync: ok
---

# Tipografía

Inter Tight para titulares y texto; Roboto Mono en mayúsculas para la navegación, los botones, la numeración y las notas.

Solo la landing. El portal sigue con su tipografía propia (pendiente de documentar).

| Uso | Clase | Familia | Peso | Tamaño |
| --- | --- | --- | --- | --- |
| Titular del hero | `.hero-title` | Inter Tight | 600 | 52 a 176 px |
| Titular de capítulo | `.display` | Inter Tight | 500 | 40 a 64 px (34 a 52 px en móvil) |
| Titular de hoja | `.sheet-title` | Inter Tight | 500 | 28 a 40 px |
| Entradilla | `.sub` | Inter Tight | 400 | 20 a 28 px |
| Texto | `body` | Inter Tight | 400 | 16 px |
| Nota | `.mono-text` | Roboto Mono, mayúsculas | 400 | 15 px |
| Botón, navegación | `.pill`, `.tb-link` | Roboto Mono, mayúsculas | 400 | 15 y 16 px |
| Numeración | `.step-n`, `.b-n` | Roboto Mono | 400 | 13 px |

## Reglas

- Los titulares van con interletraje negativo (de −0,03 em a −0,055 em, más cerrado cuanto más grandes) y `text-wrap: balance`.
- Los tamaños grandes son fluidos con `clamp()`; no se fijan en píxeles.
- Roboto Mono siempre en mayúsculas, salvo la numeración.
- Los titulares nunca van en mayúsculas.
- Las dos familias están alojadas en el propio sitio (`public/site/fonts.css`, licencia OFL).

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `tokens.produccion.json` | Sincronizado | — |