What is the Brand-First Typography Selection Process?

It is a strategic six-step framework that flows from brand personality to typeface choices, ensuring your typography reflects your brand's voice rather than just aesthetic preference.

Does this skill help with WCAG compliance?

Yes, it includes frameworks for accessibility requirements, ensuring that your typography systems meet international standards for legibility and color contrast.

How does the Modular Scale System improve UI design?

A modular scale uses mathematical ratios to create a set of harmonious font sizes, ensuring that headings and body copy relate to each other visually across all screen sizes.

When should I use a serif vs. a sans-serif font?

Serifs are generally best for authoritative, traditional, or long-form editorial content, while sans-serifs are preferred for modern, tech-focused digital interfaces and UI components.

Brand Typography Systems

Name: Brand Typography Systems
Author: mike-coulbourn

bymike-coulbourn

•

Design Tools

Establishes strategic typographic hierarchies and selection frameworks grounded in brand personality and accessibility.

This skill empowers developers and designers to build professional-grade typography systems by integrating strategic frameworks like modular scaling, font pairing principles, and WCAG accessibility standards. It guides the selection of typefaces based on brand personality, provides mathematical ratios for harmonious scaling, and offers technical guidance on variable fonts and web performance to ensure a cohesive and readable visual identity across all platforms.

Key Features

01Modular scale system for mathematically harmonious type hierarchies

02Technical implementation guidance for web performance and variable fonts

03Strategic font selection based on brand personality matrices

04WCAG accessibility compliance for legibility and contrast standards

053 GitHub stars

06Comprehensive font pairing and classification frameworks

Use Cases

01Developing a new design system with consistent, responsive typographic scales

02Selecting and pairing professional typefaces for marketing and product landing pages

03Auditing existing web interfaces for accessibility and visual hierarchy improvements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mike-coulbourn/claude-vibes brand-typography-systems

For use in Claude.ai and ChatGPT

Download Skill