Tipografía y texto con Tailwind

Tipografía y texto con Tailwind

Un sistema tipográfico sólido es la base de cualquier interfaz de calidad. Tailwind incluye un sistema completo de utilidades para tamaño de fuente, peso, altura de línea, espaciado entre letras y mucho más. En esta lección aprenderás a construir jerarquías tipográficas profesionales.

Tamaño de fuente

Tailwind usa una escala tipográfica que va de xs a 9xl:

<p class="text-xs">12px / 0.75rem</p>
<p class="text-sm">14px / 0.875rem</p>
<p class="text-base">16px / 1rem — tamaño base</p>
<p class="text-lg">18px / 1.125rem</p>
<p class="text-xl">20px / 1.25rem</p>
<p class="text-2xl">24px / 1.5rem</p>
<p class="text-3xl">30px / 1.875rem</p>
<p class="text-4xl">36px / 2.25rem</p>
<p class="text-5xl">48px / 3rem</p>
<p class="text-6xl">60px / 3.75rem</p>
<p class="text-7xl">72px / 4.5rem</p>
<p class="text-8xl">96px / 6rem</p>
<p class="text-9xl">128px / 8rem</p>

Cada clase text-* también establece un line-height apropiado por defecto (1.5 para texto pequeño, reduciendo hacia 1 en tamaños muy grandes).

Peso de la fuente

<p class="font-thin">Peso 100 — muy delgado</p>
<p class="font-extralight">Peso 200</p>
<p class="font-light">Peso 300 — delgado</p>
<p class="font-normal">Peso 400 — normal</p>
<p class="font-medium">Peso 500 — ligeramente más grueso</p>
<p class="font-semibold">Peso 600 — seminegrita</p>
<p class="font-bold">Peso 700 — negrita</p>
<p class="font-extrabold">Peso 800 — muy negrita</p>
<p class="font-black">Peso 900 — ultra negrita</p>

Tip: variable fonts

Con fuentes variables como Inter, todos los pesos son un único archivo. Define la fuente con range de pesos en @font-face para soportar todos:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Rango completo */
  font-style: normal;
  font-display: swap;
}

Line-height (altura de línea)

<!-- Valores predefinidos -->
<p class="leading-none">1 — sin espacio extra</p>
<p class="leading-tight">1.25 — muy compacto</p>
<p class="leading-snug">1.375 — compacto</p>
<p class="leading-normal">1.5 — estándar</p>
<p class="leading-relaxed">1.625 — cómodo para párrafos largos</p>
<p class="leading-loose">2 — muy abierto</p>

<!-- Valores numéricos específicos -->
<p class="leading-3">0.75rem</p>
<p class="leading-4">1rem</p>
<p class="leading-6">1.5rem</p>
<p class="leading-8">2rem</p>

Cuándo usar cada uno

• leading-tight: encabezados grandes donde el espacio extra se ve mal
• leading-snug: títulos de tamaño mediano
• leading-normal: texto de UI (botones, labels, navegación)
• leading-relaxed: párrafos de artículos y contenido de lectura
• leading-loose: quotes, texto muy grande, situaciones especiales

<h1 class="text-6xl font-extrabold leading-tight">
  Título grande con leading tight
</h1>

<p class="text-base leading-relaxed text-gray-600">
  Párrafo de lectura con espacio óptimo para una experiencia
  cómoda al leer texto en bloques largos.
</p>

Letter-spacing (espaciado entre letras)

<p class="tracking-tighter">Muy compacto — -0.05em</p>
<p class="tracking-tight">Compacto — -0.025em</p>
<p class="tracking-normal">Normal — 0em</p>
<p class="tracking-wide">Amplio — 0.025em</p>
<p class="tracking-wider">Más amplio — 0.05em</p>
<p class="tracking-widest">Muy amplio — 0.1em</p>

Cuándo usar tracking

<!-- Títulos grandes se ven mejor con tracking-tight -->
<h1 class="text-7xl font-black tracking-tight">GRAN TÍTULO</h1>

<!-- Etiquetas y texto en mayúsculas necesitan tracking-wide o wider -->
<span class="text-xs font-semibold uppercase tracking-widest text-gray-500">
  Categoría
</span>

<!-- Subtítulos decorativos -->
<p class="text-sm uppercase tracking-wider text-blue-600 font-semibold">
  ¿Por qué elegirnos?
</p>

Alineación del texto

<p class="text-left">Alineado a la izquierda (default)</p>
<p class="text-center">Centrado</p>
<p class="text-right">Alineado a la derecha</p>
<p class="text-justify">Justificado — cuidado con el río tipográfico</p>
<p class="text-start">Inicio lógico (rtl-aware)</p>
<p class="text-end">Final lógico (rtl-aware)</p>

Decoración y transformación

<!-- Decoración de texto -->
<a class="underline decoration-blue-500 decoration-2">Enlace subrayado</a>
<p class="line-through text-gray-400">Precio antiguo tachado</p>
<p class="overline">Con sobrelineado</p>
<a class="no-underline">Sin subrayado</a>

