# CHORUS Services Typography System

## Typography Philosophy

The CHORUS Services typography system draws inspiration from Apple's refined approach to type, emphasizing clarity, hierarchy, and sophisticated simplicity. The system prioritizes:

- **Legibility**: Optimized for technical content and enterprise applications
- **Scalability**: Responsive typography that works across all devices and contexts
- **Personality**: Balancing technical precision with human approachability
- **Performance**: Web-optimized fonts with fallback strategies

## Primary Typeface: SF Pro Display/Text

### Rationale
SF Pro (San Francisco) is Apple's system typeface, providing:
- **Technical Precision**: Designed for user interfaces and technical content
- **Global Readability**: Optimized for international audiences and accessibility
- **Modern Aesthetic**: Clean, contemporary appearance suitable for enterprise
- **Variable Font Technology**: Efficient loading and optical size optimization

### Font Family Stack
```css
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
```

### Fallback Strategy
1. **-apple-system**: Native system font on macOS/iOS
2. **BlinkMacSystemFont**: Native system font on Chrome/macOS
3. **SF Pro Display/Text**: Explicitly loaded Apple fonts
4. **Inter**: High-quality open-source alternative
5. **Segoe UI**: Windows system font
6. **Roboto**: Android system font
7. **Helvetica Neue**: Classic fallback
8. **Arial**: Universal fallback

## Typography Scale & Hierarchy

### Display Typography (Large Headlines)
Used for: Hero sections, major page titles, prominent callouts

#### Hero Display
- **Font**: Exo Thin (100)
- **Size**: `clamp(48px, 8vw, 84px)` (responsive scaling)
- **Line Height**: 1.0 (tight for impact)
- **Letter Spacing**: -0.02em (optical correction for large sizes)
- **Use Case**: Homepage hero, major section headers

#### Section Display  
- **Font**: Exo Thin (200)
- **Size**: `clamp(32px, 5vw, 48px)`
- **Line Height**: 1.1
- **Letter Spacing**: -0.015em
- **Use Case**: Section headers, page titles

#### Subsection Display
- **Font**: Roboto Flex (400)
- **Size**: `clamp(24px, 4vw, 36px)`
- **Line Height**: 1.2
- **Letter Spacing**: -0.01em
- **Use Case**: Component headers, card titles

### Body Typography (Content Reading)
Used for: Paragraphs, descriptions, documentation, UI text

#### Body Large
- **Font**: Roboto (400)
- **Size**: 18px
- **Line Height**: 1.6 (optimal for reading)
- **Letter Spacing**: 0 (neutral)
- **Use Case**: Important descriptions, feature explanations

#### Body Regular
- **Font**: Roboto Regular (400)  
- **Size**: 16px
- **Line Height**: 1.5
- **Letter Spacing**: 0
- **Use Case**: Standard body copy, most content

#### Body Small
- **Font**: Roboto Regular (400)
- **Size**: 14px
- **Line Height**: 1.4
- **Letter Spacing**: 0.005em (slightly loose for small text)
- **Use Case**: Captions, metadata, helper text

### Interface Typography (UI Elements)
Used for: Buttons, navigation, forms, labels

#### Button Text
- **Font**: Roboto Semibold (600)
- **Size**: 16px (large buttons), 14px (regular buttons)
- **Line Height**: 1.0 (tight for buttons)
- **Letter Spacing**: 0.01em
- **Transform**: None (sentence case preferred)

#### Navigation
- **Font**: Roboto Medium (500)
- **Size**: 16px
- **Line Height**: 1.0
- **Letter Spacing**: 0.005em
- **Use Case**: Header navigation, sidebar menus

#### Labels
- **Font**: Roboto Medium (500)
- **Size**: 14px
- **Line Height**: 1.2
- **Letter Spacing**: 0.01em
- **Transform**: None
- **Use Case**: Form labels, section labels

### Technical Typography (Code & Data)
Used for: Code blocks, API documentation, technical specifications

#### Code Primary
- **Font**: SF Mono, 'Monaco', 'Inconsolata', 'Fira Code', monospace
- **Size**: 14px
- **Line Height**: 1.4
- **Letter Spacing**: 0
- **Use Case**: Code blocks, API examples

#### Code Inline
- **Font**: SF Mono, monospace
- **Size**: 90% of parent text size
- **Padding**: 2px 4px
- **Background**: Subtle background color
- **Border Radius**: 3px
- **Use Case**: Inline code references

