Tres familias aplicadas a cinco roles (display, heading, lead, subtitle, body), distribuidos en una escala de 18 pasos — desde 12 px para captions hasta 88 px para hero.
Las tres familias
- Rainier — display y titulación. Fuente propia del bar.
- Pend Oreille — script manuscrito para leads y frases destacadas.
- Ostia Antica — serif clásica para subtítulos y texto corrido.
PicNic (sistema v1) queda disponible vía --font-picnic por compatibilidad retroactiva, pero no forma parte de los roles nuevos.
Cómo usar los tokens
/* CSS */
font-family: var(--font-heading);
font-size: var(--text-h2);<!-- Tailwind -->
<h1 class="font-heading text-h1">Nuestra carta</h1>
<p class="font-body text-body">Texto corrido en cualquier párrafo…</p>
<span class="font-lead text-lead">Bienvenidos</span>Roles y escala completa
Roles de tipografía
Display
--font-display font-display Seim Seim
Hero, splash pages, display grande. Usa Rainier.
Heading
--font-heading font-heading Cocina Tai
Títulos de sección y artículos. Rainier con fallback system.
Lead
--font-lead font-lead Bienvenidos a Chapinero
Párrafos introductorios, frases destacadas.
Subtitle
--font-subtitle font-subtitle Una historia servida en platos
Antetítulos y subtítulos largos.
Body
--font-body font-body Pad Thai, Larb, Tom Kha y una lista de cocteles para acompañar la tarde.
Texto corrido. Long-form readable.
Escala tipográfica
| Token | Tamaño | Ejemplo | Uso |
|---|---|---|---|
text-display-2xl | 88px 5.5rem | Seim Seim | Hero de landing, solo 1 vez por pantalla. |
text-display-xl | 64px 4rem | Bar Tai | Títulos de splash / cover. |
text-display-lg | 48px 3rem | Chapinero | Display mediano. |
text-h1 | 56px 3.5rem | Nuestra carta | H1 de páginas. |
text-h2 | 40px 2.5rem | Entradas | H2 secciones. |
text-h3 | 32px 2rem | Platos fuertes | H3 subsecciones. |
text-h4 | 24px 1.5rem | Cocteles | H4 cards / panels. |
text-h5 | 20px 1.25rem | Opciones veganas | H5 labels de grupos. |
text-lead-xl | 32px 2rem | Bienvenidos | Lead destacado en hero. |
text-lead-lg | 24px 1.5rem | Reserva ahora | Lead grande. |
text-lead | 20px 1.25rem | Abierto miércoles a domingo | Lead standard. |
text-sub-lg | 22px 1.375rem | Una experiencia tai | Subtítulo grande. |
text-sub | 18px 1.125rem | Servido con arroz y ensalada | Subtítulo estándar. |
text-sub-sm | 15px 0.9375rem | Consulta horario | Subtítulo pequeño, metadata. |
text-body-lg | 18px 1.125rem | Pad Thai con tamarindo y maní tostado. | Body grande / lectura. |
text-body | 16px 1rem | Texto corrido de lectura en la mayoría de páginas. | Body por defecto. |
text-body-sm | 14px 0.875rem | Notas al pie, descripciones auxiliares. | Body pequeño. |
text-caption | 12px 0.75rem | PIE DE FOTO · 2026 | Captions, uppercase labels. |
Reglas de uso
Carga de fuentes
Las variantes viven en /fonts/:
| Archivo | Rol | Peso |
|---|---|---|
Rainier-Regular.otf | display, heading | 400 |
PendOreille-Regular.woff2 | lead | 400 |
OstiaAntica-Light.woff2 | subtitle, body | 300 |
OstiaAntica-LightItalic.woff2 | body italic | 300 italic |
PicNic-Regular.woff2 | legacy | 400 |
Todas con font-display: swap para evitar FOIT (flash of invisible text). El BaseLayout precarga PicNic Regular y Ostia Italic — al estabilizarse Rainier conviene rotar el preload a Rainier Regular y Ostia Light.
Fallbacks
--font-display: "Rainier", "Pend Oreille", sans-serif;
--font-heading: "Rainier", system-ui, sans-serif;
--font-lead: "Pend Oreille", cursive;
--font-subtitle: "Ostia Antica", Georgia, serif;
--font-body: "Ostia Antica", Georgia, serif;Mientras Rainier no cargue, el sistema muestra el siguiente fallback sin saltos bruscos — swap + fallback system-ui minimiza el CLS (cumulative layout shift).