# Typography

Graphite Light uses Apple system fonts with Inter and system fallbacks. Presets can change font roles and type metrics without changing component code.

<h2 id="purpose">Type roles</h2>

Six heading roles carry structure. Two body roles carry interface and general body text. Caption, eyebrow, and mono carry supporting or technical labels.

Heading roles have desktop, tablet, and phone recipes at the 1024 and 640 px boundaries. Fixed roles keep one recipe across viewports.

<h2 id="anatomy">Families</h2>

The system has five font roles. `--bd-font-sans` serves UI labels and small headings. `--bd-font-display` serves display headings. `--bd-font-text` serves body and body-md. `--bd-font-prose` serves authored prose. `--bd-font-mono` serves technical values.

`--bd-font-prose` falls back to `--bd-font-text`. The four public themes keep the same sans and mono font stacks. Blueprint presets change type metrics and geometry without changing those families.

<h2 id="usage">Applying a role</h2>

The utility stylesheet exposes `.bd-h1` through `.bd-h6`, `.bd-body-md`, `.bd-body`, `.bd-caption`, `.bd-eyebrow`, and `.bd-mono`. Apply the class that matches the role. Choose the heading element from the document outline, not from its visual size.

For authored content, `.bd-prose` maps H2 and H3 to responsive H4 and H5 metrics. Paragraphs, list items, and blockquotes use Body metrics with `--bd-font-prose`. Table cells use Caption, table headers use Eyebrow, and code uses Mono. The utility does not set margins or colors.

<h2 id="details">Scale</h2>

Graphite Light and Graphite Dark use 72, 52, 38, 28, 22, and 18 px desktop heading sizes. Blueprint Light and Blueprint Dark use 88, 64, 44, 32, 24, and 20 px through the same semantic roles.

At widths below 1024 and 640 px, each heading changes to its tablet and phone recipe. Each role also owns weight, tracking, and line height.

<h2 id="accessibility">Reading comfort</h2>

Keep the heading level tied to structure, not to size. Reserve uppercase for short eyebrows and badges. Keep authored prose within the `--bd-measure-prose` reading measure.

<h2 id="tokens">Tokens</h2>

`BD_TOKENS.font` holds four default stacks. `bdBuildCssVars()` adds the fifth `prose` role with a fallback to `text`. `BD_TOKENS.type` owns Graphite Light's default metrics.

`BDThemeOverrides.font` can replace any font role. `BDThemeOverrides.type` can replace family assignments and metrics. Components read generated `--bd-font-*` and `--bd-type-*` variables.

<h2 id="related">Related</h2>

See [Eyebrow](/docs/components/eyebrow) for the uppercase label, [Section](/docs/components/section) for heading and description framing, and [CodeBlock](/docs/components/code-block) for monospace output.