Verified:GitHub

typography

Guide typeface selection, pairing, and responsive CSS typography implementation.

2|Updated Apr 9, 2026

Search Tags:#typography #accessibility #web-fonts #responsive-typography #font-loading #typeface-evaluation #typography-patterns

Ready to run

npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill typography-fernando-bertholdo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/fernando-bertholdo/4-successful-AI-life/tree/main/plugins/ui-excellence/skills/systems/typography
Command: npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill typography-fernando-bertholdo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Typography decisions impact readability, accessibility, and brand voice across digital products. Teams often struggle to select appropriate typefaces, pair them effectively, and implement responsive typography that performs well on the web and across devices.

Core Features & Use Cases

Typeface evaluation framework for readability and accessibility.
Structured pairing strategies (serif + sans, same-designer harmony, superfamilies) to maintain brand voice.
Responsive typography patterns with modern CSS techniques (clamp(), font-loading strategies, and performance budgets) and guidance for testing across breakpoints.
Practical reference content and implementation guidance including CSS patterns and testing protocols.

Quick Start

Apply proven web typography practices to your project by choosing typefaces, defining a scalable typographic system, and implementing responsive CSS from the included references.

Frequently Asked Questions about typography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I choose web fonts that are readable and accessible?▼

Effective web typography requires a typeface evaluation framework assessing readability and accessibility. Choose typefaces by testing legibility across UI design systems, marketing pages, and documentation to maintain consistent brand voice and user comprehension.

What's the best way to pair serif and sans-serif fonts for a design system?▼

Font pairing uses structured strategies like serif plus sans combinations, same-designer harmony, or superfamilies to maintain brand voice. Applying these structured pairing strategies ensures visual cohesion across digital products without conflicting typographic weights or styles.

How do I implement responsive typography with modern CSS?▼

Implement responsive typography using modern CSS techniques like clamp for fluid scaling alongside defined font-loading performance budgets. Testing across breakpoints ensures text scales appropriately across devices while maintaining structural consistency.

How do I optimize web font loading for better performance?▼

Optimize web font loading by applying performance budgets and modern CSS font-loading strategies. Setting explicit performance budgets controls resource weight, ensuring typefaces load efficiently without blocking page rendering or degrading user experience.

Does this typography guidance work for accessibility-focused projects?▼

Typography guidance applies to accessibility-focused projects through its typeface evaluation framework. It enforces readability standards and responsive implementation patterns, ensuring digital products meet accessibility requirements while maintaining brand voice.