Typography
Two typefaces form the Earl typographic system: Funnel Display for impact and Geist for clarity.
Funnel Display
Used for all headings, display text, and navigation. Always at weight 800. The tight leading (1.04) is intentional. Honour it in headlines.
for elite sports
and stadia.
Geist
Used for all body copy, UI text, captions, and metadata. Use weights 300 (light body), 400 (regular), and 500 (medium emphasis) only.
Earl builds commercial channels that operate off-the-field, connecting sponsors and venues with fans through AI-driven intelligence. Weight 300
Earl builds commercial channels that operate off-the-field, connecting sponsors and venues with fans through AI-driven intelligence. Weight 400
Earl builds commercial channels that operate off-the-field, connecting sponsors and venues with fans through AI-driven intelligence. Weight 500
Type scale
All heading sizes use CSS clamp() for fluid scaling between viewport sizes.
| Tag | Size | Weight | Sample |
|---|---|---|---|
| h1 | clamp(40px, 8vw, 104px) | 800, Funnel Display | Headline |
| h2 | clamp(28px, 4vw, 54px) | 800, Funnel Display | Section |
| h3 | clamp(22px, 2.5vw, 32px) | 800, Funnel Display | Subsection |
| body | 16px | 300 to 400, Geist | Body copy text |
| small | 13px | 400 to 500, Geist | Captions and metadata |
| label | 11px | 500 to 600, Geist | CATEGORY TAG |