<!-- Transformación -->
<p class="uppercase">TEXTO EN MAYÚSCULAS</p>
<p class="lowercase">texto en minúsculas</p>
<p class="capitalize">Primera Letra De Cada Palabra</p>
<p class="normal-case">Sin transformación</p>

<!-- Variante de texto -->
<p class="ordinal">1er, 2do...</p>
<p class="slashed-zero">Cero con barra: 0</p>

Overflow y truncado

<!-- Truncar en una línea -->
<p class="truncate max-w-xs">
  Este texto muy largo se truncará con puntos suspensivos al llegar al límite
</p>

<!-- Clamp en múltiples líneas -->
<p class="line-clamp-1">1 línea máximo</p>
<p class="line-clamp-2">2 líneas máximo</p>
<p class="line-clamp-3">3 líneas máximo</p>
<p class="line-clamp-4">4 líneas máximo</p>
<p class="line-clamp-none">Sin límite de líneas</p>

<!-- Wrap -->
<p class="whitespace-nowrap">No hace wrap — en una línea</p>
<p class="whitespace-pre">Respeta espacios y saltos de línea</p>
<p class="whitespace-pre-wrap">Respeta saltos pero hace wrap</p>
<p class="break-all">Corta palabras donde sea necesario</p>
<p class="break-words">Solo corta palabras largas si es necesario</p>
<p class="break-keep">No corte de palabras (idiomas CJK)</p>

Fuentes personalizadas con @theme y @font-face

/* styles.css */
@import "tailwindcss";

/* Cargar Google Fonts localmente para mejor rendimiento */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal italic;
  font-display: swap;
}

@theme {
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

<!-- Uso en HTML -->
<h1 class="font-display text-6xl font-bold italic">
  Título con fuente display
</h1>
<p class="font-sans text-base leading-relaxed">
  Párrafo con fuente sans-serif
</p>
<code class="font-mono text-sm bg-gray-100 px-2 py-0.5 rounded">
  const x = 42;
</code>

El plugin @tailwindcss/typography

Para contenido generado (markdown renderizado, artículos de CMS, documentación), el plugin @tailwindcss/typography es indispensable:

npm install @tailwindcss/typography

/* styles.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

<!-- Estiliza automáticamente todo el HTML dentro -->
<article class="prose prose-lg prose-gray max-w-none">
  <h1>Este H1 se estiliza automáticamente</h1>
  <p>Los párrafos tienen line-height y color apropiados.</p>
  <ul>
    <li>Las listas tienen bullet points bonitos</li>
    <li>Y spacing correcto</li>
  </ul>
  <pre><code>El código también se estiliza</code></pre>
  <blockquote>Las citas tienen borde lateral y estilo</blockquote>
</article>

<!-- Variantes de tamaño -->
<article class="prose prose-sm">    Más compacto</article>
<article class="prose prose-base">  Tamaño base</article>
<article class="prose prose-lg">    Grande (recomendado para artículos)</article>
<article class="prose prose-xl">    Extra grande</article>

<!-- Dark mode -->
<article class="prose dark:prose-invert">
  El texto se adapta automáticamente al modo oscuro
</article>

<!-- Colores personalizados del prose -->
<article class="prose prose-blue">
  Los enlaces y headings usan el azul de Tailwind
</article>

Jerarquía tipográfica completa: ejemplo de artículo

<main class="max-w-3xl mx-auto px-4 py-16">

  <!-- Meta información -->
  <div class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <span class="bg-blue-50 text-blue-700 font-medium px-3 py-1 rounded-full">
      Tailwind CSS
    </span>
    <span>•</span>
    <time>12 de enero de 2025</time>
    <span>•</span>
    <span>8 min de lectura</span>
  </div>

  <!-- Título principal -->
  <h1 class="text-5xl font-extrabold text-gray-900 leading-tight tracking-tight mb-6">
    Domina la tipografía con Tailwind CSS v4
  </h1>

  <!-- Subtítulo / descripción -->
  <p class="text-xl text-gray-600 leading-relaxed font-light mb-10 border-l-4 border-blue-500 pl-6">
    Un sistema tipográfico coherente marca la diferencia entre
    una interfaz amateur y una profesional.
  </p>

  <!-- Cuerpo del artículo -->
  <div class="prose prose-lg prose-gray max-w-none">
    <p>
      El primer párrafo del artículo con texto de lectura normal
      usando el plugin de typography para estilizado automático.
    </p>
    <h2>Sección del artículo</h2>
    <p>Más contenido del artículo...</p>
  </div>

</main>

Resumen

Las utilidades de tipografía más importantes son: text-{size} para tamaño, font-{weight} para peso, leading-{value} para altura de línea, tracking-{value} para espaciado entre letras, y line-clamp-{n} para truncado multilineal. Define tus fuentes personalizadas en @theme con --font-* y usa el plugin @tailwindcss/typography para contenido markdown o de CMS.