Typography

Cuppa's typography system ensures consistent text rendering across Web, iOS, and Android while respecting each platform's native conventions.

Font Families

Web

• Sans: System font stack (San Francisco, Segoe UI, Roboto)
• Mono: Monospace for code (JetBrains Mono, Menlo, Monaco)

iOS

• System: SF Pro (sans), SF Mono (monospace)
• Automatically uses SF Pro Display for large text

Android

• System: Roboto (sans), Roboto Mono (monospace)

Type Scale

| Token | Size | Line Height | Usage | |-------|------|-------------|-------| | xs | 12px / 0.75rem | 16px | Captions, labels | | sm | 14px / 0.875rem | 20px | Small text, metadata | | base | 16px / 1rem | 24px | Body text | | lg | 18px / 1.125rem | 28px | Lead paragraphs | | xl | 20px / 1.25rem | 28px | Large text | | 2xl | 24px / 1.5rem | 32px | Subheadings | | 3xl | 30px / 1.875rem | 36px | Headings | | 4xl | 36px / 2.25rem | 40px | Large headings |

Usage

Web

<h1 className="text-4xl font-bold">Heading</h1>
<p className="text-base">Body text</p>
<span className="text-sm text-muted-foreground">Caption</span>

iOS

Text("Heading")
  .font(.cuppa.heading1)

Text("Body text")
  .font(.cuppa.body)

Text("Caption")
  .font(.cuppa.caption)
  .foregroundColor(.secondary)

Android

Text(
  text = "Heading",
  style = CuppaTheme.typography.h1
)

Text(
  text = "Body text",
  style = CuppaTheme.typography.body
)

Text(
  text = "Caption",
  style = CuppaTheme.typography.caption
)

Font Weights

• Regular: 400 (normal)
• Medium: 500
• Semibold: 600
• Bold: 700

Best Practices

1. Use semantic text styles (heading1, body, caption) rather than raw sizes
2. Respect platform conventions (iOS prefers SF Pro, Android prefers Roboto)
3. Ensure minimum 16px/1rem for body text (accessibility)
4. Maintain 1.5 line height for readability