# Typography

Package: @commenda/pathfinder@0.1.0
Page: /docs/foundations/typography

<TypographyPlayground />

## Use a complete text style [#use-a-complete-text-style]

`pf-txt-heading-24` includes font family, size, line height, weight and tracking. All 17 classes ship in the finished stylesheet, even when the consuming application has no Tailwind installation. Text color and HTML semantics remain the caller's choice.

```tsx
import '@commenda/pathfinder/styles.css';
import '@commenda/pathfinder/fonts.css';

export const SectionTitle = () => (
  <h2 className="pf-txt-heading-20">Intercompany agreements</h2>
);
```

## Styles [#styles]

Sizes below are rem relative to the root font. Multiply by 16 for the Figma baseline in pixels. Tracking is em: Figma's −2% becomes −0.02em, not −2px.

| Class                    | Size      | Line height | Weight | Tracking |
| ------------------------ | --------- | ----------- | ------ | -------- |
| `pf-txt-heading-32`      | 2rem      | 2.5rem      | 600    | -0.02em  |
| `pf-txt-heading-24`      | 1.5rem    | 2rem        | 600    | -0.02em  |
| `pf-txt-heading-20`      | 1.25rem   | 1.75rem     | 600    | -0.015em |
| `pf-txt-heading-18`      | 1.125rem  | 1.625rem    | 600    | -0.015em |
| `pf-txt-heading-15`      | 0.9375rem | 1.375rem    | 600    | -0.01em  |
| `pf-txt-label-15`        | 0.9375rem | 1.25rem     | 400    | -0.01em  |
| `pf-txt-label-15-strong` | 0.9375rem | 1.25rem     | 500    | -0.01em  |
| `pf-txt-label-13`        | 0.8125rem | 1rem        | 400    | 0em      |
| `pf-txt-label-13-strong` | 0.8125rem | 1rem        | 500    | 0em      |
| `pf-txt-label-12`        | 0.75rem   | 1rem        | 400    | 0em      |
| `pf-txt-label-12-strong` | 0.75rem   | 1rem        | 500    | 0em      |
| `pf-txt-copy-15`         | 0.9375rem | 1.5rem      | 400    | -0.01em  |
| `pf-txt-copy-15-strong`  | 0.9375rem | 1.5rem      | 600    | -0.01em  |
| `pf-txt-copy-13`         | 0.8125rem | 1.25rem     | 400    | 0em      |
| `pf-txt-copy-13-strong`  | 0.8125rem | 1.25rem     | 600    | 0em      |
| `pf-txt-copy-12`         | 0.75rem   | 1.125rem    | 400    | 0em      |
| `pf-txt-copy-12-strong`  | 0.75rem   | 1.125rem    | 600    | 0em      |

## Roles and accessibility [#roles-and-accessibility]

- Heading introduces a page or section. Choose h1–h6 by document structure, never font size. Heading/24 is the page title; Heading/32 is for metric values or an empty-state headline.
- Label is compact UI text. Label Strong is 500, including button labels. The recipe does not force nowrap: controls must still support long labels and enlarged text.
- Copy is wrapping prose. Copy Strong is 600 for emphasis. Use Copy/15 for chat or dialog body; Copy/13 for descriptions; Copy/12 for helper text.
- Use `pf-tabular-nums` for tables and metrics. Typography recipes carry no color; use Soft Pearl 1000, 900 or 800 as appropriate.

## Font delivery [#font-delivery]

`fonts.css` loads locally packaged Inter Variable wght normal fonts with `font-display: swap`. It makes no request to Google or Figma. Unicode subsets cover Inter's Latin, Latin extended, Vietnamese, Greek and Cyrillic coverage; other scripts use system fallback fonts. Font files and the SIL license ship in the package.

If your application already loads Inter, omit `fonts.css` and supply `--font-inter` from your existing loader on the root. The family falls back to Inter and system sans-serif. Merely importing `styles.css` does not download a font. Only normal fonts are bundled; product styles use weights 400, 500 and 600.

## Design guidance [#design-guidance]

Read [Design principles](/docs/foundations/design-rules) for shared usage guidance and motion recipes.

Source: [The System](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System). Snapshot: 2026-10-12.