typography

Establish scalable type systems with base sizes, heading scales, and line heights.

5|2|Updated Jan 20, 2026

Search Tags:#typography #design #readability #font-loading #opentype-features #typography-a11y

Ready to run

npx skills add https://github.com/petekp/agent-skills --skill typography

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/petekp/agent-skills/tree/main/skills/typography
Command: npx skills add https://github.com/petekp/agent-skills --skill typography

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Typography in user interfaces is often inconsistent, reducing readability and obscuring content hierarchy. This skill gives a principled framework to standardize typography decisions, align them with design systems, and improve long-form readability across platforms.

Core Features & Use Cases

Establish a scalable type system for web and mobile, including base size, heading scale, and line height.
Provide guidance on font pairing, OpenType features, fluid typography, and accessibility considerations.
Translate typographic decisions into design tokens and CSS patterns for consistent implementation.

Quick Start

Provide a practical typography system for a UI, including base size, heading scale, line height, and dark-mode adjustments.

Frequently Asked Questions about typography

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

FAQPage Schema

How do I establish a scalable type system for web and mobile interfaces?▼

To establish a scalable type system, define a base size, heading scale, and line height. This framework standardizes typography decisions to improve readability and align with design systems across platforms.

What is the best way to improve UI typography readability in dark mode?▼

Improving UI typography readability in dark mode requires adjusting typographic consistency and contrast. This involves applying accessibility best practices and fluid typography principles to ensure comfortable reading.

How do I translate typographic decisions into design tokens and CSS patterns?▼

Translate typographic decisions into design tokens and CSS patterns by standardizing your type scale and line height. This ensures consistent implementation and maintains content hierarchy across web and mobile.

Does fluid typography with responsive CSS support OpenType features for accessibility audits?▼

Fluid typography with responsive CSS supports OpenType features and accessibility audits. This approach ensures interface readability and typographic consistency across web and mobile platforms.

Why does my UI typography look inconsistent and obscure content hierarchy?▼

UI typography looks inconsistent when lacking a principled framework. Standardizing decisions like font pairing, base size, and line height resolves readability issues and clarifies content hierarchy across platforms.