skills.rest
Siddharth-Khattar
Siddharth-KhattarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

typography-system

Define modular type scales, accessible contrasts, and hierarchy for UI typography.

Updated Jan 12, 2026
Search Tags:#typography#accessibility#readability#design-system#type-scale#font-pairing#responsive-typography
One-click install
npx skills add https://github.com/Siddharth-Khattar/holmes --skill typography-system-siddharth-khattar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-system
Source: https://github.com/Siddharth-Khattar/holmes/tree/main/.kiro/skills/typography-system
Command: npx skills add https://github.com/Siddharth-Khattar/holmes --skill typography-system-siddharth-khattar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography inconsistencies degrade readability and accessibility across products, causing cognitive load and usability issues.

Core Features & Use Cases

  • Modular type scales aligned to base sizes and ratios
  • Accessible color contrast guidance and font pairing for brand consistency
  • Design-system documentation and responsive typography guidelines for web and mobile

Quick Start

Set base font size to 16px, choose a 1.25 ratio, and pair Inter for body with Playfair Display for headings to generate a responsive typography system.

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 responsive typography system for web and mobile interfaces?▼

Accessible typography requires meeting color contrast standards and maintaining readable type scales. Define modular scales and contrast rules to ensure your UI text remains legible and reduces cognitive load for all users.

What is the best way to set up a modular type scale for a design system?▼

Setting up a modular type scale requires choosing a base font size, like 16px, and a scaling ratio, such as 1.25. This generates a consistent hierarchy of font sizes for headings and body text across your design system.

How do I choose font pairings for brand consistency in UI design?▼

Choose font pairings by selecting complementary typefaces for headings and body text, such as Inter and Playfair Display. Consistent font pairing establishes clear visual hierarchy and reinforces brand identity across web and mobile documentation.

Does this typography approach work for both web and mobile design systems?▼

Yes, this typography approach works for both web and mobile design systems. It provides specific responsive typography guidelines and consistent type scales tailored for both web and mobile interfaces to ensure cross-platform readability.

Why does inconsistent typography degrade readability in UI?▼

Inconsistent typography degrades readability because it disrupts visual hierarchy and increases cognitive load. Establishing consistent type scales and accessible contrasts solves these usability issues and ensures a coherent user experience.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

typeset

Audit web and product typography and generate CSS token implementation plans.

Community
Intermediate
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
nkurunziza-saddynkurunziza-saddy

typography-system

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

Community
Advanced