typography-system

Name: typography-system
Availability: InStock
Author: saddy

Define modular type scales, font pairings, and responsive typography rules.

Updated Sep 28, 2025

Search Tags:#typography #accessibility #design-system #type-scale #font-pairing #responsive-typography

Ready to run

npx skills add https://github.com/nkurunziza-saddy/muni-docs --skill typography-system-nkurunziza-saddy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typography-system
Source: https://github.com/nkurunziza-saddy/muni-docs/tree/main/.agents/skills/typography-system
Command: npx skills add https://github.com/nkurunziza-saddy/muni-docs --skill typography-system-nkurunziza-saddy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography decisions are hard to scale across products; teams struggle with consistency, readability, and accessibility. This skill provides a structured approach to typography, including modular scales, font pairings, hierarchy, and accessible practices.

Core Features & Use Cases

Modular type scales and hierarchy
Font pairings guidance
Responsive typography patterns (clamp, fluid)
Accessibility best practices (contrast, line height, line length)
Practical implementation examples for design systems and UI components

Quick Start

Define a modular type scale with accessible font pairings for your UI project.

Frequently Asked Questions about typography-system

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

FAQPage Schema

How do I create a modular type scale for a design system?▼

A modular type scale uses a consistent ratio to define font sizes, establishing visual hierarchy and readability. This skill generates scalable type scales with accessible font pairings and responsive rules for UI components.

What is fluid typography and how does it work for responsive web apps?▼

Fluid typography uses CSS clamp to scale font sizes smoothly across screen widths, preventing abrupt layout shifts. This skill provides responsive typography patterns and practical implementation examples for web apps and documentation sites.

Can I use this to ensure typography accessibility and contrast?▼

Yes, typography accessibility requires meeting contrast ratios, appropriate line height, and readable line length. This skill applies accessibility best practices to your type system to ensure readable text across UI components.

What's the best way to choose font pairings for a UI project?▼

Effective font pairings combine complementary typefaces to establish brand-aligned typography without sacrificing readability. This skill delivers structured font pairing guidance alongside modular scales and hierarchy rules for design systems.

How do I apply responsive typography rules across multiple products?▼

Applying responsive typography across products requires consistent fluid rules and modular scales to maintain hierarchy at scale. This skill defines responsive rules and practical implementation examples to establish brand-aligned typography.