skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

typography-system

Provide guidelines for creating cross-platform typography systems.

1|Updated Jun 9, 2026
Search Tags:#typography#accessibility#readability#modular scale#font design
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill typography-system-jpoindexter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-system
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/typography-system
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill typography-system-jpoindexter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you build a cohesive, accessible type system across platforms, improving readability and user experience.

Core Features & Use Cases

  • Anatomical Guide: Provides comprehensive guidance on type anatomy and its impact on readability.
  • Modular Scale: Calculates and suggests harmonious font scales for various contexts.
  • Spacing & Kerning: Offers best practices for leading, measure, tracking, and kerning to enhance legibility.
  • Font Selection & Pairing: Assists in choosing and pairing fonts based on role and style.
  • Accessibility: Ensures that typography meets accessibility standards, including dyslexia-friendly fonts and 200% zoom support.

Quick Start

Load the typography-system skill and follow the modular scale recommendations for your web project to enhance readability and user engagement.

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 scale for web typography?▼

A modular scale calculates harmonious font sizes using a base value and ratio, ensuring visual hierarchy. This typography system generates these scales and provides guidelines for applying them across different web contexts to maintain consistency.

What are the best practices for font pairing in a design system?▼

Font pairing in a design system requires balancing role and style. This system assists in choosing complementary fonts by assessing type anatomy and stylistic fit, ensuring your selected typefaces work together cohesively.

How does spacing and kerning affect readability in web fonts?▼

Spacing and kerning directly impact legibility by controlling letter and word boundaries. This system offers best practices for leading, measure, and tracking to optimize text blocks, preventing reader fatigue and enhancing overall user experience.

Does this typography system support accessibility standards like 200% zoom?▼

Yes, this typography system ensures accessibility by supporting 200% zoom and recommending dyslexia-friendly fonts. It assesses design decisions against accessibility standards to guarantee readable text for users with visual or cognitive differences.

What is type anatomy and why does it matter for cross-platform design?▼

Type anatomy refers to the structural parts of letterforms like x-height and counters. Understanding anatomy matters for cross-platform design because these structural details significantly impact readability and text rendering across different devices.

Related Skills

Explore More Design & Creative Skills→
stevengonsalvezstevengonsalvez

teach-impeccable

Gather design context from a repository and persist it to AI configuration.

Community
Intermediate
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
phazurlabsphazurlabs
35

UI Visual Design System

Define visual design systems for typography, color, spacing, and accessibility.

Community
Advanced
klarbauklarbau
7

web-typography

Select and implement web typefaces with CSS for readable interfaces.

Community
Advanced