## Color Applications

### Dark Mode Typography
Following the established color system:

#### Primary Text
- **Color**: `#F2F2F7` (Natural Paper)
- **Usage**: Headlines, primary body copy
- **Contrast Ratio**: 19.96:1 on black backgrounds

#### Secondary Text  
- **Color**: `#A1A1A6` (Light Gray)
- **Usage**: Descriptions, supporting content
- **Contrast Ratio**: 6.64:1 on black backgrounds

#### Tertiary Text
- **Color**: `#6D6D73` (Medium Gray)
- **Usage**: Captions, metadata, disabled text
- **Contrast Ratio**: 4.51:1 on black backgrounds

#### Interactive Text
- **Color**: `#007AFF` (Orchestration Blue)
- **Usage**: Links, interactive elements
- **Contrast Ratio**: 8.59:1 on black backgrounds

### Light Mode Typography

#### Primary Text
- **Color**: `#1A1A1A` (Dark Charcoal)
- **Usage**: Headlines, primary body copy
- **Contrast Ratio**: 18.2:1 on Natural Paper background

#### Secondary Text
- **Color**: `#6D6D73` (Medium Gray)
- **Usage**: Descriptions, supporting content
- **Contrast Ratio**: 7.8:1 on Natural Paper background

#### Tertiary Text
- **Color**: `#A1A1A6` (Light Gray)
- **Usage**: Captions, metadata
- **Contrast Ratio**: 4.6:1 on Natural Paper background

#### Interactive Text
- **Color**: `#007AFF` (Orchestration Blue)
- **Usage**: Links, interactive elements
- **Contrast Ratio**: 4.5:1 on white backgrounds

## Responsive Typography Implementation

### CSS Custom Properties
```css
:root {
  /* Font Families */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  
  /* Responsive Sizes */
  --text-hero: clamp(48px, 8vw, 84px);
  --text-display-1: clamp(32px, 5vw, 48px);
  --text-display-2: clamp(24px, 4vw, 36px);
  --text-body-large: 18px;
  --text-body: 16px;
  --text-body-small: 14px;
  --text-code: 14px;
  
  /* Line Heights */
  --leading-tight: 1.0;
  --leading-snug: 1.1;
  --leading-normal: 1.2;
  --leading-relaxed: 1.4;
  --leading-loose: 1.5;
  --leading-reading: 1.6;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.005em;
  --tracking-wider: 0.01em;
}
```

### Utility Classes
```css
/* Display Typography */
.text-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display-1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

/* Body Typography */
.text-body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-normal);
}

/* Technical Typography */
.text-code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}
```

## Accessibility Guidelines

### Contrast Requirements
- **Normal Text**: Minimum 4.5:1 contrast ratio
- **Large Text** (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
- **Interactive Elements**: Clear focus indicators with proper contrast

### Reading Considerations
- **Line Length**: 45-75 characters for optimal readability
- **Line Height**: Minimum 1.4 for body text, 1.5 preferred for long-form content
- **Font Size**: Minimum 14px for body text, 16px preferred
- **Responsive Scaling**: Text scales appropriately across all device sizes

### Motion Sensitivity
- **Reduced Motion**: Respect user preferences for reduced animations
- **Font Loading**: Use font-display: swap for better performance
- **Fallback Fonts**: Ensure similar metrics to prevent layout shift

## Implementation Guidelines

### Font Loading Strategy
```css
/* Optimal font loading */
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/sf-pro-display.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('fonts/sf-pro-text.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
```

### Performance Optimization
- **Subsetting**: Include only required character sets
- **Preloading**: Preload critical font files
- **WOFF2 Format**: Use modern compression for smaller file sizes
- **Variable Fonts**: Utilize variable font technology when available

### Brand Consistency
- **Logo Typography**: Custom modifications to SF Pro Display for logo lockup
- **Hierarchy Consistency**: Maintain consistent size relationships across all applications
- **Color Pairing**: Always pair typography colors with appropriate background colors
- **Context Adaptation**: Adjust typography choices based on content context and user needs

This typography system provides CHORUS Services with a professional, accessible, and scalable foundation that supports both technical content and marketing communications while maintaining the Apple-inspired aesthetic that aligns with the platform's premium positioning.