Typography — FDS Docs

Display

Impacto máximo. Para heroes y títulos principales. Weight 500, line-height 1, letter-spacing -0.025em, text-wrap balance.

.display-lg text-9xl · clamp(3rem, 2.5rem + 2vw, 4.5rem)

Display Large

.display-md text-8xl · clamp(2.5rem, 2rem + 2vw, 3.75rem)

Display Medium

.display-sm text-7xl · clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem)

Display Small

HTML

<h1 class="display-lg">Display Large</h1>
<h1 class="display-md">Display Medium</h1>
<h1 class="display-sm">Display Small</h1>

<!-- .display es un alias de .display-lg -->
<h1 class="display">Display (alias de lg)</h1>

.display es un alias de .display-lg. Ambas clases producen exactamente el mismo resultado.

Heading

Títulos estructurales. El workhorse para la mayoría de secciones. Weight 500, text-wrap balance.

.heading-lg text-6xl · clamp(2rem, 1.6rem + 1.5vw, 2.75rem)

Heading Large

.heading-md text-5xl · clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem)

Heading Medium

.heading-sm text-4xl · clamp(1.5rem, 1.2rem + 1vw, 2rem)

Heading Small

HTML

<h2 class="heading-lg">Heading Large</h2>
<h2 class="heading-md">Heading Medium</h2>
<h2 class="heading-sm">Heading Small</h2>

<!-- .heading es un alias de .heading-md -->
<h2 class="heading">Heading (alias de md)</h2>

.heading es un alias de .heading-md. El tamaño medio es el mas versátil para la mayoría de secciones.

Subheading

Puente entre heading y contenido. Weight 600 (semibold), text-wrap pretty. Ideal para subtítulos, labels prominentes y encabezados de tarjetas.

.subheading-lg text-3xl · clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem)

Subheading Large

.subheading-md text-2xl · clamp(1.2rem, 1rem + 0.6vw, 1.5rem)

Subheading Medium

.subheading-sm text-xl · clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem)

Subheading Small

HTML

<h3 class="subheading-lg">Subheading Large</h3>
<h3 class="subheading-md">Subheading Medium</h3>
<h3 class="subheading-sm">Subheading Small</h3>

<!-- .subheading es un alias de .subheading-md -->
<h3 class="subheading">Subheading (alias de md)</h3>

.subheading es un alias de .subheading-md. Usa text-wrap pretty en lugar de balance para mejor resultado en textos mas largos.

Texto (cuerpo)

Clases para contenido de lectura. Tamaños fijos (no fluidos) con line-height y text-wrap optimizados para legibilidad.

.text-large 1.125rem · line-height: 1.375 · text-wrap: pretty

Un buen diseño es tan poco diseño como sea posible. Menos, pero mejor, porque se concentra en los aspectos esenciales. De vuelta a la pureza, de vuelta a la simplicidad.

.text-medium 1rem · line-height: 1.5 · text-wrap: pretty

Un buen diseño es tan poco diseño como sea posible. Menos, pero mejor, porque se concentra en los aspectos esenciales. De vuelta a la pureza, de vuelta a la simplicidad.

.text-small 0.875rem · line-height: 1.625

Un buen diseño es tan poco diseño como sea posible. Menos, pero mejor, porque se concentra en los aspectos esenciales. De vuelta a la pureza, de vuelta a la simplicidad.

HTML

<p class="text-large">Texto destacado para introducciones y leads...</p>
<p class="text-medium">Texto base para contenido general...</p>
<p class="text-small">Texto secundario, metadata o notas al pie...</p>

Implementación CSS

Todas las clases viven en components/typography.css dentro del layer components. Display y heading usan text-wrap: balance para distribuir líneas uniformemente; subheading y text usan text-wrap: pretty para evitar líneas huérfanas.

CSS components/typography.css

@layer components {

  /* ---- Display ---- */
  .display,
  .display-lg {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  }

  .display-md {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  }

  .display-sm {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  }

  /* ---- Heading ---- */
  .heading-lg {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  }

  .heading,
  .heading-md {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  }

  .heading-sm {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  }

  /* ---- Subheading ---- */
  .subheading-lg {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: pretty;
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  }

  .subheading,
  .subheading-md {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 600;
    line-height: 1;
    text-wrap: pretty;
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  }

  .subheading-sm {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-weight: 600;
    line-height: 1;
    text-wrap: pretty;
    font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem);
  }

  /* ---- Text (body) ---- */
  .text-large {
    font-size: 1.125rem;
    line-height: 1.375;
    text-wrap: pretty;
  }

  .text-medium {
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .text-small {
    font-size: 0.875rem;
    line-height: 1.625;
  }

}

Referencia de Escala

Referencia completa de las 12 clases tipográficas con sus alias, tamaños Tailwind equivalentes y uso recomendado.

Clase	Alias	TW Size	Weight	Uso
`.display-lg`	.display	text-9xl	500	Hero principal, máximo impacto
`.display-md`	--	text-8xl	500	Display estandar, equilibrio perfecto
`.display-sm`	--	text-7xl	500	Display contenido, impacto controlado
`.heading-lg`	--	text-6xl	500	Título de sección principal
`.heading-md`	.heading	text-5xl	500	Título de sección, el mas versátil
`.heading-sm`	--	text-4xl	500	Subdivisiones y títulos menores
`.subheading-lg`	--	text-3xl	600	Puente entre heading y contenido
`.subheading-md`	.subheading	text-2xl	600	Subtítulos, labels prominentes
`.subheading-sm`	--	text-xl	600	Encabezados de tarjetas, sutil
`.text-large`	--	text-lg	inherit	Introducciones, texto destacado
`.text-medium`	--	text-base	inherit	Contenido general, cuerpo de texto
`.text-small`	--	text-sm	inherit	Texto de apoyo, metadata