typography-system

What problem does it solve?

Typography decisions are error-prone and inconsistent across products, leading to readability issues and cognitive load.

Core Features & Use Cases

• Establish a modular type scale to ensure consistent sizing across components.
• Define accessible font pairings and loading strategies for performance.
• Ensure readability and accessibility across devices, including color contrast and line height.
• Use Case: You're building a design system or UI toolkit; apply this skill to derive scalable typography guidelines for headings, body text, and display elements.

Quick Start

• Provide base font sizes, a chosen modular scale, and font families to start building a scalable typography system.
• Create CSS tokens for body, headings, and display styles.
• Provide a starter snippet that demonstrates applying the type scale to a simple component (e.g., a card with heading, body, and caption).