Typography Tokens

[!TIP] For machine-parseable token values, see tokens.json.

Font Loading (Adobe Fonts / Typekit)

All Adelle fonts are licensed via Adobe Creative Cloud and delivered through Adobe Fonts (Typekit).

The kit provides @font-face declarations for each family. When Adobe Fonts are unavailable (offline, blocked, slow connection), the CSS font stack falls through to Inter and then system fonts.

Fonts in Kit

The kit also includes adelle-sans-condensed, adelle-mono-flex, adelle-sans-ultra-thin, and adelle-ultrathin, but these are not assigned roles in the design system.

Font Families

Fallback Stacks

--font-sans:    "adelle-sans", var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--font-mono:    "adelle-mono", ui-monospace, monospace;
--font-display: "adelle-condensed", ui-sans-serif, sans-serif;
--font-serif:   "adelle", Georgia, "Times New Roman", serif;

Font Family Variants (Adelle Sans)

• Adelle_Sans:Regular - Body text
• Adelle_Sans:Semibold - Labels, small text emphasis
• Adelle_Sans:Bold - Headings (H1–H4), buttons
• Adelle_Sans:Extrabold - Available

Font Family Variants (Adelle Mono)

• Adelle_Mono:Regular - Code blocks
• Adelle_Mono:Bold - Code emphasis

Font Family Variants (Adelle — Serif)

• Adelle:Regular - Available, no assigned role
• Adelle:Bold - Available, no assigned role

Font Family Variants (Adelle Condensed)

• Adelle_Condensed:Light (300) - Available
• Adelle_Condensed:Regular (400) - Available
• Adelle_Condensed:Semibold (600) - Available
• Adelle_Condensed:Bold (700) - Available
• Adelle_Condensed:Extrabold (800) - Available

Font Sizes

Font Weights

[!NOTE] medium and semibold both resolve to 600 because Adelle Sans has no true 500 weight (the family jumps from 400 to 600). Both tokens are kept for semantic differentiation: medium for labels and lighter emphasis, semibold for buttons and headings. If the typeface is ever swapped for one with a native 500, medium can be remapped without changing component usage.

Typography Scale (Heading Hierarchy)

Additional Typography Styles

H2 Special Styling

H2 headings include a bottom border for visual separation:

• Border: border-b border-border
• Padding: pb-2 (8px bottom padding)

Code Typography

Inline Code Styling

• Background: bg-muted
• Border radius: rounded-sm (6px)
• Padding: ~5px horizontal, ~3px vertical

Code Block Styling

• Background: bg-zinc-900 (dark theme)
• Border: border border-border
• Border radius: rounded-lg (10px)
• Padding: p-4 (16px)

Tailwind Configuration

// tailwind.config.js (Tailwind v4 uses @theme in globals.css instead)
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Adelle Sans', 'sans-serif'],
      mono: ['Adelle Mono', 'monospace'],
      display: ['Adelle Condensed', 'sans-serif'],
      serif: ['Adelle', 'Georgia', 'serif'],
    },
    fontSize: {
      xs: ['12px', { lineHeight: '16px' }],
      sm: ['14px', { lineHeight: '20px' }],
      base: ['16px', { lineHeight: '24px' }],
      lg: ['18px', { lineHeight: '28px' }],
      xl: ['20px', { lineHeight: '28px' }],
      '2xl': ['24px', { lineHeight: '32px' }],
      '3xl': ['30px', { lineHeight: '36px' }],
      '4xl': ['36px', { lineHeight: '40px' }],
      '5xl': ['48px', { lineHeight: '48px' }],
    },
    fontWeight: {
      normal: '400',
      medium: '600',
      semibold: '600',
      bold: '700',
      extrabold: '800',
    },
  },
}

CSS Custom Properties

:root {
  /* Font Families */
  --font-sans: 'adelle-sans', var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'adelle-mono', ui-monospace, monospace;
  --font-display: 'adelle-condensed', ui-sans-serif, sans-serif;
  --font-serif: 'adelle', Georgia, 'Times New Roman', serif;
  
  /* Font Sizes */
  --text-xs-font-size: 12px;
  --text-sm-font-size: 14px;
  --text-base-font-size: 16px;
  --text-lg-font-size: 18px;
  --text-xl-font-size: 20px;
  --text-2xl-font-size: 24px;
  --text-3xl-font-size: 30px;
  --text-4xl-font-size: 36px;
  --text-5xl-font-size: 48px;
  
  /* Line Heights */
  --text-xs-line-height: 16px;
  --text-sm-line-height: 20px;
  --text-base-line-height: 24px;
  --text-lg-line-height: 28px;
  --text-xl-line-height: 28px;
  --text-2xl-line-height: 32px;
  --text-3xl-line-height: 36px;
  --text-4xl-line-height: 40px;
  --text-5xl-line-height: 48px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

See Also

• Related Tokens:
  • Spacing - Text spacing and line heights
  • Colors - Text colors (foreground, muted-foreground)
• Design System:
  • Themes - Multi-theme system overview

Last updated: March 9, 2026