Two use cases
| Role | Print and PDF (read-only) | Digital (app, web, email, editable files) |
|---|---|---|
| Primary: headings | Avant Garde Demi BT; Avant Garde Demi Oblique BT when a heading needs to be oblique | Outfit 500 to 600, falling back to Arial |
| Secondary: body and UI | Figtree 400 to 800 | Figtree 400 to 800, falling back to Arial |
| Wordmark | Avant Garde Book BT, lowercase. Always the logo files, never live text. | |
| Fallback | None needed: fonts are embedded | Arial, only where Outfit or Figtree cannot load (some email clients, plain-text exports) |
Faces
Print and PDF headings · Avant Garde Demi BT
Every player can keep getting better, one note at a time.
Avant Garde Demi Oblique BT for emphasis
Licensed via Adobe Fonts. Embed in read-only documents only: PDFs, exported slides, print files, signage.
Digital headings · Outfit
Every player can keep getting better, one note at a time.
Headings at 600 across the scale, including the hero. Screen-hinted, tabular numerals, open license. Loaded from Google Fonts by styles.css. Falls back to Arial.
Body, print and digital · Figtree
Arpezia turns classic method books into a daily plan, listens while you play, and shows you how you’re growing. Weights 400 to 800.
The reading face in both use cases. Line height 1.5. One token, --font-body. Falls back to Arial on digital surfaces.
Wordmark · Avant Garde Book BT
arpezia
The wordmark is lowercase Avant Garde Book BT. Use the logo files; never set the name as live text.
Avant Garde licensing. Avant Garde Book BT, Demi BT, and Demi Oblique BT may be embedded as long as the document is read-only: PDFs, exported slides, print files. Do not ship the font files in the web app, the marketing site, email, or any editable file. Those surfaces use Outfit and Figtree with Arial as the fallback.
Scale
Sizes below are the digital scale. In print and PDF, headings swap Outfit for Avant Garde Demi BT at the same sizes; body stays Figtree.
| Role | Size / weight | Face (digital) | Where |
|---|---|---|---|
| Hero | 30 / 600, -.015em | Outfit | Simple mode Continue card; marketing 44 to 56 |
| H1 | 24 / 600 | Outfit | Page titles, with a 13px muted count |
| H2 | 22 / 600 | Outfit | Simple mode prompts |
| H3 | 17 / 600 | Outfit | Shelf headers |
| Card title | 15 to 16 / 600 | Outfit | Item cards |
| Body | 13 / 400, 1.5 | Figtree | Descriptions (14 to 16 on marketing) |
| Input | 14 / 400 | Figtree | Fields and selects |
| Meta | 12 / 400 | Figtree | Timestamps, counts |
| Kicker | 11 / 700, .1em, uppercase | Figtree | Eyebrows, facet headings, pills. 11px is the floor. |
Rules
DoSentence case everywhere. Uppercase only via
text-transform on kickers and pills.DoTabular numerals for anything that lines up: minutes, counts, prices.
DoGrade 4 to 5 reading level wherever a child might read.
Don'tGo below 11px, or use muted color on anything smaller than 12px regular.
Don'tUse em or en dashes. Use a colon, a comma, or a new sentence.
Don’tSet Outfit headings heavier than 600 without a stated reason, or below 500. Letterspace only kickers.
DoUse real accidentals (F♯3, B♭ trumpet), curly quotes, and the single ellipsis character. Outfit and Figtree carry all of them.
Loading
/* Digital */
<link rel="stylesheet" href="Design System/styles.css">
h1 { font-family: var(--font-heading); } /* Outfit, Arial */
body { font-family: var(--font-body); } /* Figtree, Arial */
/* Print and PDF (read-only output only) */
h1 { font-family: var(--font-brand-heading); } /* Avant Garde Demi BT */
em { font-family: var(--font-brand-heading-oblique); } /* Avant Garde Demi Oblique BT */