09 · Contenido

Headings & Typography

h1–h6 existen para darle jerarquía semántica a un documento, no solo para que el texto se vea grande. Un lector de pantalla usa esos niveles para navegar la página como un índice.

h1 a h6: jerarquía semántica, no solo visual

El navegador les da un tamaño por defecto distinto, pero eso es solo estética. Lo importante es el orden: debería existir un solo h1 por página, y no saltar de h2 a h4 sin pasar por h3.

h1 · Título principal

h2 · Sección

h3 · Subsección

<h1>Título principal de la página</h1>
<h2>Sección</h2>
<h3>Subsección</h3>

→Nunca elijas un heading solo por cómo se ve. Si necesitas texto grande sin jerarquía semántica, usa un <p> o <span> con clases de tamaño.
→Los estilos por defecto del navegador casi nunca se usan tal cual — normalmente se sobreescriben con Tailwind (o se resetean con Preflight) y se define un sistema propio.

Escala de tamaños de texto

text-{tamaño} va desde text-xs hasta text-9xl. Cada salto de la escala no es lineal — está pensado para que las diferencias se perciban claramente.

text-xs

text-base

text-2xl

text-4xl

<p class="text-xs">text-xs</p>
<p class="text-base">text-base (default, 16px)</p>
<p class="text-2xl">text-2xl</p>
<p class="text-5xl">text-5xl</p>

Peso de fuente (font-weight)

font-{peso} controla el grosor del trazo: desde font-thin (100) hasta font-black (900). No toda tipografía trae todos los pesos disponibles.

font-light

font-normal

font-semibold

font-bold

<p class="font-light">font-light</p>
<p class="font-normal">font-normal</p>
<p class="font-semibold">font-semibold</p>
<p class="font-bold">font-bold</p>

Tracking (letter-spacing) y leading (line-height)

tracking-{valor} separa o junta las letras entre sí. leading-{valor} controla el alto de línea — clave para la legibilidad de párrafos largos.

tracking-tight

tracking-widest

Leading relaxed da más espacio entre líneas, útil en párrafos largos como este.

<h2 class="tracking-tight">Título apretado</h2>
<h2 class="tracking-wide">TÍTULO ESPACIADO</h2>
<p class="leading-relaxed">
  Un párrafo con más aire entre líneas se
  lee mejor cuando tiene varias líneas.
</p>

→tracking-tight suele usarse en titulares grandes (se ven más compactos y editoriales); tracking-wide funciona bien en textos cortos en mayúscula, como etiquetas o botones.

Color y opacidad de texto

text-{color}-{tono} sigue la misma paleta que backgrounds y bordes. Con /valor se controla la opacidad, muy usado para texto secundario (menos énfasis que un gris fijo).

Texto principal

Texto secundario

<p class="text-stone-900">Texto principal</p>
<p class="text-stone-900/60">Texto secundario (60% opacidad)</p>