Typography
Seventeen Inter styles for headings, labels, and wrapping copy.
Intercompany agreements
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.
import '@commenda/pathfinder/styles.css';
import '@commenda/pathfinder/fonts.css';
export const SectionTitle = () => (
<h2 className="pf-txt-heading-20">Intercompany agreements</h2>
);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
- 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-numsfor tables and metrics. Typography recipes carry no color; use Soft Pearl 1000, 900 or 800 as appropriate.
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
Read Design principles for shared usage guidance and motion recipes.
Source: The System. Snapshot: 2026-10-12.