Typography

Human uses a dual-typeface system: Avenir for interface text and Geist Mono for code. The type scale follows a modular progression optimized for readability at every size.

Typefaces

Avenir (UI Text)

Avenir Next is the primary typeface across all surfaces — web, iOS, Android, and documentation. It provides clean, geometric letterforms with excellent readability at small sizes.

Font stack: 'Avenir Next', 'Avenir', system-ui, -apple-system, sans-serif

Geist Mono (Code)

Geist Mono is used for code blocks, terminal output, and monospaced content. It features programming ligatures and clear distinction between similar characters (0/O, 1/l/I).

Font stack: 'Geist Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace

Type Scale

| Token | Size | Line Height | Weight | Usage | | ----------- | --------------- | :---------: | :----: | ---------------------------- | | text.xs | 12px (0.75rem) | 1.5 | 400 | Captions, badges, metadata | | text.sm | 14px (0.875rem) | 1.5 | 400 | Secondary text, table cells | | text.base | 16px (1rem) | 1.6 | 400 | Body text, form inputs | | text.lg | 18px (1.125rem) | 1.5 | 500 | Subtitles, emphasized body | | text.xl | 20px (1.25rem) | 1.4 | 600 | Card titles, section headers | | text.2xl | 24px (1.5rem) | 1.3 | 600 | Page section titles | | text.3xl | 30px (1.875rem) | 1.25 | 700 | Page titles | | text.4xl | 36px (2.25rem) | 1.2 | 700 | Hero subtitles | | text.5xl | 48px (3rem) | 1.1 | 700 | Hero headlines |

Font Weights

| Token | Value | Usage | | ----------------- | :---: | -------------------------- | | weight.regular | 400 | Body text, descriptions | | weight.medium | 500 | Emphasized body, labels | | weight.semibold | 600 | Titles, buttons, nav items | | weight.bold | 700 | Headlines, strong emphasis |

Letter Spacing (Tracking)

| Token | Value | Usage | | ----------------- | ---------- | ----------------------- | | tracking.tight | -0.025em | Headlines, display text | | tracking.normal | 0em | Body text | | tracking.wide | 0.05em | All-caps labels, badges |

Usage Roles

Headings

h1 {
  font-size: var(--hu-text-3xl);
  font-weight: var(--hu-weight-bold);
  letter-spacing: var(--hu-tracking-tight);
}
h2 {
  font-size: var(--hu-text-2xl);
  font-weight: var(--hu-weight-semibold);
}
h3 {
  font-size: var(--hu-text-xl);
  font-weight: var(--hu-weight-semibold);
}

Body

p {
  font-size: var(--hu-text-base);
  line-height: 1.6;
  color: var(--hu-text);
}
.secondary {
  font-size: var(--hu-text-sm);
  color: var(--hu-text-muted);
}

Code

code {
  font-family: var(--hu-font-mono);
  font-size: var(--hu-text-sm);
}
pre code {
  font-size: var(--hu-text-xs);
  line-height: 1.6;
}

Cross-Platform Mapping

| CSS Variable | Swift | Kotlin | C | | ---------------------- | ------------------------------- | ---------------------- | --------------- | | --hu-text-base | HUTokens.textBase | HUTokens.textBase | N/A (terminal) | | --hu-weight-semibold | .semibold | FontWeight.SemiBold | HU_COLOR_BOLD | | --hu-font-mono | Font.custom("GeistMono", ...) | FontFamily.Monospace | N/A |

Accessibility

• Minimum body text size is 16px (1rem) for comfortable reading
• Line heights are tuned per size — larger text uses tighter leading
• letter-spacing: var(--hu-tracking-wide) is applied to all-caps text for legibility
• Font weight never drops below 400 for body text