Typography is the voice of your application interface. In designing Maple, we knew that long blocks of high-contrast text render professional workspaces stressful and heavy. We sought to build an interface that matches the calm feeling of an elegant book, without compromising the clean clarity of a digital HUD.
Our font pairing consists of two beautifully distinct typefaces: Inter and Cormorant Garamond. Inter serves as our functional anchor, providing high legibility for metadata, lists, input panels, and commands. Cormorant Garamond represents our editorial soul—an elegant serif displaying long-form summaries, pull quotes, and title headings.
The Cognitive Impact of Fluid Sizing
Rather than using fixed pixel values which force rigid breakpoints, Maple leverages fluid typography. Using custom CSS clamp() functions, text scales smoothly from standard mobile layouts up to massive high-DPI desktop setups, avoiding line-length wrapping issues.
| Scale Class | Font Stack Used | Sizing clamp Rule | Usage Scenario |
|---|---|---|---|
| HUD Heading | Cormorant Garamond | clamp(32px, 5vw, 48px) |
Main HUD questions & thought maps |
| Standard prose | Inter Sans | clamp(15px, 1.8vw, 17px) |
Journal summaries and chat logs |
| UI Metadata | Inter Sans (Semibold) | clamp(11px, 1.2vw, 13px) |
Tags, timestamps, shortcuts |
Typographic CSS Layout
/* Responsive typography scaling via CSS math */
h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 6vw, 56px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
}
.body-text {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.8;
color: var(--text-secondary);
}