Back to Skills

brand-typography-systems

verified

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.

View on GitHub

Marketplace

claude-vibes

mike-coulbourn/claude-vibes

Plugin

claude-vibes

Repository

mike-coulbourn/claude-vibes
6stars

plugins/vibes/skills/brand-typography-systems/SKILL.md

Last Verified

January 21, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/mike-coulbourn/claude-vibes/blob/main/plugins/vibes/skills/brand-typography-systems/SKILL.md -a claude-code --skill brand-typography-systems

Installation paths:

Claude
.claude/skills/brand-typography-systems/
Powered by add-skill CLI

Instructions

# Brand Typography Systems & Strategic Type Selection

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

---

## Key Principles

1. **Start with personality** — Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
2. **Honor content** — Beautiful type that doesn't serve content fails its purpose.
3. **Contrast through classification** — Serif + sans-serif pairing creates natural hierarchy without conflict.
4. **Form follows function** — Body text prioritizes legibility; display text can prioritize personality.
5. **Consistency builds recognition** — Every touchpoint reinforces (or undermines) brand perception.
6. **Accessibility is non-negotiable** — Design for the widest possible audience.
7. **Systems scale** — Create hierarchies that work across all applications and contexts.

---

## Core Frameworks

### 1. Brand-First Typography Selection Process

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 specif

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
18196 chars