Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude-vibes
Provides brand typography selection and hierarchy development frameworks including the Brand-First Typography Selection Process, Modular Scale System, Font Classification Matrix, Serif vs. Sans-Serif Decision Framework, Typeface Evaluation Criteria, Font Pairing Principles, WCAG accessibility requirements, and typography design tokens. Auto-activates during brand typography development, font selection, type hierarchy creation, and typography system work. Use when discussing brand typography, font selection, font pairing, type hierarchy, modular scale, typography accessibility, WCAG typography, or typography guidelines.
npx claudepluginhub mike-coulbourn/claude-vibes --plugin claude-vibesHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude-vibes:skills/brand-typography-systemsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Quick reference for developing strategic brand typography systems grounded in personality, hierarchy, and practical application.
Guides font pairing with concord/contrast/conflict model, x-height matching, superfamilies, and 2-3 family limits. Use for UI type selection, design systems, or typeface evaluation.
Guides web typography with 2-3 font family limits, modular scales (Minor Third, Major Third, Perfect Fourth), line heights (1.4-1.6 body, 1.1-1.3 headings), and 45-75 character line lengths per Bringhurst rules.
Creates modular typography scales with size ratios, weights, line-heights, responsive adjustments, and best practices for consistent UI text.
Share bugs, ideas, or general feedback.
Quick reference for developing strategic brand typography systems grounded in personality, hierarchy, and practical application.
"Typography exists to honor content." — Robert Bringhurst, The Elements of Typographic Style
"Typography and design should enhance communication, not just look attractive." — Erik Spiekermann
"I can teach anyone good typography in two or three days. The craft is very simple, the rest is just practice." — Erik Spiekermann
Typography selection must flow from brand strategy, not aesthetic preference.
The Process:
| Step | Action | Purpose |
|---|---|---|
| 1 | Define Brand Personality | Identify 3-5 traits that define brand voice and image |
| 2 | Understand Target Audience | Demographics, preferences, industry expectations |
| 3 | Gather Inspiration | Analyze competitors, identify differentiation opportunities |
| 4 | Select and Pair Fonts | Create mockups across touchpoints (print, web, mobile) |
| 5 | Establish Hierarchy | Define primary, secondary, tertiary with clear purposes |
| 6 | Create Guidelines | Document everything with examples and specifications |
Key Insight: "If the brand can define itself using descriptions to capture the tone, personality, and principles—we can translate that into typographic forms."
A mathematical approach to creating harmonious type hierarchies using consistent ratios.
Common Ratios:
| Ratio | Value | Character | Best For |
|---|---|---|---|
| Minor Second | 1.067 | Subtle increments | Dense layouts, data-heavy UIs |
| Major Second | 1.125 | Slightly noticeable | Functional interfaces |
| Minor Third | 1.200 | Moderate differentiation | Balanced content hierarchy |
| Major Third | 1.250 | Clear hierarchy | General UI design |
| Perfect Fourth | 1.333 | Distinct visual hierarchy | Editorial, marketing |
| Golden Ratio | 1.618 | Dramatic, high-end | Premium brands, display-heavy |
The Process:
Key Principle: Limit to 6-8 distinct sizes. Larger screens can use more dramatic ratios; smaller screens benefit from conservative ratios.
Tools: Typescale.io | Type Scale Tool
A comprehensive approach covering three interconnected systems:
| System | Focus | Key Elements |
|---|---|---|
| Letter | Individual characters | Typeface anatomy, classification, personality |
| Text | Words and paragraphs | Alignment, spacing, kerning, tracking, leading |
| Grid | Page structure | Columns, margins, spatial relationships |
Key Principles:
| Classification | Personality Traits | Best For | Example Industries |
|---|---|---|---|
| Serif | Traditional, classical, reliable, authoritative, sophisticated | Long-form reading, heritage positioning, trust | Law firms, finance, luxury, editorial |
| Sans-Serif | Modern, clean, minimal, approachable, contemporary | Digital interfaces, startups, accessibility | Tech, SaaS, healthcare, contemporary retail |
| Script | Elegant, distinctive, personal, feminine | Special occasions, luxury accents | Fashion, wedding, high-end beauty |
| Handwritten | Artsy, informal, fun, playful, authentic | Personal connection, casual brands | Creative agencies, children's products, artisan food |
| Display/Decorative | Bold, attention-grabbing, distinctive | Headlines only, limited accent use | Entertainment, events, creative campaigns |
| Slab Serif | Strong, sturdy, mechanical, modern-classic | Technology with heritage, contemporary editorial | Construction, automotive, journalism |
| Monospace | Technical, precise, developer-oriented | Code, data, technical documentation | Developer tools, fintech, data platforms |
Note: High-resolution displays have reduced the screen legibility gap between serif and sans-serif. Context and specific typeface matter more than classification alone.
Seven dimensions for evaluating any typeface:
| Criterion | Question to Ask | Why It Matters |
|---|---|---|
| Comprehensiveness | Does it have all characters, weights, and styles needed? | Brand needs evolve; typeface must grow with you |
| Legibility | Is it readable at small sizes? Are characters distinctive? | Content must be consumable |
| Versatility | Works across headlines, body, captions, different media? | One system must serve many contexts |
| Complementarity | Works well with logo, colors, imagery? | Typography exists within visual system |
| Distinctiveness | Helps differentiate from competitors? | Typography is branding opportunity |
| Technical Readiness | Available as web font? Proper licensing? Variable font? | Implementation constraints matter |
| X-Height Appropriateness | Optimal for intended sizes? | Higher x-height improves screen legibility, but extremely high reduces word-shape recognition |
The oldest reliable rule: pair serif with sans-serif. This creates clear contrast through form while allowing both typefaces to serve distinct purposes.
Seek Contrast, Not Conflict
"When two styles are paired that are almost the same—but not quite—they begin to clash, like wearing two slightly different plaid patterns at once." — Ellen Lupton
Avoid "Typographic Mud": Typefaces from the same classification but different families can blur together without creating meaningful distinction.
Create Meaningful Hierarchy: Use contrast in weight, size, and style to guide readers.
Limit Strong Personalities: Mixing two bold typographic personalities rarely works—they compete for attention.
Consider Weight Contrast: Bolder weights for titles, lighter for body (or vice versa for specific effects).
| Text Type | Line Height | Rationale |
|---|---|---|
| Headlines | 1.1 - 1.25 | Tight for impact |
| Subheads | 1.25 - 1.35 | Moderate |
| Body copy | 1.5 - 1.7 | Optimal readability |
| Long-form content | 1.6 - 1.8 | Extra breathing room |
| Context | Tracking | Rationale |
|---|---|---|
| Large headlines (>36px) | -0.02em to -0.01em | Tighten for impact |
| Medium headings | 0 | Default |
| Body text | 0 | Designed for optimal spacing |
| Small text (<14px) | 0.01em to 0.02em | Open up for legibility |
| All caps | 0.05em to 0.1em | Always add spacing |
| Buttons/Labels | 0.05em | Improve readability |
What They Are: Single font file containing all weights, widths, and styles through continuous interpolation.
Benefits:
Key Axes:
| Axis | Code | Range | Effect |
|---|---|---|---|
| Weight | wght | Thin to Black | Stroke thickness |
| Width | wdth | Condensed to Extended | Character width |
| Italic | ital | Upright to Italic | Roman/italic switch |
| Slant | slnt | Angle of lean | Oblique angle |
| Optical Size | opsz | Size-specific adjustments | Auto-adjusts details for size |
The Problem: Custom fonts require downloads that delay text rendering.
FOIT vs FOUT:
Recommended Strategies:
font-display: swapfont-display: optional for maximum performanceFluid Typography with clamp():
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
When to Use: Applications, dashboards, content-heavy tools where neutrality and performance matter.
Modern System Font Stack:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Resource: Modern Font Stacks
| Standard | Ratio | Use Case |
|---|---|---|
| Level AA (minimum) | 4.5:1 | Normal text |
| Level AA (minimum) | 3:1 | Large text (24px+ or 18.5px bold) |
| Level AAA (enhanced) | 7:1 | Normal text |
| Level AAA (enhanced) | 4.5:1 | Large text |
Must accommodate user overrides for:
Key Characteristics:
Recommended Fonts:
| Font | Why It Works |
|---|---|
| Lexend | Specifically designed for readability and dyslexia |
| Open Sans | Clear shapes, generous spacing |
| Verdana | Clear letter shapes, uniformity |
| Atkinson Hyperlegible | Designed for low-vision readers, benefits all |
| Inter | Clear shapes, excellent for digital |
Key Finding: Sans-serif, monospaced, and roman fonts are most readable for dyslexic readers. Italics significantly reduce readability.
| Factor | Digital | |
|---|---|---|
| Resolution | 300 dpi | 72-100 ppi (varies by screen) |
| Body Font Size | 10-12pt typical | 15-25px typical |
| Font Freedom | Any font works if printed | Limited by availability/licensing |
| Rendering | Consistent across prints | Varies by device/browser |
| Serif Readability | Excellent for long text | Depends on screen quality |
| Type | Use Case | Typical Limits |
|---|---|---|
| Desktop | Design software, print materials | Number of users/devices |
| Web | Websites via CSS | Page views, domains |
| App | Mobile/desktop applications | App downloads, platforms |
| ePub | Digital publications | Title count |
| Server/API | Dynamic image generation | Impressions |
| Mistake | Problem | Solution |
|---|---|---|
| Inconsistent font usage across platforms | Harms brand recognition | Document and enforce typography system |
| Too many fonts | Creates visual chaos | Stick to 2-3 maximum |
| Sacrificing readability for style | Audience can't consume content | Test legibility at actual use sizes |
| Ignoring licensing | Legal liability | Audit all fonts, ensure proper licenses |
| Mismatched personality | Typography undermines brand message | Start with personality, select to match |
| Low contrast text | Fails accessibility, hard to read | Use contrast checkers, meet WCAG AA |
| Over-styling | Shadows, gradients look unprofessional | Keep typography clean and purposeful |
| Ignoring mobile | Fails on primary device category | Test across all device sizes |
| Using trendy fonts | Dates quickly, requires rebrand | Choose timeless options |
| Skipping hierarchy | Users can't navigate content | Define clear size/weight distinctions |
| Not testing across media | Print and digital render differently | Test in both contexts |
| Default fonts for logos | Lacks distinctiveness | Custom or carefully selected typefaces only |
Contrast Through Classification: Serif + sans-serif pairing creates natural hierarchy and visual interest without conflict.
Form Follows Function: Body text prioritizes legibility; display text can prioritize personality.
Consistency Builds Recognition: Every touchpoint reinforces (or undermines) brand perception.
Accessibility is Non-Negotiable: Design for the widest possible audience—good accessibility is good design.
Start With Personality: Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
If You Have Fewer Choices: "It doesn't necessarily make your life more difficult. It often makes it easier." — Erik Spiekermann
See reference/templates.md for: