Use when designing typography for web/app interfaces, selecting fonts, setting up type scales, addressing performance/accessibility concerns, or handling stakeholder conflicts over typography - provides expert-level guidance on font rendering, OpenType features, and performance trade-offs
Provides expert UI typography guidance covering font selection, type scales, OpenType features, performance optimization, and accessibility compliance. Use when designing interfaces, debugging rendering issues, or addressing stakeholder conflicts over typography choices.
/plugin marketplace add mthalman/superpowers/plugin install superpowers@claude-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Expert UI typography balances aesthetics, readability, performance, accessibility, and technical constraints. This skill captures tacit knowledge that separates competent typography from expert-level implementation.
Use this skill when:
Don't use for:
Expert typography guidance requires analyzing technical AND human/organizational factors:
Domain type determines typography psychology:
Organizational dynamics shape recommendations:
Include ALL dimensions in your reasoning:
Example expert framing: "I understand [pressure/constraint mentioned]. Here's why [recommendation]: [technical reason] + [domain reason] + [compliance reason]. To advocate for this: [stakeholder language]."
Beyond "does it look good," evaluate fonts on these technical dimensions:
Check what features the font includes:
tnum - Tabular figures (monospaced numbers for tables/dashboards)liga - Ligatures (fi, fl, ff)calt - Contextual alternatescase - Case-sensitive forms (better punctuation with ALL CAPS)frac - Fractionssups/subs - Proper superscript/subscript (not faked)For UI fonts, tnum is critical for displaying numbers/data consistently.
Font stacks should specify language-specific fallbacks:
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Noto Sans CJK', 'Hiragino Sans', sans-serif;
Typography communicates beyond words—font choice signals domain appropriateness and trustworthiness.
| Font Category | Signals | Appropriate Domains | Inappropriate Domains |
|---|---|---|---|
| Geometric Sans (Inter, Roboto, Work Sans) | Modern, technical, trustworthy, professional | Fintech, SaaS, dashboards, data apps | Luxury brands, editorial |
| High-Contrast Serif (Playfair, Bodoni, Didot) | Elegant, editorial, luxury, traditional | Fashion, lifestyle, marketing | Fintech, healthcare, dashboards |
| Humanist Sans (Open Sans, Lato, Noto Sans) | Friendly, accessible, neutral | Healthcare, education, government | High-end fashion, tech startups |
| Slab Serif (Roboto Slab, Zilla Slab) | Sturdy, authoritative, retro-tech | News, documentation, retro branding | Modern fintech, minimalist UIs |
Domain-Specific Typography Psychology:
Fintech/Finance:
Healthcare:
E-commerce:
When Recommending Against a Font: Don't only cite technical issues—explain the semantic mismatch:
Template: "[Font X] signals [association/emotion], which contradicts [domain requirement]. Users in [domain] need [trust signal], not [font's signal]."
Example: "Playfair Display signals editorial elegance and luxury, which contradicts fintech's need for technical trustworthiness. Financial dashboard users need modern professionalism, not magazine sophistication."
| Ratio | Name | Use Case |
|---|---|---|
| 1.125 | Major Second | Subtle hierarchy, info-dense UIs |
| 1.200 | Minor Third | Conservative corporate sites |
| 1.250 | Major Third | Recommended for most UIs |
| 1.333 | Perfect Fourth | Marketing sites, generous spacing |
| 1.414 | Augmented Fourth | High visual impact, limited text |
| 1.500 | Perfect Fifth | Editorial, large headings |
| 1.618 | Golden Ratio | High drama, minimal use |
Key insight: 1.2 ratio is too subtle - differences become imperceptible. 1.25-1.333 provides clear visual hierarchy with fewer steps.
Line-height should increase with line length:
Optimal line-height = 1.5 + ((CPL - 45) / 100)
Where CPL = Characters Per Line
Examples:
Shorter lines tolerate tighter spacing. Longer lines need more breathing room.
Maintain consistent spacing using a baseline grid:
:root {
--baseline: 8px; /* or 4px for tighter grids */
--font-size-base: 16px;
--line-height-base: 1.5; /* = 24px, divisible by baseline */
}
/* All spacing in multiples of baseline */
h1 { margin-bottom: calc(var(--baseline) * 4); } /* 32px */
p { margin-bottom: calc(var(--baseline) * 3); } /* 24px */
| Strategy | Behavior | When to Use |
|---|---|---|
font-display: block | FOIT (Flash of Invisible Text) | Never for body text |
font-display: swap | FOUT (Flash of Unstyled Text) | Default choice |
font-display: fallback | 100ms FOIT, then FOUT, gives up after 3s | Performance-critical |
font-display: optional | Uses cache or skips font | Extreme performance mode |
Recommendation: Use swap for most cases. Add rel="preload" for critical fonts:
<link rel="preload" href="/fonts/inter-var.woff2" as="font"
type="font/woff2" crossorigin>
When to use variable fonts:
When NOT to use variable fonts:
File size comparison:
Remove unused characters to reduce file size by 30-70%:
# Keep only Latin characters
pyftsubset font.ttf --output-file=font-subset.woff2 \
--flavor=woff2 \
--unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
Trade-off: Smaller files vs. supporting unexpected characters (user names, etc.)
| Criterion | Requirement | Notes |
|---|---|---|
| 1.4.3 Contrast | 4.5:1 normal text, 3:1 large text (18px+) | Measure for each font weight |
| 1.4.4 Resize | Text must scale to 200% without loss | Don't use px for font-size |
| 1.4.8 Visual Presentation | Line-height min 1.5, paragraph spacing 1.5x, line length max 80 chars | 1.2 fails this |
| 1.4.12 Text Spacing | User must be able to adjust spacing | Don't set max-height on text containers |
Light/thin weights need higher contrast:
Regular (400 weight) at 16px: 4.5:1 required
Light (300 weight) at 16px: 5.5:1 recommended
Bold (700 weight) at 16px: 3.5:1 acceptable (treat as "large")
For #666 on white:
- Contrast ratio: 3.82:1 → FAILS for 400 weight
- Need #595959 or darker for AA compliance
For #767676 on white:
- Contrast ratio: 4.54:1 → PASSES for 400 weight
- Still insufficient for 300 weight
Tool: Use WebAIM contrast checker and verify each weight separately.
Ambiguous characters create accessibility barriers, especially in financial/technical applications:
| Character Pair | Problem | Solution |
|---|---|---|
| 1 / I / l | One, capital I, lowercase L look identical | Choose fonts with slashed/dotted zero, serifs on I, distinct l |
| 0 / O | Zero, capital O indistinguishable | Slashed zero (font-feature-settings: 'zero' 1) |
| 5 / S | Similar shapes | Test in context: account numbers, product codes |
| rn / m | Lowercase rn can look like m | Good aperture and letter spacing |
For financial applications:
font-feature-settings: 'zero' 1;Character differentiation is accessibility: Users with dyslexia, low vision, or cognitive impairments rely on clear character forms. This isn't aesthetic—it's functional accessibility.
Minimum sizes for touch targets:
Why 16px matters on mobile: iOS Safari auto-zooms on inputs with font-size <16px. This breaks your layout and frustrates users.
/* Dashboard/data-heavy UI */
.numbers {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* Body copy */
.body {
font-variant-ligatures: common-ligatures;
font-feature-settings: 'liga' 1, 'calt' 1;
}
/* ALL CAPS headings */
.uppercase-heading {
text-transform: uppercase;
font-feature-settings: 'case' 1; /* Better punctuation positioning */
letter-spacing: 0.05em; /* Caps need more spacing */
}
/* Fractions */
.fraction {
font-variant-numeric: diagonal-fractions;
font-feature-settings: 'frac' 1;
}
Some variable fonts include optical sizing (adjusting letterforms for different sizes):
@supports (font-variation-settings: normal) {
body {
font-variation-settings: 'opsz' auto; /* Let browser choose */
}
/* Or manually control */
.large-heading {
font-variation-settings: 'opsz' 48; /* Optimize for 48px */
}
}
Fonts with optical sizing: Recursive, Amstelvar, Source Serif Variable
px for Font Sizes/* BAD */
body { font-size: 16px; }
Problem: Breaks browser zoom, fails WCAG 1.4.4
/* GOOD */
body { font-size: 1rem; } /* 16px default, scales with user preferences */
/* BAD */
@media (max-width: 768px) {
body { font-size: 14px; }
}
Problem: Mobile users need larger or equal text due to viewing distance and screen size
/* BAD - proportional figures in tables */
table { font-family: 'Inter', sans-serif; }
Result: Numbers don't align in columns, looks unprofessional in data-heavy UIs
/* GOOD */
table {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
Every weight = ~40-60kb
Audit actual usage:
const weights = new Set();
document.querySelectorAll('*').forEach(el => {
weights.add(getComputedStyle(el).fontWeight);
});
console.log(weights); // Often only using 400, 600, 700
Most designs only need 2-3 weights. Loading 9 weights = wasted bandwidth.
Performance:
Accessibility:
User experience:
font-display: swap on all @font-facetnum enabled for tables/numbersliga enabled for body copycase enabled for uppercase headingsCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.