Tipografía

Tipografía fluida generada con clamp(): escala automática entre viewport mínimo y máximo, sin media queries.

Cómo funciona la escala

La escala tipográfica se genera a partir de cuatro knobs:

:root {
  --ft-text-min: 1rem;         /* 16px en viewport mínimo (410px) */
  --ft-text-max: 1.125rem;     /* 18px en viewport máximo (1280px) */
  --ft-type-step-min: 1.125;   /* ratio en móvil */
  --ft-type-step-max: 1.2;     /* ratio en desktop */
}

De esos cuatro valores, FDS deriva toda la escala: --text-xs a --text-9xl, cada uno con su clamp() propio.

--text-base → clamp(1rem, fluid, 1.125rem)
--text-lg   → --text-base * --ft-type-step
--text-xl   → --text-lg   * --ft-type-step
/* ... hasta --text-9xl */

El resultado: text-2xl en 410 px no es lo mismo que en 1280 px, pero no hay un salto brusco en ningún breakpoint.

Escala disponible

Token	Uso típico
`text-xs`	Labels, metadatos
`text-sm`	Texto secundario
`text-base`	Cuerpo de texto
`text-lg`	Texto destacado
`text-xl`	Subtítulos pequeños
`text-2xl`	Subtítulos
`text-3xl`–`text-4xl`	Títulos secundarios
`text-5xl`–`text-6xl`	Títulos principales
`text-7xl`–`text-9xl`	Displays y heroes

Clases tipográficas semánticas

FDS añade clases con intención visual, independientes del elemento HTML:

<h1 class="display">Hero de impacto máximo</h1>
<h1 class="display-lg">Display grande</h1>
<h2 class="heading">Título de sección</h2>
<h3 class="subheading">Subtítulo</h3>
<p class="text-large">Lead o párrafo destacado</p>
<p class="text-medium">Cuerpo estándar</p>
<small class="text-small">Nota o pie</small>

Tabla completa:

Clase	Escala base	Uso
`.display`	`text-9xl`	Hero de máximo impacto
`.display-lg`	`text-9xl`	Display grande
`.display-md`	`text-8xl`	Display estándar
`.display-sm`	`text-7xl`	Display controlado
`.display-single`	`text-7xl`	Display de una línea
`.heading-lg`	`text-6xl`	Título principal
`.heading`	`text-5xl`	Título de sección
`.heading-md`	`text-5xl`	Título medio
`.heading-sm`	`text-4xl`	Subdivisión
`.subheading-lg`	`text-3xl`	Subtítulo grande
`.subheading`	`text-2xl`	Subtítulo estándar
`.subheading-sm`	`text-xl`	Subtítulo pequeño
`.text-large`	`text-lg`	Lead o párrafo destacado
`.text-medium`	`text-base`	Cuerpo estándar
`.text-small`	`text-sm`	Notas, pies, metadatos

Familias tipográficas

FDS no impone una familia concreta. Declara tus fuentes en el @theme del proyecto:

@theme {
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

Preflight compatible

FDS convive con el preflight de Tailwind. Los estilos de h1–h6 y .prose del layer base aplican la tipografía fluida por defecto, pero nunca contradicen al preflight.

Responsive sin media queries

Ajustar el ratio:

:root {
  --ft-type-step-min: 1.15;   /* más agresivo en móvil */
  --ft-type-step-max: 1.25;   /* más impacto en desktop */
}

Un único cambio y toda la escala tipográfica se recalibra.