Display Fonts Pack
Three variable fonts for editorial, marketing, and publication contexts. Not for body text — these are display and accent typefaces.
| Type | Font pack (theme tokens only, no JS) |
|---|---|
| Theme CSS | packs/fonts-display.theme.css |
| Total weight | ~430KB (Latin subset, 6 woff2 files) |
Fonts Included
Fraunces — Display Serif
Has a mood axis: WONK (0–1) introduces deliberate irregularity, SOFT (0–100) controls stroke softness. Plus wght (100–900) and opsz (9–144). Assigns to --font-display.
Cormorant — Editorial Serif
Garamond-lineage with the deepest OpenType suite in this stack: swash alternates (swsh), historical ligatures (hist), real small caps (smcp), discretionary ligatures (dlig). Axes: wght (300–700). Assigns to --vb-font-editorial.
Caution: Do not use Cormorant below 1.5rem — it is fragile at small sizes.
Bodoni Moda — Dramatic Contrast
High stroke contrast with a wide opsz range (6–96) — opsz 6 and opsz 96 look like different typefaces. Axes: wght (400–900), opsz (6–96). Assigns to --vb-font-dramatic.
Loading
Token Assignments
| Token | Font | Fallback |
|---|---|---|
--font-display | Fraunces | var(--font-serif) |
--vb-font-editorial | Cormorant | var(--font-serif) |
--vb-font-dramatic | Bodoni Moda | var(--font-serif) |
Axis Properties
| Property | Default | Range | Effect |
|---|---|---|---|
--vb-fraunces-wonk | 0 | 0–1 | Glyph irregularity |
--vb-fraunces-soft | 0 | 0–100 | Stroke terminus softness |