Font Family Tokens — System, Brand, and Code Font Stacks

Font Family Token Design

Font family tokens define the typefaces used across your application. A well-structured font token system handles fallbacks gracefully and makes font changes trivial.

Core Font Categories

Most design systems need three font family tokens:

:root {
  --typography-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --typography-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --typography-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

System Font Stack

If you prefer system fonts for performance:

:root {
  --typography-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji';
}

Brand Font Tokens

For branded experiences, separate the brand font from its fallback chain:

{
  "typography": {
    "font-brand": "'Acme Corp Sans'",
    "font-brand-stack": "'Acme Corp Sans', 'Inter', sans-serif",
    "font-display": "'Playfair Display', serif"
  }
}

SCSS Variables

$typography-font-sans: 'Inter', sans-serif;
$typography-font-mono: 'JetBrains Mono', monospace;
$typography-font-display: 'Playfair Display', serif;

Font Loading Considerations

Font tokens should account for loading states. Use font-display: swap or optional in your @font-face declarations, and ensure your fallback fonts in the token stack have similar metrics to prevent layout shift.