M3 Expressive Typography Enhancer

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:

1. Variable Font Integration - Font-variation-settings for fluid weight/width transitions
2. Extreme Weight Contrasts - 100 vs 900 (not 400 vs 600), 3x+ size jumps
3. Emotional Tone Mapping - Typography that conveys personality
4. Anti-Slop Validation - Reject generic fonts (Inter, Roboto, Arial)
5. 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