Northcote Typography Strategy: Maximum Expressive Playful

Overview

Transforms Northcote Curio typography from static "Victorian" constraints into a dynamic, living system.

We achieve "Extreme Variability" not by adding more fonts, but by aggressively manipulating the axes of three core Variable types. This aligns with M3 Expressive guidance: One for Reading, One for Shouting, One for Character.

The Core Trinity (Magic Number 3)

1. Primary "Workhorse" (Body & UI)

Role: High-readability, functional backbone. Font: Lora Variable (or Crimson Pro Variable if available). M3 Category: Baseline. Playfulness Strategy:

• Layout-Safe Hover: Use the Grade (GRAD) axis for hover states.
  • Why? Increases visual weight without changing character width. No layout shift.
  • Effect: Text comfortably "swells" when touched.

2. Secondary "Expressive" (Display & Headlines)

Role: The "Victorian Voice". Extreme variability and personality. Font: Fraunces Variable (The Northcote Crown Jewel). M3 Category: Emphasized. Playfulness Strategy:

• Softness (SOFT): Animate from sharp (0) to soft (100) on scroll or mood shift.
• Wonk (WONK): The "Victorian Hand" axis. Increase WONK for "human" irregularity in headers.
• Optical Size (opsz): Mandatory. Auto-scale details. Small = legible; Large = high-contrast elegance.
• Motion: Map wdth (Width) to scroll position. Headers "breathe" (expand/compress) as they enter the viewport.

3. Tertiary "Accent" (Flourish & Special)

Role: High-impact, "alive" brand moments. Options:

• Option A (Victorian Hand): Variable Script (e.g., Birthstone Bounce or Petit Formal).
  • Effect: Authentic 19th-century penmanship.
• Option B (Cyberpunk): COLRv1 Color Fonts (e.g., Nabla). * Effect: Modern, digital-native flourish. M3 Category: Accent/Decor. Playfulness Strategy:

• The "Dramatic Juxtaposition": Pair ultra-clean Sans/Serif with unexpected "Wild Cursive" headers.
• Palette Switching: Use CSS @font-palette-values to instantly re-theme flourishes from "Sepia/Ink" (Day) to "Neon/Gaslight" (Night).
• Depth Animation: Animate internal COLRv1 axes (like shadow depth or highlight position) on user interaction.

The "Dramatic Juxtaposition" Strategy

How to mix Cursive with Clean for "Maximum Playfulness".

1. The "Check signature": Use Birthstone Bounce (Variable) for specific metadata (e.g., "Verified by Claude") against a strict grid of Lora.
   • Why? It feels like a human signing a machine-generated document.
2. The "Interrupting Thought": Use Script font for <aside> notes that break the layout grid.
   • Why? Visualizes the "Author's Voice" interrupting the "System's Data".
3. Motion: Animate the wght (Weight) of the script font on scroll to simulate "ink drying" or pressure applied to the page.

Variable Axis Strategy (The "How-To")

1. The Registered Axes (Standard)

2. The Custom Axes (Playful/Victorian)

Technical Implementation Patterns

Pattern 1: Layout-Safe "Breathing" Button

Standard boldness shifts break layouts. Grade (GRAD) does not.

.northcote-button {
  font-family: "Lora Variable", serif;
  font-weight: 500;
  font-variation-settings: "GRAD" 0;
  transition: font-variation-settings 0.3s ease;
}

.northcote-button:hover {
  /* Text gets "heavier" visually, but occupies exact same pixel width */
  font-variation-settings: "GRAD" 150;
  cursor: pointer;
}

Pattern 2: The "Living" Header (React + Framer Motion)

Map scroll to Width/Wonk for "alive" text.

<motion.h1
  style={{
    fontFamily: "Fraunces Variable",
    fontVariationSettings: `'wdth' ${scrollP * 0.5 + 100}, 'WONK' 1`,
  }}
>
  The Curator's Collection
</motion.h1>

Pattern 3: Color Font Palette Switching

Victorian Day -> Cyberpunk Night.

@font-palette-values --northcote-sepia {
  font-family: "Nabla";
  base-palette: 0; /* Default */
  override-colors:
    0 #4a3b32,
    1 #d4c5b0; /* Brown/Cream */
}

@font-palette-values --northcote-neon {
  font-family: "Nabla";
  base-palette: 1;
  override-colors:
    0 #ff00ff,
    1 #00ffff; /* Magenta/Cyan */
}

.hero-accent {
  font-family: "Nabla";
  font-palette: var(--current-palette, --northcote-sepia);
  transition: font-palette 0.5s;
}

Typography Emotion Dimensions (Revised)

Anti-Patterns (What NOT to do)

❌ Static Font Files: Do not import Lora-Bold.ttf. Use Lora-Variable.ttf. ❌ Weight Shifts on Hover: font-weight: bold on hover causes "layout jump". Use GRAD instead. ❌ Axis Overload: Don't animate wght, wdth, slnt, and opsz all at once. "Visual Chaos" != Expressive. ❌ System Fonts: New Northcote standard bans usage of system fonts for "Workhorse" tier.

Typography-Voice Alignment

Typography tiers reinforce the voice tier system defined in DOC-006:

Rule: If the typography is Workhorse (Lora/Work Sans), the copy should be Tier 1 (functional). Personality flourishes belong with Expressive typography.

Checklist for Implementation

1. Load Variable Files: Ensure Fraunces[SOFT,WONK,opsz,wght].woff2 and Lora[wght].woff2 are loaded.
2. Define CSS Tokens:
   cssCopy

   --sys-typescale-display-large-font: "Fraunces Variable";
   --sys-typescale-display-large-variations: "SOFT" 50, "WONK" 1, "wght" 300;
   

3. Enable Optical Sizing: Global CSS html { font-optical-sizing: auto; }.
4. Register Palettes: Define @font-palette-values in global.css.