skills.rest
nkurunziza-saddy
nkurunziza-saddyCOMMUNITY
Explore all skills by this author →
GitHub

typography-system

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
One-click install
npx skills add https://github.com/nkurunziza-saddy/muni-docs --skill typography-system-nkurunziza-saddy
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
dylantarredylantarre
38

responsive-typography

Generate fluid typography scales using CSS clamp() and custom properties.

Community
Basic
AshesOfTheUndeadAshesOfTheUndead

tetris

Standardizes UI design tokens and component rules for playful, high-contrast interfaces inspired by classic block games.

Community
Intermediate
nccasianccasia

responsive-design

Implement container queries, fluid typography, CSS Grid, and mobile-first strategies.

Official
Intermediate