skills.rest
fernando-bertholdo
fernando-bertholdoCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill typography-fernando-bertholdo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
sachio222sachio222

web-typography

Select, pair, and implement web typography with CSS for responsive UI projects.

Community
Advanced
Shirataki2Shirataki2
2

web-typography

Standardize web typography decisions with CSS patterns and font-loading strategies.

Community
Advanced
erichowenserichowens
181

typography-expert

Generates font pairings and CSS type scales for web typography.

Community
Advanced