Typography

One fluid type scale, exposed through two components: Heading for display/heading sizes, Text for body copy. Both read token-backed Tailwind utilities — no hard-coded font sizes in markup.

Type scale

--text-display and --text-h1 … --text-h6 are clamp() values (min at a ~320px viewport, max at ~1440px), each paired with its own --*--line-height. Tailwind’s --text-* namespace turns them into utilities (text-display, text-h1 … text-h6) with the line-height applied automatically.

No breakpoint jumps — each size interpolates smoothly between the two anchors.

Heading

as sets the semantic tag (h1–h6, or p/div); size sets the visual size independently, defaulting to as when it’s a heading. Keep heading order correct for accessibility even when the visual size differs from the level.

The demo below uses as="div" for every step so the page doesn’t end up with seven <h1>s — in real content, as should match your outline.

<Heading as="div" size="display">Display</Heading>
<Heading as="div" size="h1">Heading 1</Heading>
<Heading as="div" size="h2">Heading 2</Heading>
<Heading as="div" size="h3">Heading 3</Heading>
<Heading as="div" size="h4">Heading 4</Heading>
<Heading as="div" size="h5">Heading 5</Heading>
<Heading as="div" size="h6">Heading 6</Heading>

Every Heading also gets text-balance and tracking-tight.

Text

Body copy. Unlike Heading, Text sizes (small / medium / large, default medium) are Tailwind’s own static scale, not the fluid tokens above — body text doesn’t need to fluid-resize the way display copy does. leading-relaxed by default; color="neutral-faded" switches to the secondary text colour.

<Text>Default body copy.</Text>
<Text size="small" color="neutral-faded">Secondary, smaller copy.</Text>

Font stack

theme.css defines three font tokens in @theme, defaulting to the platform system stacks (so text looks native out of the box):

To brand the type, override --font-sans (or --font-mono) in your own @theme block — same one-place pattern as the color tokens, no component changes:

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

Prose

Heading and Text style elements you control one at a time. Prose is for the opposite case — a block of rich or CMS HTML you don’t touch element-by-element (set:html={article.body} or Markdown output). It’s a scoped, token-driven .apogee-prose stylesheet (escape-hatch CSS, since Tailwind utilities can’t reach injected HTML) covering headings, links, lists, blockquotes, code, and <hr>.

<Prose>
<h2>Release notes</h2>
<p>Body copy with a <a href="#">link</a> and <strong>bold</strong> text.</p>
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
</Prose>

<Prose set:html={article.body} />

Tabular numbers

Any component whose job is to show numbers that line up — tables, pagination, stats, prices, counts, timers — should use tabular-nums so digits share a fixed width and don’t jitter as they change.

<span class="tabular-nums">1,204</span>

This is a plain Tailwind utility, not a token — add it directly wherever digits need to align.