Tipografia (componentes)

FDS separa la semantica HTML de la apariencia visual. Los tags (h1, h2, p, blockquote, ul) siguen describiendo la estructura del contenido; las clases tipograficas (.display, .heading, .subheading, .text-*) deciden como se ve ese contenido dentro de una composicion.

Estas clases viven en components/typography.css y usan la escala fluida definida en theme/flowtitude.css. Si cambias los knobs de tipografia, todos los componentes se recalculan sin tocar el markup.

Que encapsula una clase

Cada clase tipografica agrupa varias decisiones que normalmente se repetirian en Tailwind:

La ventaja es que puedes escribir markup limpio y consistente sin recordar siempre la combinacion exacta de utilidades.

Sintaxis base

Usa el tag correcto para accesibilidad y aplica la clase que necesite la composicion:

<section>
  <div>
    <div class="content-flex top-left max-w-4xl">
      <span class="eyebrow">Sistema tipografico</span>
      <h1 class="display-sm">Un titulo heroico pero controlado</h1>
      <p class="text-large">
        Texto introductorio con mas presencia que el cuerpo normal.
      </p>
    </div>
  </div>
</section>

La clase no obliga al tag. Un h2 puede usar .display-sm si visualmente abre una seccion importante, y un h1 puede usar .heading si no es una pantalla hero.

<div class="content-flex top-left">
  <span class="eyebrow">Escala visual</span>
  <h1 class="display-sm">Display para momentos de maximo impacto</h1>
  <h2 class="heading">Heading para estructurar secciones</h2>
  <h3 class="subheading">Subheading como puente entre titulo y cuerpo</h3>
  <p class="text-large">
    Text large funciona bien como entradilla, resumen o parrafo destacado.
  </p>
  <p class="text-medium">
    Text medium es el cuerpo principal para composiciones manuales en Bricks,
    Gutenberg o HTML escrito a mano.
  </p>
  <p class="text-small">
    Text small queda para notas, metadatos y texto auxiliar.
  </p>
</div>

Aliases

Algunas clases tienen alias para que el markup sea mas natural:

<h1 class="display">Display principal</h1>
<h2 class="heading">Titulo de seccion</h2>
<h3 class="subheading">Subtitulo de apoyo</h3>

Display

Para textos hero y de maximo impacto visual:

Todas usan font-display, font-medium, leading-none, tracking-tight y text-balance.

Heading

Para titulos y estructura de contenido:

La diferencia principal con .display no es solo el tamano: .heading esta pensada para crear jerarquia repetible en una pagina, mientras que .display deberia reservarse para momentos de maxima atencion.

Subheading

Puente entre heading y cuerpo:

Usan font-semibold en lugar de font-medium.

text-pretty es mas apropiado aqui que text-balance porque los subtitulos suelen tener mas palabras. Ayuda a evitar lineas huerfanas sin forzar una composicion tan simetrica como la de los titulos.

Text

Para cuerpo de texto:

.text-medium aplica font-body, leading-normal y text-pretty. Es la clase mas segura para parrafos que forman parte de una composicion manual, por ejemplo una seccion de Bricks o Gutenberg construida bloque a bloque.

Prose en la capa base

.prose vive en base/typography.css, no en la capa de componentes. Su funcion es distinta: sirve para contenido editorial donde el HTML ya viene dado por un editor, CMS o WYSIWYG.

<article class="prose">
  <h1>Titulo del articulo</h1>
  <p>
    Un parrafo normal con <a href="#">un enlace</a> dentro del contenido.
  </p>
  <h2>Subtitulo</h2>
  <ul>
    <li>Elemento de lista</li>
    <li>Otro elemento de lista</li>
  </ul>
  <blockquote>Una cita destacada dentro del flujo editorial.</blockquote>
</article>

Dentro de .prose, FDS aplica estilos a los tags anidados:

<article class="prose">
  <h1>Contenido largo del editor</h1>
  <p>
    La clase prose se aplica al contenedor, no a cada etiqueta. FDS estiliza
    titulos, parrafos, listas, enlaces, citas y tablas dentro de ese flujo.
  </p>
  <h2>Cuando usar prose</h2>
  <p>
    Usala en articulos, entradas de blog, paginas legales, documentacion larga
    o cualquier contenido que llegue desde un editor visual.
  </p>
  <ul>
    <li>Respeta la semantica HTML original.</li>
    <li>Mantiene ritmo vertical consistente.</li>
    <li>Permite enlaces con hover editorial.</li>
  </ul>
  <blockquote>Las clases semanticas son para composicion; prose es para lectura larga.</blockquote>
</article>

Casos de uso

La pregunta clave es si estas disenando una composicion o dejando que un editor genere contenido. Para composicion, usa clases semanticas de componente. Para contenido largo, usa .prose.

Configurar la escala

Las clases de tipografia no tienen tamanos fijos propios: dependen de los tokens text-*. Por eso se ajustan desde theme/flowtitude.css:

--ft-text-min: 1rem;
--ft-text-max: 1.125rem;
--ft-type-step-min: 1.125;
--ft-type-step-max: 1.2;
--ft-text-factor: 1;

Despues de tocar un knob, revisa al menos tres contextos: un hero con .display, una card con .subheading-sm y un articulo .prose. Asi compruebas impacto, microjerarquia y lectura larga.

WordPress y Gutenberg

En una plantilla hecha a mano con Bricks, normalmente usaras clases como .heading, .text-large o .subheading-sm en los elementos concretos. En contenido que viene del editor de WordPress, lo mas estable es envolver el bloque en .prose y dejar que FDS estilice los tags.

FDS incluye ademas una regla fuera de @layer para neutralizar el subrayado global que Gutenberg aplica con a:where(:not(.wp-element-button)). Por eso los enlaces generales no quedan subrayados por defecto, mientras que .prose p > a:hover conserva el subrayado editorial al pasar el cursor.

Referencia completa

Ejemplo combinado

Este patron combina una cabecera disenada manualmente con un bloque editorial. La cabecera usa clases de componente; el contenido largo delega en .prose.

<main>
  <section>
    <div>
      <header class="content-flex top-left max-w-4xl">
        <span class="eyebrow">Guia</span>
        <h1 class="display-sm">Como usar la tipografia de FDS</h1>
        <p class="text-large">
          Las clases semanticas controlan la jerarquia visual sin romper la
          estructura HTML.
        </p>
      </header>

      <article class="prose max-w-3xl">
        <h2>Contenido editorial</h2>
        <p>
          En un articulo, una entrada de blog o una pagina legal, la clase
          prose evita tener que asignar clases a cada parrafo, enlace o lista.
        </p>
        <p>
          Si cambias los tokens fluidos, los tamanos basados en
          <code>text-*</code> se actualizan en todo el sistema.
        </p>
      </article>
    </div>
  </section>
</main>