Typography

Display Typeface: Clash Grotesk

Usage: Headlines, hero text, logo, key messaging, section headers

• Weights Available: Light (300), Regular (400), Medium (500), Semibold (600), Bold (700)

• Characteristics: Modern, distinctive, confident personality with excellent readability

• Fallback: "Clash Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

• Loading: Use CSS font-display: swap for optimal performance

Body Typeface: Inter

Usage: Body text, UI elements, forms, captions, long-form content

• Weights Available: Regular (400), Medium (500), Semibold (600)

• Characteristics: Highly optimized for reading, excellent screen performance

• Fallback: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

• Why Inter for body: Superior reading experience for longer content, better performance

Typography Scale

• H1 (Hero): 48px / 52px line height, Clash Grotesk Semibold

• H2 (Section): 36px / 40px line height, Clash Grotesk Semibold

• H3 (Subsection): 28px / 32px line height, Clash Grotesk Medium

• H4 (Component): 20px / 24px line height, Clash Grotesk Medium

• Body Large: 18px / 28px line height, Inter Regular

• Body: 16px / 24px line height, Inter Regular

• Body Small: 14px / 20px line height, Inter Regular

• Caption: 12px / 16px line height, Inter Medium

Typography Pairing Strategy

Clash Grotesk for Impact → Headlines, key messages, navigation, buttons Inter for Readability → Body text, descriptions, forms, data tables