M3 Expressive Typography Enhancer

Purpose

Elevate typography beyond basic token replacement with variable fonts, extreme weight contrasts, and emotional tone mapping. Transforms boring typography (Inter 400 vs 500) into expressive, memorable typography (100 vs 900) that conveys personality and meaning.

When to Use

Use this skill when you need to:

Choose expressive fonts that avoid generic defaults (Inter, Roboto, Arial)
Implement variable fonts with fluid weight transitions
Create extreme contrasts (9x weight difference, not 1.25x)
Map typography to emotion (playful, confident, elegant, technical)
Validate font choices against M3 Expressive principles
Establish font pairings (display + monospace, serif + geometric)
Upgrade existing typography from timid to dramatic

Trigger scenarios:

"This typography feels generic and boring"
"How do I make typography more expressive?"
"What font conveys confidence and professionalism?"
"Replace Inter with something distinctive"

Overview

This skill enhances M3 typography with M3 Expressive principles:

Variable Font Integration - Font-variation-settings for fluid weight/width transitions
Extreme Weight Contrasts - 100 vs 900 (not 400 vs 600), 3x+ size jumps
Emotional Tone Mapping - Typography that conveys personality
Anti-Slop Validation - Reject generic fonts (Inter, Roboto, Arial)
Expressive Font Pairing - High-contrast combinations

M3 Expressive Typography Principles

1. Variable Fonts (Fluid Typography)

Recommended Variable Fonts:

Plus Jakarta Sans (200-800) - Modern, professional
Poppins (100-900) - Elegant, versatile
Montserrat (100-900) - Bold, geometric
Sora (100-800) - Tech-forward, unique

Example:

.expressive-heading {
  font-family: "Plus Jakarta Sans Variable", sans-serif;
  font-variation-settings: "wght" 800;
  transition: font-variation-settings 300ms var(--sys-motion-easing-expressive);
}

.expressive-heading:hover {
  font-variation-settings: "wght" 900;
}

2. Extreme Weight Contrasts

Anti-Pattern (Boring):

// ❌ Timid contrast - 1.25x ratio
<h1 style={{ fontWeight: 400 }}>Heading</h1>
<p style={{ fontWeight: 500 }}>Body</p>

M3 Expressive (Dramatic):

// ✅ Extreme contrast - 9x ratio
<h1 style={{
  fontWeight: 100,
  fontSize: 'var(--sys-type-display-large-size)',
  letterSpacing: '-0.02em'
}}>Heading</h1>
<p style={{
  fontWeight: 900,
  fontSize: 'var(--sys-type-body-small-size)'
}}>Subtext</p>

3. Emotional Tone Mapping

Playful & Energetic → Montserrat 900 + Nunito 400 Confident & Professional → Plus Jakarta Sans 800 + Inter 400 Elegant & Premium → Poppins 300 + Open Sans 400 Tech-Forward → Sora 700 + Inter 400

4. Anti-Slop Validation

FORBIDDEN FONTS:

❌ Inter (alone), Roboto, Open Sans, Arial, Helvetica, System fonts

Alternatives:

Inter → Plus Jakarta Sans Variable
Roboto → Poppins
Arial → Montserrat

5. Expressive Font Pairing

Display + Monospace: Plus Jakarta Sans + JetBrains Mono Serif + Geometric: Playfair Display + Poppins Variable Across Weights: Montserrat 900 + Montserrat 300

Usage

m3-expressive-typography-enhancer \
  --file frontend/src/components/ui/Card/Card.tsx \
  --tone "confident-professional" \
  --validate-anti-slop

Validation Checklist

[ ] No forbidden fonts used alone
[ ] Weight contrast ratio ≥ 3x
[ ] Size contrast ratio ≥ 3x
[ ] Variable fonts enabled
[ ] Emotional tone matches context
[ ] High-contrast font pairing
[ ] Letter spacing applied correctly

Troubleshooting

Variable Fonts Not Loading

Solution:

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap" rel="stylesheet" />

Weight Contrast Too Extreme

Solution: Start with 300 vs 700, gradually increase to 100 vs 900

Font Pairing Incoherent

Solution: Use same family at different weights or ensure emotional tone consistency

Related Skills

m3-anti-slop-validator - Validate typography against slop patterns

Version: 2.0.0 (Optimized) Status: Production Ready